Fix minor details

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/loadingView.tsx

@@ -1,22 +1,15 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import { useTheme } from 'react-native-paper';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+import PaddedView from './paddedView';
 
 const LoadingView = () => {
   const { colors } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <PaddedView centered>
       <ActivityIndicator size="large" color={colors.primary} />
-    </View>
+    </PaddedView>
   );
 };
 

src/components/paddedView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useTheme } from 'react-native-paper';
 
 const styles = StyleSheet.create({
   container: {
@@ -20,9 +21,11 @@ const PaddedView = ({
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
-}): React.JSX.Element => {
+  }): React.JSX.Element => {
+  const { colors } = useTheme();
+
   return (
-    <View style={[styles.container, centered && styles.centered, style]}>
+    <View style={[styles.container, centered && styles.centered, { backgroundColor: colors.background }, style]}>
       {children}
     </View>
   );