chore(example): add shared, reusable color values (#2922)

kkafar · web-flow · commit 7657af7bc626 · 2025-05-15T13:24:04.000+02:00
## 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
&amp; 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 &amp; 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
diff --git a/apps/Example.tsx b/apps/Example.tsx
@@ -5,11 +5,8 @@ import {
   I18nManager,
   Platform,
   useColorScheme,
-  View,
 } from 'react-native';
 import {
-  DarkTheme,
-  DefaultTheme,
   NavigationContainer,
   NavigationIndependentTree,
   useTheme,
@@ -38,6 +35,7 @@ import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import * as Tests from './src/tests';
+import { ScreensDarkTheme, ScreensLightTheme } from './src/shared/styling/adapter/react-navigation';
 
 function isPlatformReady(name: keyof typeof SCREENS) {
   if (Platform.isTV) {
@@ -153,29 +151,29 @@ const examples = screens.filter(name => SCREENS[name].type === 'example');
 const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
 const tests = isTestSectionEnabled()
   ? screens
-      .filter(name => SCREENS[name].type === 'test')
-      .sort((name1, name2) => {
-        const testNumber1 = Number(name1.substring(4));
-        const testNumber2 = Number(name2.substring(4));
+    .filter(name => SCREENS[name].type === 'test')
+    .sort((name1, name2) => {
+      const testNumber1 = Number(name1.substring(4));
+      const testNumber2 = Number(name2.substring(4));
 
-        if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
-          return 0;
-        } else if (Number.isNaN(testNumber1)) {
-          return 1;
-        } else if (Number.isNaN(testNumber2)) {
-          return -1;
-        } else {
-          return testNumber1 - testNumber2;
-        }
-      })
+      if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
+        return 0;
+      } else if (Number.isNaN(testNumber1)) {
+        return 1;
+      } else if (Number.isNaN(testNumber2)) {
+        return -1;
+      } else {
+        return testNumber1 - testNumber2;
+      }
+    })
   : [];
 
 type RootStackParamList = {
   Main: undefined;
   Tests: undefined;
 } & {
-  [P in keyof typeof SCREENS]: undefined;
-};
+    [P in keyof typeof SCREENS]: undefined;
+  };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -258,15 +256,14 @@ const ExampleApp = (): React.JSX.Element => {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <GestureDetectorProvider>
         <ThemeToggle.Provider value={{ toggleTheme }}>
-          <NavigationContainer theme={isDark ? DarkTheme : DefaultTheme}>
+          <NavigationContainer theme={isDark ? ScreensDarkTheme : ScreensLightTheme}>
             <Stack.Navigator
               screenOptions={{ statusBarStyle: isDark ? 'light' : 'dark' }}>
               <Stack.Screen
                 name="Main"
                 options={{
-                  title: `${
-                    Platform.isTV ? '📺' : '📱'
-                  } React Native Screens Examples`,
+                  title: `${Platform.isTV ? '📺' : '📱'
+                    } React Native Screens Examples`,
                 }}
                 component={MainScreen}
               />
diff --git a/apps/src/shared/Alert.tsx b/apps/src/shared/Alert.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { Text, StyleSheet, Dimensions, View, Pressable } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import useThemeColorPallette from './styling/adapter/react-navigation/useColorPallette';
 
 export const Alert = (): React.JSX.Element => {
   const navigation = useNavigation();
+  const { colors } = useThemeColorPallette();
+
   const backgrounds = [
-    'darkviolet',
-    'slateblue',
-    'mediumseagreen',
-    'orange',
-    'indianred',
+    colors.BlueLight80,
+    colors.YellowDark80,
+    colors.PurpleLight80,
+    colors.BlueDark80,
+    colors.YellowLight80,
   ];
   const bgColor = backgrounds[Math.floor(Math.random() * backgrounds.length)];
 
diff --git a/apps/src/shared/Dialog.tsx b/apps/src/shared/Dialog.tsx
@@ -8,6 +8,7 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import Colors from './styling/Colors';
 
 export const Dialog = (): React.JSX.Element => {
   const navigation = useNavigation();
@@ -35,7 +36,7 @@ const styles = StyleSheet.create({
   },
   wrapper: {
     width: Dimensions.get('screen').width - 40,
-    backgroundColor: 'white',
+    backgroundColor: Colors.background,
     shadowColor: 'black',
     shadowOffset: {
       width: 0,
@@ -57,7 +58,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   button: {
-    backgroundColor: 'dodgerblue',
+    backgroundColor: Colors.BlueLight80,
     height: 40,
     borderRadius: 8,
     justifyContent: 'center',
diff --git a/apps/src/shared/PressableWithFeedback.tsx b/apps/src/shared/PressableWithFeedback.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ForwardedRef } from 'react';
 import { GestureResponderEvent, Pressable, PressableProps, StyleSheet, View } from 'react-native';
+import Colors from './styling/Colors';
 
 export type PressableState = 'pressed-in' | 'pressed' | 'pressed-out'
 
@@ -59,13 +60,13 @@ const PressableWithFeedback = React.forwardRef((props: PressableProps, ref: Forw
 
 const styles = StyleSheet.create({
   pressablePressedIn: {
-    backgroundColor: 'lightsalmon',
+    backgroundColor: Colors.BlueLight100,
   },
   pressablePressed: {
-    backgroundColor: 'crimson',
+    backgroundColor: Colors.YellowLight100,
   },
   pressablePressedOut: {
-    backgroundColor: 'lightseagreen',
+    backgroundColor: Colors.PurpleLight100,
   },
 });
 
diff --git a/apps/src/shared/SettingsInput.tsx b/apps/src/shared/SettingsInput.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { ThemedText, ThemedView, ThemedTextInput } from '.';
+import Colors from './styling/Colors';
 
 type Props = {
   label: string;
@@ -40,7 +41,7 @@ const styles = StyleSheet.create({
     padding: 10,
     borderWidth: 1,
     borderRadius: 5,
-    borderColor: '#039be5',
+    borderColor: Colors.cardBorder,
   },
   label: {
     fontSize: 15,
diff --git a/apps/src/shared/SettingsMultiInput.tsx b/apps/src/shared/SettingsMultiInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, View, Pressable, StyleSheet, TextInput } from 'react-native';
+import Colors from './styling/Colors';
 
 type Props = {
   label: string;
@@ -36,6 +37,7 @@ export function SettingsMultiInput({
   );
 }
 
+
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -44,8 +46,8 @@ const styles = StyleSheet.create({
     padding: 10,
     borderWidth: 1,
     borderRadius: 5,
-    borderColor: '#039be5',
-    backgroundColor: 'white',
+    borderColor: Colors.cardBorder,
+    backgroundColor: Colors.background,
   },
   labelWrapper: {
     flexDirection: 'row',
@@ -59,7 +61,7 @@ const styles = StyleSheet.create({
     height: 40,
     flex: 1,
     borderWidth: 1,
-    borderColor: 'black',
+    borderColor: Colors.cardBorder,
   },
   inputLabel: {
     fontSize: 15,
diff --git a/apps/src/shared/SettingsPicker.tsx b/apps/src/shared/SettingsPicker.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { ThemedText, ThemedView } from '.';
+import Colors from './styling/Colors';
 
 type Props<T = string> = {
   testID?: string;
@@ -28,17 +29,17 @@ export function SettingsPicker<T extends string>({
           style={styles.label}>{`${label}: ${value}`}</ThemedText>
         {isOpen
           ? items.map(item => (
-              <TouchableOpacity key={item} onPress={() => onValueChange(item)}>
-                <ThemedText
-                  testID={`${label.split(' ').join('-')}-${item}`.toLowerCase()}
-                  style={[
-                    styles.item,
-                    item === value && { fontWeight: 'bold' },
-                  ]}>
-                  {item}
-                </ThemedText>
-              </TouchableOpacity>
-            ))
+            <TouchableOpacity key={item} onPress={() => onValueChange(item)}>
+              <ThemedText
+                testID={`${label.split(' ').join('-')}-${item}`.toLowerCase()}
+                style={[
+                  styles.item,
+                  item === value && { fontWeight: 'bold' },
+                ]}>
+                {item}
+              </ThemedText>
+            </TouchableOpacity>
+          ))
           : null}
       </ThemedView>
     </TouchableOpacity>
@@ -53,7 +54,7 @@ const styles = StyleSheet.create({
     padding: 10,
     borderWidth: 1,
     borderRadius: 5,
-    borderColor: '#039be5',
+    borderColor: Colors.cardBorder,
   },
   label: {
     fontSize: 15,
diff --git a/apps/src/shared/SettingsSwitch.tsx b/apps/src/shared/SettingsSwitch.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
 import { ThemedText, ThemedView } from '.';
+import Colors from './styling/Colors';
 
 type Props = {
   label: string;
@@ -34,7 +35,7 @@ const styles = StyleSheet.create({
     padding: 10,
     borderWidth: 1,
     borderRadius: 5,
-    borderColor: '#039be5',
+    borderColor: Colors.cardBorder,
   },
   label: {
     fontSize: 15,
diff --git a/apps/src/shared/Snack.tsx b/apps/src/shared/Snack.tsx
@@ -23,7 +23,7 @@ export const Snack = ({ route, navigation }: Props): React.JSX.Element => {
       navigation.goBack();
     }, DISAPPEAR_AFTER);
     return () => clearTimeout(timer);
-  }, []);
+  }, [navigation]);
 
   return (
     <Pressable style={styles.container} onPress={() => navigation.goBack()}>
diff --git a/apps/src/shared/Square.tsx b/apps/src/shared/Square.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import { View } from 'react-native';
+import { ColorValue, View } from 'react-native';
+import Colors from './styling/Colors';
 
 interface Props {
-  color?: string;
+  color?: ColorValue;
   size?: number;
   testID?: string;
 }
 
 export const Square = ({
   size = 100,
-  color = 'red',
+  color = Colors.primary,
   testID,
 }: Props): React.JSX.Element => (
   <View style={{ width: size, height: size, backgroundColor: color }} testID={testID} />
diff --git a/apps/src/shared/ThemedView.tsx b/apps/src/shared/ThemedView.tsx
@@ -1,11 +1,11 @@
-import { useTheme } from '@react-navigation/native';
 import React from 'react';
 import { View, ViewProps } from 'react-native';
+import useThemeColorPallette from './styling/adapter/react-navigation/useColorPallette';
 
 export const ThemedView = ({ children, style, ...props }: ViewProps) => {
-  const { colors } = useTheme();
+  const { colors } = useThemeColorPallette();
   return (
-    <View style={[{ backgroundColor: colors.card }, style]} {...props}>
+    <View style={[{ backgroundColor: colors.offBackground }, style]} {...props}>
       {children}
     </View>
   );
diff --git a/apps/src/shared/styling/Colors.ts b/apps/src/shared/styling/Colors.ts
diff --git a/apps/src/shared/styling/adapter/react-navigation/index.ts b/apps/src/shared/styling/adapter/react-navigation/index.ts
diff --git a/apps/src/shared/styling/adapter/react-navigation/useColorPallette.tsx b/apps/src/shared/styling/adapter/react-navigation/useColorPallette.tsx
