diff options
author | polwex <polwex@sortug.com> | 2025-07-15 17:20:58 +0700 |
---|---|---|
committer | polwex <polwex@sortug.com> | 2025-07-15 17:20:58 +0700 |
commit | a528bd94a6e8e25010ae26a305550b211df0ddc6 (patch) | |
tree | 887425ddc3160ae023292dfefc49d77c2eb8dcec /hooks |
Initial commit
Generated by create-expo 3.4.3.
Diffstat (limited to 'hooks')
-rw-r--r-- | hooks/useColorScheme.ts | 1 | ||||
-rw-r--r-- | hooks/useColorScheme.web.ts | 21 | ||||
-rw-r--r-- | hooks/useThemeColor.ts | 21 |
3 files changed, 43 insertions, 0 deletions
diff --git a/hooks/useColorScheme.ts b/hooks/useColorScheme.ts new file mode 100644 index 0000000..17e3c63 --- /dev/null +++ b/hooks/useColorScheme.ts @@ -0,0 +1 @@ +export { useColorScheme } from 'react-native'; diff --git a/hooks/useColorScheme.web.ts b/hooks/useColorScheme.web.ts new file mode 100644 index 0000000..7eb1c1b --- /dev/null +++ b/hooks/useColorScheme.web.ts @@ -0,0 +1,21 @@ +import { useEffect, useState } from 'react'; +import { useColorScheme as useRNColorScheme } from 'react-native'; + +/** + * To support static rendering, this value needs to be re-calculated on the client side for web + */ +export function useColorScheme() { + const [hasHydrated, setHasHydrated] = useState(false); + + useEffect(() => { + setHasHydrated(true); + }, []); + + const colorScheme = useRNColorScheme(); + + if (hasHydrated) { + return colorScheme; + } + + return 'light'; +} diff --git a/hooks/useThemeColor.ts b/hooks/useThemeColor.ts new file mode 100644 index 0000000..0608e73 --- /dev/null +++ b/hooks/useThemeColor.ts @@ -0,0 +1,21 @@ +/** + * Learn more about light and dark modes: + * https://docs.expo.dev/guides/color-schemes/ + */ + +import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +export function useThemeColor( + props: { light?: string; dark?: string }, + colorName: keyof typeof Colors.light & keyof typeof Colors.dark +) { + const theme = useColorScheme() ?? 'light'; + const colorFromProps = props[theme]; + + if (colorFromProps) { + return colorFromProps; + } else { + return Colors[theme][colorName]; + } +} |