forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Memoize usePalette (#2201)
+38
-34
+38
-34
src/lib/hooks/usePalette.ts
+38
-34
src/lib/hooks/usePalette.ts
···
1
+
import {useMemo} from 'react'
1
2
import {TextStyle, ViewStyle} from 'react-native'
2
3
import {useTheme, PaletteColorName, PaletteColor} from '../ThemeContext'
3
4
···
15
16
icon: TextStyle
16
17
}
17
18
export function usePalette(color: PaletteColorName): UsePaletteValue {
18
-
const palette = useTheme().palette[color]
19
-
return {
20
-
colors: palette,
21
-
view: {
22
-
backgroundColor: palette.background,
23
-
},
24
-
viewLight: {
25
-
backgroundColor: palette.backgroundLight,
26
-
},
27
-
btn: {
28
-
backgroundColor: palette.backgroundLight,
29
-
},
30
-
border: {
31
-
borderColor: palette.border,
32
-
},
33
-
borderDark: {
34
-
borderColor: palette.borderDark,
35
-
},
36
-
text: {
37
-
color: palette.text,
38
-
},
39
-
textLight: {
40
-
color: palette.textLight,
41
-
},
42
-
textInverted: {
43
-
color: palette.textInverted,
44
-
},
45
-
link: {
46
-
color: palette.link,
47
-
},
48
-
icon: {
49
-
color: palette.icon,
50
-
},
51
-
}
19
+
const theme = useTheme()
20
+
return useMemo(() => {
21
+
const palette = theme.palette[color]
22
+
return {
23
+
colors: palette,
24
+
view: {
25
+
backgroundColor: palette.background,
26
+
},
27
+
viewLight: {
28
+
backgroundColor: palette.backgroundLight,
29
+
},
30
+
btn: {
31
+
backgroundColor: palette.backgroundLight,
32
+
},
33
+
border: {
34
+
borderColor: palette.border,
35
+
},
36
+
borderDark: {
37
+
borderColor: palette.borderDark,
38
+
},
39
+
text: {
40
+
color: palette.text,
41
+
},
42
+
textLight: {
43
+
color: palette.textLight,
44
+
},
45
+
textInverted: {
46
+
color: palette.textInverted,
47
+
},
48
+
link: {
49
+
color: palette.link,
50
+
},
51
+
icon: {
52
+
color: palette.icon,
53
+
},
54
+
}
55
+
}, [theme, color])
52
56
}