added paper, screens

App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import AppLoading from "expo-app-loading";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
+import { Provider as PaperProvider } from "react-native-paper";
 
 // eslint-disable-next-line camelcase
 import {
@@ -12,12 +13,14 @@ import {
   Inter_600SemiBold,
 } from "@expo-google-fonts/inter";
 
-import Home from "./src/modules/Home";
-import Settings from "./src/modules/Settings";
+import Home from "./src/screens/Home";
+import Settings from "./src/screens/Settings";
 
 import DarkModeContext from "./src/contexts/DarkModeContext";
+
 import DarkTheme from "./src/themes/DarkTheme";
 import DefaultTheme from "./src/themes/DefaultTheme";
+import About from "./src/screens/About";
 
 const Stack = createStackNavigator();
 
@@ -34,13 +37,20 @@ export default function App(): JSX.Element {
   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>
+    <DarkModeContext.Provider value={{ dark, setDark }}>
+      <NavigationContainer theme={theme}>
+        <PaperProvider theme={theme}>
+          <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen
+              name="Home"
+              component={Home}
+              options={{ headerTitle: "Overall score" }}
+            />
+            <Stack.Screen name="Settings" component={Settings} />
+            <Stack.Screen name="About" component={About} />
+          </Stack.Navigator>
+        </PaperProvider>
+      </NavigationContainer>
+    </DarkModeContext.Provider>
   );
 }

babel.config.js

@@ -1,6 +1,12 @@
-module.exports = function(api) {
+// eslint-disable-next-line func-names
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
+    env: {
+      production: {
+        plugins: ["react-native-paper/babel"],
+      },
+    },
   };
 };

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.1.0",
+    "@expo/vector-icons": "^12.0.3",
     "@react-native-async-storage/async-storage": "^1.13.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.9.2",
@@ -23,6 +24,7 @@
     "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-paper": "^4.7.1",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.0"

src/components/DarkModeSwitch.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from "react";
+import { Switch } from "react-native-paper";
+import DarkModeContext from "../contexts/DarkModeContext";
+
+const DarkModeSwitch = (): JSX.Element => {
+  const { dark, setDark } = useContext(DarkModeContext);
+
+  return (
+    <Switch
+      value={dark}
+      onValueChange={() => setDark((prev) => !prev)}
+      accessibilityComponentType=""
+      accessibilityTraits=""
+    />
+  );
+};
+
+export default DarkModeSwitch;

src/screens/About.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { View } from "react-native";
+import { Text } from "react-native-paper";
+
+export default function About(): JSX.Element {
+  return (
+    <View>
+      <Text accessibilityComponentType="" accessibilityTraits="">
+        Hello there
+      </Text>
+    </View>
+  );
+}

src/screens/Home.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { View } from "react-native";
+
+import { IconButton, Text } from "react-native-paper";
+import { HomeProps as Props } from "../utils/StackTypes";
+
+export default function Home({ navigation }: Props): JSX.Element {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <IconButton
+          icon="cog-outline"
+          onPress={() => navigation.navigate("Settings")}
+          accessibilityComponentType=""
+          accessibilityTraits=""
+        />
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text accessibilityComponentType="" accessibilityTraits="">
+        Hello
+      </Text>
+    </View>
+  );
+}

src/screens/Settings.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { Divider, IconButton, List } from "react-native-paper";
+import DarkModeSwitch from "../components/DarkModeSwitch";
+
+import { SettingsProps as Props } from "../utils/StackTypes";
+
+export default function Settings({ navigation }: Props): JSX.Element {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <IconButton
+          icon="information-outline"
+          onPress={() => navigation.navigate("About")}
+          accessibilityComponentType=""
+          accessibilityTraits=""
+        />
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <ScrollView
+      style={{
+        flex: 1,
+      }}
+    >
+      <List.Item
+        title="Dark mode"
+        accessibilityComponentType=""
+        accessibilityTraits=""
+        right={() => <DarkModeSwitch />}
+        left={() => <List.Icon icon="weather-night" />}
+      />
+      <Divider accessibilityComponentType="" accessibilityTraits="" />
+    </ScrollView>
+  );
+}

src/themes/DarkTheme.ts

@@ -1,11 +1,14 @@
 import { DarkTheme as _DarkTheme } from "@react-navigation/native";
+import { DarkTheme as _DarkThemePaper } from "react-native-paper";
 
 const DarkTheme = {
   ..._DarkTheme,
+  ..._DarkThemePaper,
   colors: {
     ..._DarkTheme.colors,
-    primary: "rgb(37, 165, 95)",
-    background: "rgb(24, 26, 32)",
+    ..._DarkThemePaper.colors,
+    primary: "#25A55F",
+    background: "#181A20",
   },
 };
 

src/themes/DefaultTheme.ts

@@ -1,9 +1,12 @@
 import { DefaultTheme as _DefaultTheme } from "@react-navigation/native";
+import { DefaultTheme as _DefaultThemePaper } from "react-native-paper";
 
 const DefaultTheme = {
   ..._DefaultTheme,
+  ..._DefaultThemePaper,
   colors: {
     ..._DefaultTheme.colors,
+    ..._DefaultThemePaper.colors,
     primary: "rgb(37, 165, 95)",
     background: "rgb(249, 249, 249)",
   },

src/utils/StackTypes.ts

@@ -0,0 +1,11 @@
+import { StackScreenProps } from "@react-navigation/stack";
+
+type RootStackParamList = {
+  Home: undefined;
+  Settings: undefined;
+  About: undefined;
+  Feed: { sort: "latest" | "top" } | undefined;
+};
+
+export type HomeProps = StackScreenProps<RootStackParamList, "Home">;
+export type SettingsProps = StackScreenProps<RootStackParamList, "Settings">;