Skip to content

Commit 7657af7

Browse files
authored
chore(example): add shared, reusable color values (#2922)
## Description Adding shared, reusable color values here. I get a bit frustrated when I have to comeup with colors each time I made an example & for some reason `ColorValue` does not have typing for color-literals. I've stolen the values from reanimated docs (they use swm color palette), thought it might look nicely & consistent. I would recommend using these in any future examples. ## Changes :point_up: ## Test code and steps to reproduce N/A ## Checklist - [ ] Ensured that CI passes
1 parent 997d44c commit 7657af7

14 files changed

Lines changed: 233 additions & 57 deletions

apps/Example.tsx

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,8 @@ import {
55
I18nManager,
66
Platform,
77
useColorScheme,
8-
View,
98
} from 'react-native';
109
import {
11-
DarkTheme,
12-
DefaultTheme,
1310
NavigationContainer,
1411
NavigationIndependentTree,
1512
useTheme,
@@ -38,6 +35,7 @@ import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
3835
import { GestureHandlerRootView } from 'react-native-gesture-handler';
3936

4037
import * as Tests from './src/tests';
38+
import { ScreensDarkTheme, ScreensLightTheme } from './src/shared/styling/adapter/react-navigation';
4139

4240
function isPlatformReady(name: keyof typeof SCREENS) {
4341
if (Platform.isTV) {
@@ -153,29 +151,29 @@ const examples = screens.filter(name => SCREENS[name].type === 'example');
153151
const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
154152
const tests = isTestSectionEnabled()
155153
? screens
156-
.filter(name => SCREENS[name].type === 'test')
157-
.sort((name1, name2) => {
158-
const testNumber1 = Number(name1.substring(4));
159-
const testNumber2 = Number(name2.substring(4));
154+
.filter(name => SCREENS[name].type === 'test')
155+
.sort((name1, name2) => {
156+
const testNumber1 = Number(name1.substring(4));
157+
const testNumber2 = Number(name2.substring(4));
160158

161-
if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
162-
return 0;
163-
} else if (Number.isNaN(testNumber1)) {
164-
return 1;
165-
} else if (Number.isNaN(testNumber2)) {
166-
return -1;
167-
} else {
168-
return testNumber1 - testNumber2;
169-
}
170-
})
159+
if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
160+
return 0;
161+
} else if (Number.isNaN(testNumber1)) {
162+
return 1;
163+
} else if (Number.isNaN(testNumber2)) {
164+
return -1;
165+
} else {
166+
return testNumber1 - testNumber2;
167+
}
168+
})
171169
: [];
172170

173171
type RootStackParamList = {
174172
Main: undefined;
175173
Tests: undefined;
176174
} & {
177-
[P in keyof typeof SCREENS]: undefined;
178-
};
175+
[P in keyof typeof SCREENS]: undefined;
176+
};
179177

180178
const Stack = createNativeStackNavigator<RootStackParamList>();
181179

@@ -258,15 +256,14 @@ const ExampleApp = (): React.JSX.Element => {
258256
<GestureHandlerRootView style={{ flex: 1 }}>
259257
<GestureDetectorProvider>
260258
<ThemeToggle.Provider value={{ toggleTheme }}>
261-
<NavigationContainer theme={isDark ? DarkTheme : DefaultTheme}>
259+
<NavigationContainer theme={isDark ? ScreensDarkTheme : ScreensLightTheme}>
262260
<Stack.Navigator
263261
screenOptions={{ statusBarStyle: isDark ? 'light' : 'dark' }}>
264262
<Stack.Screen
265263
name="Main"
266264
options={{
267-
title: `${
268-
Platform.isTV ? '📺' : '📱'
269-
} React Native Screens Examples`,
265+
title: `${Platform.isTV ? '📺' : '📱'
266+
} React Native Screens Examples`,
270267
}}
271268
component={MainScreen}
272269
/>

apps/src/shared/Alert.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import React from 'react';
22
import { Text, StyleSheet, Dimensions, View, Pressable } from 'react-native';
33
import { useNavigation } from '@react-navigation/native';
4+
import useThemeColorPallette from './styling/adapter/react-navigation/useColorPallette';
45

56
export const Alert = (): React.JSX.Element => {
67
const navigation = useNavigation();
8+
const { colors } = useThemeColorPallette();
9+
710
const backgrounds = [
8-
'darkviolet',
9-
'slateblue',
10-
'mediumseagreen',
11-
'orange',
12-
'indianred',
11+
colors.BlueLight80,
12+
colors.YellowDark80,
13+
colors.PurpleLight80,
14+
colors.BlueDark80,
15+
colors.YellowLight80,
1316
];
1417
const bgColor = backgrounds[Math.floor(Math.random() * backgrounds.length)];
1518

apps/src/shared/Dialog.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
SafeAreaView,
99
} from 'react-native';
1010
import { useNavigation } from '@react-navigation/native';
11+
import Colors from './styling/Colors';
1112

1213
export const Dialog = (): React.JSX.Element => {
1314
const navigation = useNavigation();
@@ -35,7 +36,7 @@ const styles = StyleSheet.create({
3536
},
3637
wrapper: {
3738
width: Dimensions.get('screen').width - 40,
38-
backgroundColor: 'white',
39+
backgroundColor: Colors.background,
3940
shadowColor: 'black',
4041
shadowOffset: {
4142
width: 0,
@@ -57,7 +58,7 @@ const styles = StyleSheet.create({
5758
textAlign: 'center',
5859
},
5960
button: {
60-
backgroundColor: 'dodgerblue',
61+
backgroundColor: Colors.BlueLight80,
6162
height: 40,
6263
borderRadius: 8,
6364
justifyContent: 'center',

apps/src/shared/PressableWithFeedback.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { ForwardedRef } from 'react';
33
import { GestureResponderEvent, Pressable, PressableProps, StyleSheet, View } from 'react-native';
4+
import Colors from './styling/Colors';
45

56
export type PressableState = 'pressed-in' | 'pressed' | 'pressed-out'
67

@@ -59,13 +60,13 @@ const PressableWithFeedback = React.forwardRef((props: PressableProps, ref: Forw
5960

6061
const styles = StyleSheet.create({
6162
pressablePressedIn: {
62-
backgroundColor: 'lightsalmon',
63+
backgroundColor: Colors.BlueLight100,
6364
},
6465
pressablePressed: {
65-
backgroundColor: 'crimson',
66+
backgroundColor: Colors.YellowLight100,
6667
},
6768
pressablePressedOut: {
68-
backgroundColor: 'lightseagreen',
69+
backgroundColor: Colors.PurpleLight100,
6970
},
7071
});
7172

apps/src/shared/SettingsInput.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
22
import { TouchableOpacity, StyleSheet } from 'react-native';
33
import { ThemedText, ThemedView, ThemedTextInput } from '.';
4+
import Colors from './styling/Colors';
45

56
type Props = {
67
label: string;
@@ -40,7 +41,7 @@ const styles = StyleSheet.create({
4041
padding: 10,
4142
borderWidth: 1,
4243
borderRadius: 5,
43-
borderColor: '#039be5',
44+
borderColor: Colors.cardBorder,
4445
},
4546
label: {
4647
fontSize: 15,

apps/src/shared/SettingsMultiInput.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Text, View, Pressable, StyleSheet, TextInput } from 'react-native';
3+
import Colors from './styling/Colors';
34

45
type Props = {
56
label: string;
@@ -36,6 +37,7 @@ export function SettingsMultiInput({
3637
);
3738
}
3839

40+
3941
const styles = StyleSheet.create({
4042
container: {
4143
alignItems: 'center',
@@ -44,8 +46,8 @@ const styles = StyleSheet.create({
4446
padding: 10,
4547
borderWidth: 1,
4648
borderRadius: 5,
47-
borderColor: '#039be5',
48-
backgroundColor: 'white',
49+
borderColor: Colors.cardBorder,
50+
backgroundColor: Colors.background,
4951
},
5052
labelWrapper: {
5153
flexDirection: 'row',
@@ -59,7 +61,7 @@ const styles = StyleSheet.create({
5961
height: 40,
6062
flex: 1,
6163
borderWidth: 1,
62-
borderColor: 'black',
64+
borderColor: Colors.cardBorder,
6365
},
6466
inputLabel: {
6567
fontSize: 15,

apps/src/shared/SettingsPicker.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
22
import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
33
import { ThemedText, ThemedView } from '.';
4+
import Colors from './styling/Colors';
45

56
type Props<T = string> = {
67
testID?: string;
@@ -28,17 +29,17 @@ export function SettingsPicker<T extends string>({
2829
style={styles.label}>{`${label}: ${value}`}</ThemedText>
2930
{isOpen
3031
? items.map(item => (
31-
<TouchableOpacity key={item} onPress={() => onValueChange(item)}>
32-
<ThemedText
33-
testID={`${label.split(' ').join('-')}-${item}`.toLowerCase()}
34-
style={[
35-
styles.item,
36-
item === value && { fontWeight: 'bold' },
37-
]}>
38-
{item}
39-
</ThemedText>
40-
</TouchableOpacity>
41-
))
32+
<TouchableOpacity key={item} onPress={() => onValueChange(item)}>
33+
<ThemedText
34+
testID={`${label.split(' ').join('-')}-${item}`.toLowerCase()}
35+
style={[
36+
styles.item,
37+
item === value && { fontWeight: 'bold' },
38+
]}>
39+
{item}
40+
</ThemedText>
41+
</TouchableOpacity>
42+
))
4243
: null}
4344
</ThemedView>
4445
</TouchableOpacity>
@@ -53,7 +54,7 @@ const styles = StyleSheet.create({
5354
padding: 10,
5455
borderWidth: 1,
5556
borderRadius: 5,
56-
borderColor: '#039be5',
57+
borderColor: Colors.cardBorder,
5758
},
5859
label: {
5960
fontSize: 15,

apps/src/shared/SettingsSwitch.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
33
import { ThemedText, ThemedView } from '.';
4+
import Colors from './styling/Colors';
45

56
type Props = {
67
label: string;
@@ -34,7 +35,7 @@ const styles = StyleSheet.create({
3435
padding: 10,
3536
borderWidth: 1,
3637
borderRadius: 5,
37-
borderColor: '#039be5',
38+
borderColor: Colors.cardBorder,
3839
},
3940
label: {
4041
fontSize: 15,

apps/src/shared/Snack.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const Snack = ({ route, navigation }: Props): React.JSX.Element => {
2323
navigation.goBack();
2424
}, DISAPPEAR_AFTER);
2525
return () => clearTimeout(timer);
26-
}, []);
26+
}, [navigation]);
2727

2828
return (
2929
<Pressable style={styles.container} onPress={() => navigation.goBack()}>

apps/src/shared/Square.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
2-
import { View } from 'react-native';
2+
import { ColorValue, View } from 'react-native';
3+
import Colors from './styling/Colors';
34

45
interface Props {
5-
color?: string;
6+
color?: ColorValue;
67
size?: number;
78
testID?: string;
89
}
910

1011
export const Square = ({
1112
size = 100,
12-
color = 'red',
13+
color = Colors.primary,
1314
testID,
1415
}: Props): React.JSX.Element => (
1516
<View style={{ width: size, height: size, backgroundColor: color }} testID={testID} />

0 commit comments

Comments
 (0)