themes, context

.eslintrc.json

@@ -25,6 +25,7 @@
       }
     ],
     "no-use-before-define": "off",
+    "react/jsx-props-no-spreading": 0,
     "@typescript-eslint/no-use-before-define": ["error"],
     "import/extensions": ["error", "never"],
     "react/prop-types": 0,

.expo-shared/assets.json

@@ -1,7 +1,6 @@
 {
   "ec72f44c26176596b3f8f4ff2733f1c6a0f87fe6224a117439a1caea409505fd": true,
   "24272cdaeff82cc5facdaccd982a6f05b60c4504704bbf94c19a6388659880bb": true,
-  "5193b4ad8735090dcbfaf0e070e7354ee4bc3b7951faf1edbe2757aa21757f96": true,
-  "4c27b7466a8169ab063b6150f65d7c75c2919ff2c1e5572f55d537c6ca04ff9e": true,
-  "5deb055be550b37ca358a297078e0b7f15f2a3f95c0c5cfb6db9c9e376cc7900": true
+  "5deb055be550b37ca358a297078e0b7f15f2a3f95c0c5cfb6db9c9e376cc7900": true,
+  "a6e8d411aca0ff090240d14acbd91ebb042e7c25efa95deea3e7decf80ea0cf2": true
 }

App.tsx

@@ -1,89 +1,46 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import AppLoading from "expo-app-loading";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+
+// eslint-disable-next-line camelcase
 import {
-  StyleSheet,
-  Button,
-  View,
-  SafeAreaView,
-  Text,
-  Alert,
-} from "react-native";
+  useFonts,
+  // eslint-disable-next-line camelcase
+  Inter_300Light,
+  // eslint-disable-next-line camelcase
+  Inter_600SemiBold,
+} from "@expo-google-fonts/inter";
+
+import Home from "./src/modules/Home";
+import Settings from "./src/modules/Settings";
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    marginHorizontal: 16,
-  },
-  title: {
-    textAlign: "center",
-    marginVertical: 8,
-  },
-  fixToText: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  separator: {
-    marginVertical: 8,
-    borderBottomColor: "#737373",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-});
+import DarkModeContext from "./src/contexts/DarkModeContext";
+import DarkTheme from "./src/themes/DarkTheme";
+import DefaultTheme from "./src/themes/DefaultTheme";
 
-const Separator = () => <View style={styles.separator} />;
+const Stack = createStackNavigator();
 
 export default function App(): JSX.Element {
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          The title and onPress handler are required. It is recommended to set
-          accessibilityLabel to help make your app usable by everyone. :)
-        </Text>
-        <Button
-          title="Press me"
-          onPress={() => Alert.alert("Simple Button pressed")}
-        />
-      </View>
-      <Separator />
-      <View>
-        <Text style={styles.title}>
-          Adjust the color in a way that looks standard on each platform. On
-          iOS, the color prop controls the color of the text. On Android, the
-          color adjusts the background color of the button.
-        </Text>
-        <Button
-          title="Press me"
-          color="#f194ff"
-          onPress={() => Alert.alert("Button with adjusted color pressed")}
-        />
-      </View>
-      <Separator />
-      <View>
-        <Text style={styles.title}>
-          All interaction for the component are disabled.
-        </Text>
-        <Button
-          title="Press me"
-          disabled
-          onPress={() => Alert.alert("Cannot press this one")}
-        />
-      </View>
-      <Separator />
-      <View>
-        <Text style={styles.title}>
-          This layout strategy lets the title define the width of the button.
-        </Text>
-        <View style={styles.fixToText}>
-          <Button
-            title="Left button"
-            onPress={() => Alert.alert("Left button pressed")}
-          />
-          <Button
-            title="Right button"
-            onPress={() => Alert.alert("Right button pressed")}
-          />
-        </View>
-      </View>
-    </SafeAreaView>
+  const [fontsLoaded] = useFonts({ Inter_300Light, Inter_600SemiBold });
+  const [dark, setDark] = useState(true);
+  const [theme, setTheme] = useState(DarkTheme);
+
+  useEffect(() => {
+    const newTheme = dark ? DarkTheme : DefaultTheme;
+    setTheme(newTheme);
+  }, [dark]);
+
+  return !fontsLoaded ? (
+    <AppLoading />
+  ) : (
+    <NavigationContainer theme={theme}>
+      <DarkModeContext.Provider value={{ dark, setDark }}>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen name="Settings" component={Settings} />
+        </Stack.Navigator>
+      </DarkModeContext.Provider>
+    </NavigationContainer>
   );
 }

