Fix minor details

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

.gitignore

@@ -62,5 +62,8 @@ yarn-error.log
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
-# testing
+# Testing
 /coverage
+
+# Environment variables
+.env

src/app.tsx

@@ -10,7 +10,8 @@ import { SettingsProvider } from './contexts/settings';
 
 function App(): JSX.Element {
   const colorScheme = Appearance.getColorScheme();
-  const theme = colorScheme === 'dark' ? lightTheme : darkTheme;
+  const isDarkMode = colorScheme === 'dark';
+  const theme = isDarkMode ? darkTheme : lightTheme;
 
   return (
     <RealmProvider schema={[Meme, Tag]}>
@@ -19,7 +20,7 @@ function App(): JSX.Element {
           <SafeAreaProvider>
             <StatusBar
               barStyle={
-                colorScheme === 'dark' ? 'dark-content' : 'light-content'
+                isDarkMode ? 'light-content' : 'dark-content'
               }
               backgroundColor={theme.colors.background}
             />

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>
   );