From add181acb052d0fad5161d7b8038f3c5408c78a9 Mon Sep 17 00:00:00 2001 From: RazerMoon <33849459+RazerMoon@users.noreply.github.com> Date: Sat, 6 Feb 2021 23:59:14 +0000 Subject: [PATCH] added paper, screens --- App.tsx | 30 ++-- babel.config.js | 10 +- package.json | 2 + src/components/DarkModeSwitch.tsx | 18 +++ src/modules/Home.tsx | 31 ----- src/modules/Settings.tsx | 19 --- src/screens/About.tsx | 13 ++ src/screens/Home.tsx | 35 +++++ src/screens/Settings.tsx | 38 ++++++ src/{modules => screens}/dev/Home.tsx | 0 src/themes/DarkTheme.ts | 7 +- src/themes/DefaultTheme.ts | 3 + src/utils/StackTypes.ts | 11 ++ yarn-error.log | 189 ++++++++++++++++++++++++-- yarn.lock | 33 ++++- 15 files changed, 365 insertions(+), 74 deletions(-) create mode 100644 src/components/DarkModeSwitch.tsx delete mode 100644 src/modules/Home.tsx delete mode 100644 src/modules/Settings.tsx create mode 100644 src/screens/About.tsx create mode 100644 src/screens/Home.tsx create mode 100644 src/screens/Settings.tsx rename src/{modules => screens}/dev/Home.tsx (100%) create mode 100644 src/utils/StackTypes.ts diff --git a/App.tsx b/App.tsx index d0e94dd..69b4738 100644 --- a/App.tsx +++ b/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 ? ( ) : ( - - - - - - - - + + + + + + + + + + + ); } diff --git a/babel.config.js b/babel.config.js index 2900afe..342a9fb 100644 --- a/babel.config.js +++ b/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"], + }, + }, }; }; diff --git a/package.json b/package.json index 8a8f7c1..3a561b1 100644 --- a/package.json +++ b/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" diff --git a/src/components/DarkModeSwitch.tsx b/src/components/DarkModeSwitch.tsx new file mode 100644 index 0000000..268f264 --- /dev/null +++ b/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 ( + setDark((prev) => !prev)} + accessibilityComponentType="" + accessibilityTraits="" + /> + ); +}; + +export default DarkModeSwitch; diff --git a/src/modules/Home.tsx b/src/modules/Home.tsx deleted file mode 100644 index 1d42f34..0000000 --- a/src/modules/Home.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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 ( - - - Bruh :) {String(dark)} -