app.json

@@ -5,10 +5,10 @@
     "slug": "cao-calculator",
     "version": "1.0.0",
     "orientation": "portrait",
-    "backgroundColor": "#164E63",
-    "primaryColor": "#0E7490",
+    "backgroundColor": "#181A20",
+    "primaryColor": "#25A55F",
     "androidStatusBar": {
-      "backgroundColor": "#164E63"
+      "backgroundColor": "#181A20"
     },
     "androidNavigationBar": {
       "barStyle": "light-content"
@@ -17,15 +17,15 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#164E63"
+      "backgroundColor": "#181A20"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#164E63"
+        "backgroundColor": "#181A20"
       }
     },
     "assetBundlePatterns": [

package.json

@@ -10,16 +10,27 @@
     "lint:fix": "eslint **/**/*.{ts,tsx} --fix"
   },
   "dependencies": {
+    "@expo-google-fonts/inter": "^0.1.0",
+    "@react-native-async-storage/async-storage": "^1.13.2",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/native": "^5.9.2",
+    "@react-navigation/stack": "^5.14.2",
     "expo": "~40.0.0",
-    "expo-status-bar": "~1.0.3",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "^0.63.4"
+    "expo-app-loading": "^1.0.1",
+    "expo-font": "~8.4.0",
+    "expo-web-browser": "^8.6.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.8.0",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-safe-area-context": "3.1.9",
+    "react-native-screens": "~2.15.0"
   },
   "devDependencies": {
-    "@types/react": "~17.0.0",
-    "@types/react-dom": "~17.0.0",
-    "@types/react-native": "~0.63.42",
+    "@types/react": "~16.9.35",
+    "@types/react-dom": "~16.9.8",
+    "@types/react-native": "~0.63.2",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",
     "eslint": "^7.16.0",
@@ -30,8 +41,10 @@
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "expo-network": "^2.4.0",
+    "expo-optimize": "^0.1.70",
     "prettier": "^2.2.1",
-    "react-native-web": "~0.14.10",
-    "typescript": "~4.1.3"
+    "react-native-web": "~0.13.12",
+    "typescript": "~4.0.0"
   }
 }

src/contexts/DarkModeContext.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const DarkModeContext = React.createContext<{
+  dark: boolean;
+  setDark: React.Dispatch<React.SetStateAction<boolean>>;
+}>({
+  dark: true,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setDark: () => {},
+});
+
+export default DarkModeContext;

src/modules/Home.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from "react";
+import { View, SafeAreaView, Text, Button, StyleSheet } from "react-native";
+import { useTheme } from "@react-navigation/native";
+import DarkModeContext from "../contexts/DarkModeContext";
+
+export default function Home(): JSX.Element {
+  const { dark, setDark } = useContext(DarkModeContext);
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    text: {
+      color: colors.text,
+    },
+  });
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View>
+        <Text style={styles.text}>Bruh :) {String(dark)}</Text>
+        <Button title={String(dark)} onPress={() => setDark((prev) => !prev)} />
+      </View>
+    </SafeAreaView>
+  );
+}

src/modules/Settings.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { View, SafeAreaView, Text } from "react-native";
+
+export default function Settings(): JSX.Element {
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View>
+        <Text>Settings</Text>
+      </View>
+    </SafeAreaView>
+  );
+}