Make status bar visible, begin looking into dark mode

ALEEF02 · Feb 4, 2020 · f97dd1f · f97dd1f
1 parent 30b5fc4
commit f97dd1f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 19 deletions.
diff --git a/App.js b/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { AppearanceProvider } from 'react-native-appearance';
 import { AppLoading } from 'expo';
 import * as Icon from '@expo/vector-icons';
 import * as Font from 'expo-font';
@@ -24,7 +25,9 @@ export default class App extends React.Component {
       return (
         <View style={styles.container}>
           {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
-          <AppNavigator />
+		  <AppearanceProvider>
+			<AppNavigator />
+		  </AppearanceProvider>
         </View>
       );
     }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react": "^16.9.0",
     "react-dom": "^16.5.1",
     "react-native": "^0.61.5",
+    "react-native-appearance": "^0.3.2",
     "react-native-fetch-blob": "^0.10.8",
     "react-native-gesture-handler": "^1.5.2",
     "react-native-pdf": "^5.1.4",

diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import * as FileSystem from 'expo-file-system';
-import { Alert, SectionList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Alert, SectionList, Image,	SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { NavigationEvents } from 'react-navigation';
 import Constants from 'expo-constants';
 
@@ -50,7 +50,6 @@ class StorageView extends React.Component {
 	var avalibleStorage = 0;
 	var totalStorage = 0;
 	var usedStorage = 0;
-
 	readDirectoryAsync(documentDirectory).then(subFiles => {
 		console.log("Subdirs documentDirectory/\n" + JSON.stringify(subFiles));
 		var totalDocsFound = 0;
@@ -235,10 +234,6 @@ export default class SettingsScreen extends React.Component {
 		this.child = React.createRef();
 	}
 
-	componentDidMount() {
-		this.updateDisplay();
-	}
-
 	updateDisplay = () => {
 		this.child._updateStorageDisplay();
 	};
@@ -286,18 +281,20 @@ export default class SettingsScreen extends React.Component {
 
   render() {
     return (
-		<View style={styles.container}>
-			<NavigationEvents
-				onDidFocus={payload => this.updateDisplay()}
-			/>
-			<StorageView ref={instance => { this.child = instance; }}/>
-			<TouchableOpacity 
-				onPress={() => this._clearDownloads()} 
-				style={styles.button}
-			>
-				<Text style={styles.buttonText}>Clear Storage</Text>
-			</TouchableOpacity>
-		</View>
+		<SafeAreaView style={styles.safeArea}>
+			<View style={styles.container}>
+				<NavigationEvents
+					onDidFocus={payload => this.updateDisplay()}
+				/>
+				<StorageView ref={instance => { this.child = instance; }}/>
+				<TouchableOpacity 
+					onPress={() => this._clearDownloads()} 
+					style={styles.button}
+				>
+					<Text style={styles.buttonText}>Clear Storage</Text>
+				</TouchableOpacity>
+			</View>
+		</SafeAreaView>
 	);
   }
 }
@@ -307,6 +304,10 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
+  safeArea: {
+	flex: 1,
+	backgroundColor: '#000'
+  },
   titleContainer: {
     paddingHorizontal: 15,
     paddingTop: 15,