Merge pull request exponential-inc#4 from theboi/master

Auto Theming + Async

App.tsx

@@ -8,89 +8,124 @@
 
 import 'react-native-gesture-handler';
 import React, {Fragment} from 'react';
+
 import {NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {connect, ReactReduxContextValue} from 'react-redux';
+import {createStackNavigator} from '@react-navigation/stack';
+
+import {connect} from 'react-redux';
+import {AppearanceProvider, Appearance} from 'react-native-appearance';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {
-  ApplicationProvider,
-  Layout,
-  Text,
-} from '@ui-kitten/components';
+import {ApplicationProvider, Layout, Text} from '@ui-kitten/components';
 import {mapping, light as lightTheme, dark as darkTheme} from '@eva-design/eva';
 import {SafeAreaView} from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 
 import {K} from './src/store/constants';
 
 import {HomePage} from './src/pages/Home';
 import {SettingsPage} from './src/pages/Settings';
+import {SettingsToggleThemePage} from './src/pages/SettingsToggleTheme';
 import {FindPage} from './src/pages/Find';
+import {store} from './index.js';
 
 const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
+
+const SettingsPageNest = () => {
+  return (
+    <Stack.Navigator initialRouteName="Settings" headerMode="none">
+      <Stack.Screen name="Settings" component={SettingsPage} />
+      <Stack.Screen name="Theme" component={SettingsToggleThemePage} />
+    </Stack.Navigator>
+  );
+};
+
+Appearance.addChangeListener(({colorScheme}) => {
+  store.dispatch({type: 'SET_THEME_NATIVE', theme: colorScheme});
+});
 
 const App = (props: any) => {
+  // const getSaved = async () => {
+  //   let raw;
+  //   try {
+  //     raw = await AsyncStorage.multiGet(['themeMode']); //add on to the array for more
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+
+  //   let retrivedObject = {};
+  //   raw.map(value => {
+  //     retrivedObject[value[0]] = value[1];
+  //   });
+  //   console.log(retrivedObject);
+  //   return retrivedObject;
+  // };
+  // console.log(getSaved().retrivedObject);
   const themeColor = props.theme === 'dark' ? K.color.dark : K.color.light;
   return (
-    <Fragment>
-      <SafeAreaView
-        style={{
-          flex: 0,
-          backgroundColor:
-            props.theme === 'dark'
-              ? themeColor.linkBG
-              : themeColor.linkBG,
-        }}
-      />
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor:
-            props.theme === 'dark'
-              ? themeColor.secondaryBG
-              : themeColor.secondaryBG,
-        }}>
-        <ApplicationProvider
-          mapping={mapping}
-          theme={props.theme === 'dark' ? darkTheme : lightTheme}>
-          <NavigationContainer>
-            <Tab.Navigator
-            initialRouteName={'Home'}
-              screenOptions={({navigation, route}) => ({
-                tabBarIcon: ({focused, color, size}) => {
-                  let iconName;
-                  switch (route.name) {
-                    case 'Home':
-                      iconName = focused
-                        ? 'home-variant'
-                        : 'home-variant-outline';
-                      break;
-                    case 'Settings':
-                      iconName = focused ? 'settings' : 'settings-outline';
-                      break;
-                    case 'Find':
-                      iconName = focused ? 'map-marker' : 'map-marker-outline';
-                      break;
-                    default:
-                      iconName = 'alert-circle';
-                  }
-                  return <Icon name={iconName} size={size} color={color} />;
-                },
-              })}
-              tabBarOptions={{
-                activeTintColor: themeColor.contrast,
-                activeBackgroundColor: themeColor.secondaryBG,
-                inactiveTintColor: 'gray',
-                inactiveBackgroundColor: themeColor.secondaryBG,
-                style: {borderTopColor: themeColor.primaryBG}
-              }}>
-              <Tab.Screen name="Find" component={FindPage} />
-              <Tab.Screen name="Home" component={HomePage} />
-              <Tab.Screen name="Settings" component={SettingsPage} />
-            </Tab.Navigator>
-          </NavigationContainer>
-        </ApplicationProvider>
-      </SafeAreaView>
-    </Fragment>
+    <AppearanceProvider>
+      <Fragment>
+        <SafeAreaView
+          style={{
+            flex: 0,
+            backgroundColor:
+              props.theme === 'dark' ? themeColor.linkBG : themeColor.linkBG,
+          }}
+        />
+        <SafeAreaView
+          style={{
+            flex: 1,
+            backgroundColor:
+              props.theme === 'dark'
+                ? themeColor.secondaryBG
+                : themeColor.secondaryBG,
+          }}>
+          <ApplicationProvider
+            mapping={mapping}
+            theme={props.theme === 'dark' ? darkTheme : lightTheme}>
+            <NavigationContainer>
+              <Tab.Navigator
+                initialRouteName={'Home'}
+                screenOptions={({navigation, route}) => ({
+                  tabBarIcon: ({focused, color, size}) => {
+                    let iconName;
+                    switch (route.name) {
+                      case 'Home':
+                        iconName = focused
+                          ? 'home-variant'
+                          : 'home-variant-outline';
+                        break;
+                      case 'Settings':
+                        iconName = focused ? 'settings' : 'settings-outline';
+                        break;
+                      case 'Find':
+                        iconName = focused
+                          ? 'map-marker'
+                          : 'map-marker-outline';
+                        break;
+                      default:
+                        iconName = 'alert-circle';
+                    }
+                    return <Icon name={iconName} size={size} color={color} />;
+                  },
+                })}
+                tabBarOptions={{
+                  activeTintColor: themeColor.contrast,
+                  activeBackgroundColor: themeColor.secondaryBG,
+                  inactiveTintColor: 'gray',
+                  inactiveBackgroundColor: themeColor.secondaryBG,
+                  style: {borderTopColor: themeColor.primaryBG},
+                }}>
+                <Tab.Screen name="Find" component={FindPage} />
+                <Tab.Screen name="Home" component={HomePage} />
+                <Tab.Screen name="Settings" component={SettingsPageNest} />
+              </Tab.Navigator>
+            </NavigationContainer>
+          </ApplicationProvider>
+        </SafeAreaView>
+      </Fragment>
+    </AppearanceProvider>
   );
 };
 
