From 9de26789222134324cad2e7eae781c1623a9b61a Mon Sep 17 00:00:00 2001 From: Jakob Stornig Date: Sat, 30 Dec 2023 14:35:05 +0100 Subject: [PATCH] useTheme applied globally --- app/(tabs)/_layout.tsx | 18 +++++++----------- app/(tabs)/home/_layout.tsx | 1 - app/(tabs)/home/index.tsx | 1 - app/(tabs)/home/userSettings.tsx | 10 ++-------- app/login.tsx | 9 +++++---- components/common/CustomCard.tsx | 4 ++-- components/common/SearchBar.tsx | 7 ++++--- components/common/plus.tsx | 7 ++++--- components/home/Welcome/Welcome.tsx | 2 -- components/home/expenseItem/expenseItem.tsx | 1 - components/home/userSettings/Setting.tsx | 4 +--- hooks/useThemeColor.ts | 6 ++++++ 12 files changed, 31 insertions(+), 39 deletions(-) diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 616b2d3..6dc7691 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -4,29 +4,25 @@ import { StyleSheet } from "react-native"; import { FontAwesome } from "@expo/vector-icons"; import { Redirect } from "expo-router"; import React, { useEffect } from "react"; -import { useThemeColor } from "../../hooks/useThemeColor"; +import { useTheme } from "../contexts/ThemeContext"; import { useAuth } from "../contexts/AuthContext"; export default function Layout() { - // const selectedColor: string = useThemeColor( "tabIconSelected"); - // const defaultColor: string = useThemeColor("tabIconDefault"); - // const backgroundColor: string = useThemeColor("backgroundColor"); - // const tabBarColor: string = useThemeColor("tabBarColor"); const {authState} = useAuth() - + const {colors} = useTheme() const styles = StyleSheet.create({ sceneContainer: { - backgroundColor: useThemeColor("containerColor"), + backgroundColor: colors.containerColor, }, tabBar: { - backgroundColor: useThemeColor("backgroundColor"), - borderTopColor: useThemeColor("backgroundColor"), + backgroundColor: colors.backgroundColor, + borderTopColor: colors.backgroundColor } }); const screenOptions = { - tabBarActiveTintColor: useThemeColor( "tabIconSelected"), - tabBarInactiveTintColor: useThemeColor("tabIconDefault"), + tabBarActiveTintColor: colors.tabIconSelected, + tabBarInactiveTintColor: colors.tabIconDefault, headerShown: false, tabBarStyle: styles.tabBar, } diff --git a/app/(tabs)/home/_layout.tsx b/app/(tabs)/home/_layout.tsx index 69dc04d..f6c2a2b 100644 --- a/app/(tabs)/home/_layout.tsx +++ b/app/(tabs)/home/_layout.tsx @@ -2,7 +2,6 @@ import { Stack } from "expo-router"; import { View, Text } from 'react-native' import React from 'react' -import { useThemeColor } from "../../../hooks/useThemeColor"; import { useTheme } from "../../contexts/ThemeContext"; diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx index 033f573..4a510a1 100644 --- a/app/(tabs)/home/index.tsx +++ b/app/(tabs)/home/index.tsx @@ -5,7 +5,6 @@ import { FlatList } from 'react-native-gesture-handler'; import { SafeAreaView } from 'react-native-safe-area-context'; import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components'; import useFetch from '../../../hooks/useFetch'; -import { useThemeColor } from "../../../hooks/useThemeColor"; import { addExpense } from "../../../services/database"; import { useAuth } from '../../contexts/AuthContext'; import { useRouter } from "expo-router"; diff --git a/app/(tabs)/home/userSettings.tsx b/app/(tabs)/home/userSettings.tsx index 770892b..c865110 100644 --- a/app/(tabs)/home/userSettings.tsx +++ b/app/(tabs)/home/userSettings.tsx @@ -1,6 +1,5 @@ import { View, Text, StyleSheet, Image, Appearance } from 'react-native' import React, { useState } from 'react' -import { useThemeColor } from '../../../hooks/useThemeColor' import { SIZES } from '../../../constants/theme' import { SafeAreaView } from 'react-native-safe-area-context' import { ButtonSetting, ToggleSetting } from '../../../components' @@ -9,18 +8,13 @@ import { deleteExpenses, DEV_populateDatabase } from '../../../services/database import { useAuth } from '../../contexts/AuthContext' import { TouchableOpacity } from 'react-native-gesture-handler' -const generateStyles = (): void => { - styles.text = { - color: useThemeColor('primaryText') - } -} export default function userSettings() { const {onLogout} = useAuth(); const {theme, colors, isSystemTheme, applyTheme, applySystemTheme} = useTheme(); - const backgroundColor = useThemeColor("backgroundColor"); - styles.text = {...styles.text, color: useThemeColor("primaryText")} + const backgroundColor = colors.backgroundColor + styles.text = {...styles.text, color: colors.primaryText} const [systemTheme, setSystemTheme] = useState(isSystemTheme!) const [darkMode, setDarkMode] = useState(theme === "dark" ? true : false) diff --git a/app/login.tsx b/app/login.tsx index 35a67e7..0712046 100644 --- a/app/login.tsx +++ b/app/login.tsx @@ -3,16 +3,17 @@ import { Redirect } from 'expo-router'; import React, { useState } from 'react'; import { Button, SafeAreaView } from 'react-native'; import { Input } from '../components'; -import { useThemeColor } from '../hooks/useThemeColor'; +import { useTheme } from "./contexts/ThemeContext"; import { useAuth } from './contexts/AuthContext'; export default function login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState("") const {authState, onLogin} = useAuth() - const backgroundColor = useThemeColor("backgroundColor") - const textColor = useThemeColor("primaryText"); - const elementDefaultColor = useThemeColor("elementDefaultColor") + const {colors} = useTheme() + const backgroundColor = colors.backgroundColor; + const textColor = colors.primaryText + const elementDefaultColor = colors.elementDefaultColor // const {authState, onLogin} = useAuth(); diff --git a/components/common/CustomCard.tsx b/components/common/CustomCard.tsx index dccc478..d81020e 100644 --- a/components/common/CustomCard.tsx +++ b/components/common/CustomCard.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Platform, StyleSheet, View } from 'react-native' import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes' -import { useThemeColor } from '../../hooks/useThemeColor' +import { useTheme } from '../../app/contexts/ThemeContext' function generateBoxShadowStyle( xOffset: number, @@ -18,7 +18,7 @@ function generateBoxShadowStyle( shadowOffset : {width: xOffset, height: yOffset}, shadowOpacity, shadowRadius, - backgroundColor: useThemeColor("backgroundColor") + backgroundColor: useTheme().colors.backgroundColor } }else if (Platform.OS === 'android'){ styles.boxShadow = { diff --git a/components/common/SearchBar.tsx b/components/common/SearchBar.tsx index 7b7e01f..372d052 100644 --- a/components/common/SearchBar.tsx +++ b/components/common/SearchBar.tsx @@ -2,15 +2,16 @@ import { AntDesign } from '@expo/vector-icons'; import React from 'react'; import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native'; import { SIZES } from '../../constants/theme'; -import { useThemeColor } from '../../hooks/useThemeColor'; +import { useTheme } from '../../app/contexts/ThemeContext'; type SearchBarProps = {placeholder: string} & ViewProps export default function SearchBar(props: SearchBarProps) { const [isActive, setIsactive] = React.useState(false); + const { colors } = useTheme(); - const textColor = useThemeColor("interactiveText") - const backgroundColor = useThemeColor("elementDefaultColor"); + const textColor = colors + const backgroundColor = colors.elementDefaultColor; const handleChange = (text:string) : void => { if(text !== ""){ diff --git a/components/common/plus.tsx b/components/common/plus.tsx index 374dad8..b10c0a4 100644 --- a/components/common/plus.tsx +++ b/components/common/plus.tsx @@ -1,13 +1,14 @@ import { AntDesign } from '@expo/vector-icons' import React from 'react' import { StyleSheet, TouchableOpacity, ViewProps } from 'react-native' -import { useThemeColor } from '../../hooks/useThemeColor' +import { useTheme } from '../../app/contexts/ThemeContext' type PlusProps = ViewProps & {onPress? : ()=> void | undefined} const Plus = (props : PlusProps) => { - const accentColor = useThemeColor("accentColor"); - const primaryText = useThemeColor("primaryText"); + const {colors} = useTheme() + const accentColor = colors.accentColor; + const primaryText = colors.primaryText; const style = StyleSheet.create({ plus:{ diff --git a/components/home/Welcome/Welcome.tsx b/components/home/Welcome/Welcome.tsx index 41a52fa..4c766b1 100644 --- a/components/home/Welcome/Welcome.tsx +++ b/components/home/Welcome/Welcome.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Image, Text, View, ViewProps } from 'react-native' import { TouchableOpacity } from 'react-native-gesture-handler' import { MARGINS, SIZES } from '../../../constants/theme' -import { useThemeColor } from '../../../hooks/useThemeColor' import { useTheme } from '../../../app/contexts/ThemeContext' type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined} @@ -36,7 +35,6 @@ export default function Welcome(props: WelcomeProps) { const onpress = props.onPress const textcolor = colors.primaryText - //const backgroundColor: string = useThemeColor("backgroundColor") return (