From 83de3682d3b001bdf01327de1a4158e4edb2e85a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Sim=C3=B3n?= Date: Wed, 23 Aug 2023 13:53:57 -0500 Subject: [PATCH 1/5] add dark mode logic and styles --- .prettierrc.js | 2 + App.tsx | 10 +++- src/@types/global.d.ts | 5 ++ src/common/Button/styles.ts | 2 +- src/constants/{styles.js => colors.ts} | 0 src/features/auth/welcome/screen/index.tsx | 4 +- src/features/home/screen/index.tsx | 32 ++++++++-- src/features/home/screen/styles.ts | 39 +++++++++--- src/features/settings/screen/index.tsx | 69 +++++++++++++++------- src/features/settings/screen/styles.ts | 66 ++++++++++++++++++--- src/localization/hooks.ts | 3 +- src/localization/index.ts | 1 + src/localization/resources/ar.json | 4 +- src/localization/resources/en.json | 4 +- src/localization/resources/es.json | 4 +- src/navigation/stacks/main/index.tsx | 2 +- src/storage/hooks.ts | 1 + src/storage/index.ts | 1 + src/storage/stores.ts | 4 +- src/themes/dark.ts | 15 +++++ src/themes/hooks.ts | 49 +++++++++++++++ src/themes/light.ts | 18 ++++++ src/themes/types.ts | 3 + 23 files changed, 283 insertions(+), 55 deletions(-) create mode 100644 src/@types/global.d.ts rename src/constants/{styles.js => colors.ts} (100%) create mode 100644 src/themes/dark.ts create mode 100644 src/themes/hooks.ts create mode 100644 src/themes/light.ts create mode 100644 src/themes/types.ts diff --git a/.prettierrc.js b/.prettierrc.js index a0d08460..778a65d3 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -17,7 +17,9 @@ module.exports = { '^navigation', '^navigation/(.*)$', '^network/(.*)$', + '^storage', '^storage/(.*)$', + '^themes/(.*)$', '^[./*]', ], importOrderSeparation: true, diff --git a/App.tsx b/App.tsx index 28d9d16e..09832216 100644 --- a/App.tsx +++ b/App.tsx @@ -1,17 +1,23 @@ import 'localization'; import React from 'react'; +import { StatusBar } from 'react-native'; -import { NavigationContainer } from '@react-navigation/native'; +import { NavigationContainer, useTheme } from '@react-navigation/native'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import NavigationStack from 'navigation'; +import { useThemeConfig } from 'themes/hooks'; + const client = new QueryClient(); const App = () => { + const { theme } = useThemeConfig(); + const { dark: isDarkMode } = useTheme(); return ( - + + diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts new file mode 100644 index 00000000..b045b4cd --- /dev/null +++ b/src/@types/global.d.ts @@ -0,0 +1,5 @@ +import type { CustomTheme } from 'themes/types'; + +declare module '@react-navigation/native' { + export function useTheme(): CustomTheme; +} diff --git a/src/common/Button/styles.ts b/src/common/Button/styles.ts index 8ac29100..c32438d0 100644 --- a/src/common/Button/styles.ts +++ b/src/common/Button/styles.ts @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; -import { BLUE, GREY_01, GREY_02, WHITE } from 'constants/styles'; +import { BLUE, GREY_01, GREY_02, WHITE } from 'constants/colors'; const styles = StyleSheet.create({ container: { diff --git a/src/constants/styles.js b/src/constants/colors.ts similarity index 100% rename from src/constants/styles.js rename to src/constants/colors.ts diff --git a/src/features/auth/welcome/screen/index.tsx b/src/features/auth/welcome/screen/index.tsx index 15160e83..0d6d2386 100644 --- a/src/features/auth/welcome/screen/index.tsx +++ b/src/features/auth/welcome/screen/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { SafeAreaView, StatusBar, useColorScheme } from 'react-native'; +import { SafeAreaView } from 'react-native'; import Button from 'common/Button'; @@ -15,13 +15,11 @@ type WelcomeScreenProps = { } & WelcomeNavigationProps; const WelcomeScreen = ({ navigation: { navigate } }: WelcomeScreenProps) => { - const isDarkMode = useColorScheme() === 'dark'; const onSignInPress = useCallback(() => navigate(AuthStackScreens.SignIn), [navigate]); const onSignUpPress = useCallback(() => navigate(AuthStackScreens.SignUp), [navigate]); return ( -