refactor: tweak cookbook

examples/cookbook/.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "@callstack"
+  "extends": "@callstack",
+  "rules": {
+    "react-native-a11y/has-valid-accessibility-ignores-invert-colors": "off",
+    "react-native/no-color-literals": "off",
+    "react-native-a11y/has-valid-accessibility-descriptors": "off",
+  }
 }

examples/cookbook/app.json

@@ -15,9 +15,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -30,17 +28,6 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-font",
-        {
-          "fonts": [
-            "./assets/fonts/OpenSans-Regular.ttf",
-            "./assets/fonts/OpenSans-Bold.ttf"
-          ]
-        }
-      ]
-    ]
+    "plugins": ["expo-router"]
   }
 }

examples/cookbook/app/_layout.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Stack } from 'expo-router';
 import theme from '../theme';
 

examples/cookbook/app/custom-render/WelcomeScreen.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useUser } from './providers/user-provider';
+import { useTheme } from './providers/theme-provider';
+
+export default function WelcomeScreen() {
+  const theme = useTheme();
+  const user = useUser();
+
+  return (
+    <View style={styles.container}>
+      <Text>Hello {user ? user.name : 'Stranger'}</Text>
+      <Text>Theme: {theme}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

examples/cookbook/__tests__/app/custom-render/index.test.tsx → examples/cookbook/app/custom-render/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { screen } from '@testing-library/react-native';
+import WelcomeScreen from '../WelcomeScreen';
 import { renderWithProviders } from './test-utils';
-import WelcomeScreen from "../../../app/custom-render";
 
 test('renders WelcomeScreen in light theme', () => {
   renderWithProviders(<WelcomeScreen />, { theme: 'light' });

examples/cookbook/app/custom-render/index.tsx

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
-import { useUser } from './providers/user-provider';
-import { useTheme } from './providers/theme-provider';
-
-export default function WelcomeScreen() {
-  const theme = useTheme();
-  const user = useUser();
+import { UserProvider } from './providers/user-provider';
+import { ThemeProvider } from './providers/theme-provider';
+import WelcomeScreen from './WelcomeScreen';
 
+export default function Example() {
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Hello {user ? user.name : 'Stranger'}</Text>
-      <Text>Theme: {theme}</Text>
-    </View>
+    <UserProvider.Provider value={null}>
+      <ThemeProvider.Provider value={'light'}>
+        <WelcomeScreen />
+      </ThemeProvider.Provider>
+    </UserProvider.Provider>
   );
 }

examples/cookbook/app/index.tsx

@@ -1,33 +1,16 @@
-import React, {useCallback, useEffect} from 'react';
+import React from 'react';
 import { FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useRouter } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useFonts } from 'expo-font';
 import theme from '../theme';
 
-void SplashScreen.preventAutoHideAsync();
-
 export default function Home() {
   const router = useRouter();
-  const [loaded, error] = useFonts({
-    'OpenSans-Bold': require('../assets/fonts/OpenSans-Bold.ttf'),
-    'OpenSans-Regular': require('../assets/fonts/OpenSans-Regular.ttf'),
-  });
-
-  useEffect(() => {
-    if (loaded || error) {
-      void SplashScreen.hideAsync();
-    }
-  }, [loaded, error]);
 
-  if (!loaded && !error) {
-    return null;
-  }
-  const renderItem = useCallback(({ item }: {item: Recipe}) => (
-    <Pressable style={styles.pressable} onPress={() => router.push(item.path)}>
+  const renderItem = ({ item }: { item: Recipe }) => (
+    <Pressable role="listitem" style={styles.pressable} onPress={() => router.push(item.path)}>
       <Text style={styles.pressableText}>{item.title}</Text>
     </Pressable>
-  ),[]);
+  );
 
   return (
     <View style={styles.container}>
@@ -41,6 +24,7 @@ export default function Home() {
         <Text style={styles.title}>Testing Library</Text>
         <Text style={styles.subTitle}>Cookbook App</Text>
       </View>
+
       <FlatList<Recipe>
         data={recipes}
         renderItem={renderItem}
@@ -64,12 +48,10 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 20,
-    fontFamily: 'OpenSans-Bold',
     color: theme.colors.black,
   },
   subTitle: {
     fontSize: 14,
-    fontFamily: 'OpenSans-Regular',
     color: theme.colors.gray,
   },
   banner: {
@@ -89,7 +71,6 @@ const styles = StyleSheet.create({
   pressableText: {
     color: '#fff',
     fontSize: 14,
-    fontFamily: 'OpenSans-Bold',
     textAlign: 'center',
   },
 });
@@ -99,6 +80,7 @@ type Recipe = {
   title: string;
   path: string;
 };
+
 const recipes: Recipe[] = [
   { id: 2, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
   { id: 1, title: 'Task List with Jotai', path: 'jotai/' },

examples/cookbook/app/jotai/index.tsx → examples/cookbook/app/state-management/jotai/TaskList.tsx

@@ -1,11 +1,11 @@
 import 'react-native-get-random-values';
 import { nanoid } from 'nanoid';
 import * as React from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useAtom } from 'jotai';
 import { newTaskTitleAtom, tasksAtom } from './state';
 
-export default function TaskList() {
+export function TaskList() {
   const [tasks, setTasks] = useAtom(tasksAtom);
   const [newTaskTitle, setNewTaskTitle] = useAtom(newTaskTitleAtom);
 
@@ -21,7 +21,7 @@ export default function TaskList() {
   };
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <View style={styles.container}>
       {tasks.map((task) => (
         <Text key={task.id} testID="task-item">
           {task.title}
@@ -43,3 +43,11 @@ export default function TaskList() {
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

examples/cookbook/__tests__/app/jotai/index.test.tsx → examples/cookbook/app/state-management/jotai/__tests__/TaskList.test.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { render, screen, userEvent } from '@testing-library/react-native';
-import TaskList from '../../../app/jotai';
+import { TaskList } from '../TaskList';
+import { Task } from '../types';
+import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../state';
 import { renderWithAtoms } from './test-utils';
-import { Task } from '../../../app/jotai/types';
-import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../../../app/jotai/state';
 
 jest.useFakeTimers();
 

examples/cookbook/app/state-management/jotai/index.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TaskList } from './TaskList';
+
+export default function Example() {
+  return <TaskList />;
+}

examples/cookbook/package.json

@@ -13,9 +13,9 @@
   "dependencies": {
     "expo": "^50.0.4",
     "expo-constants": "~15.4.6",
-    "expo-font": "~11.10.3",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.10",
+    "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
     "jotai": "^2.8.4",
     "nanoid": "^3.3.7",

examples/cookbook/yarn.lock

@@ -10316,9 +10316,9 @@ __metadata:
     eslint: "npm:^8.57.0"
     expo: "npm:^50.0.4"
     expo-constants: "npm:~15.4.6"
-    expo-font: "npm:~11.10.3"
     expo-linking: "npm:~6.2.2"
     expo-router: "npm:~3.4.10"
+    expo-splash-screen: "npm:~0.26.5"
     expo-status-bar: "npm:~1.11.1"
     jest: "npm:^29.7.0"
     jotai: "npm:^2.8.4"