@@ -101,7 +136,10 @@ const mapStateToProps = (state: any) => {
 };
 
 const mapDispatchToProps = (dispatch: any) => {
-  return {};
+  return {
+    setThemeNative: (theme: string) =>
+      dispatch({type: 'SET_THEME_NATIVE', theme: theme}),
+  };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

index.js

@@ -11,7 +11,7 @@ import { Provider } from 'react-redux';
 import { createStore } from 'redux';
 import { reducer } from './src/store/reducer';
 
-const store = createStore(reducer);
+export const store = createStore(reducer);
 
 const RenderApp = () => {
   return (

ios/Podfile.lock

@@ -182,6 +182,8 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
+  - react-native-appearance (0.3.3):
+    - React
   - react-native-safe-area-context (0.7.3):
     - React
   - React-RCTActionSheet (0.61.5):
@@ -219,6 +221,8 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
+  - RNCAsyncStorage (1.8.1):
+    - React
   - RNCMaskedView (0.1.7):
     - React
   - RNGestureHandler (1.6.0):
@@ -250,6 +254,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-appearance (from `../node_modules/react-native-appearance`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -262,6 +267,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -303,6 +309,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-appearance:
+    :path: "../node_modules/react-native-appearance"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
@@ -325,6 +333,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-community/async-storage"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
@@ -356,6 +366,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
+  react-native-appearance: ff12122b6456efc29b3a22a3731eb54f7c291e69
   react-native-safe-area-context: 8260e5157617df4b72865f44006797f895b2ada7
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
@@ -367,6 +378,7 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
+  RNCAsyncStorage: 00bdf63f7f1e0f11d3323533dba4f222e58bf092
   RNCMaskedView: 90dd32f5b786bd562e876e1421ea77c700cbf71e
   RNGestureHandler: dde546180bf24af0b5f737c8ad04b6f3fa51609a
   RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f

package.json

@@ -11,18 +11,22 @@
   },
   "dependencies": {
     "@eva-design/eva": "^1.4.0",
+    "@react-native-community/async-storage": "^1.8.1",
     "@react-native-community/masked-view": "^0.1.7",
     "@react-navigation/bottom-tabs": "^5.1.1",
     "@react-navigation/native": "^5.0.9",
+    "@react-navigation/stack": "^5.2.1",
     "@ui-kitten/components": "^4.4.1",
     "react": "16.9.0",
     "react-native": "0.61.5",
+    "react-native-appearance": "^0.3.3",
     "react-native-gesture-handler": "^1.6.0",
     "react-native-modals": "^0.19.9",
     "react-native-reanimated": "^1.7.0",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.3.0",
     "react-native-svg": "^12.0.3",
+    "react-native-typography": "^1.4.1",
     "react-native-vector-icons": "^6.6.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5"