diff --git a/examples/cookbook/.eslintrc b/examples/cookbook/.eslintrc index 59f14136a..076062c68 100644 --- a/examples/cookbook/.eslintrc +++ b/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", + } } diff --git a/examples/cookbook/app.json b/examples/cookbook/app.json index 61b9c76a3..e2ce2af2d 100644 --- a/examples/cookbook/app.json +++ b/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"] } } diff --git a/examples/cookbook/app/_layout.tsx b/examples/cookbook/app/_layout.tsx index b98469289..9c5d8faa2 100644 --- a/examples/cookbook/app/_layout.tsx +++ b/examples/cookbook/app/_layout.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { Stack } from 'expo-router'; import theme from '../theme'; diff --git a/examples/cookbook/app/custom-render/WelcomeScreen.tsx b/examples/cookbook/app/custom-render/WelcomeScreen.tsx new file mode 100644 index 000000000..c38111d14 --- /dev/null +++ b/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 ( + + Hello {user ? user.name : 'Stranger'} + Theme: {theme} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); diff --git a/examples/cookbook/__tests__/app/custom-render/index.test.tsx b/examples/cookbook/app/custom-render/__tests__/index.test.tsx similarity index 93% rename from examples/cookbook/__tests__/app/custom-render/index.test.tsx rename to examples/cookbook/app/custom-render/__tests__/index.test.tsx index fab3bcde2..a976c0291 100644 --- a/examples/cookbook/__tests__/app/custom-render/index.test.tsx +++ b/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(, { theme: 'light' }); diff --git a/examples/cookbook/__tests__/app/custom-render/test-utils.tsx b/examples/cookbook/app/custom-render/__tests__/test-utils.tsx similarity index 100% rename from examples/cookbook/__tests__/app/custom-render/test-utils.tsx rename to examples/cookbook/app/custom-render/__tests__/test-utils.tsx diff --git a/examples/cookbook/app/custom-render/_layout.tsx b/examples/cookbook/app/custom-render/_layout.tsx deleted file mode 100644 index bb85cf4e7..000000000 --- a/examples/cookbook/app/custom-render/_layout.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Slot } from 'expo-router'; -import { UserProvider } from './providers/user-provider'; -import { ThemeProvider } from './providers/theme-provider'; - -export default function CustomRenderLayout() { - return ( - - - - - - ); -} diff --git a/examples/cookbook/app/custom-render/index.tsx b/examples/cookbook/app/custom-render/index.tsx index 3964fdac4..470405467 100644 --- a/examples/cookbook/app/custom-render/index.tsx +++ b/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 ( - - Hello {user ? user.name : 'Stranger'} - Theme: {theme} - + + + + + ); } diff --git a/examples/cookbook/app/index.tsx b/examples/cookbook/app/index.tsx index a799ef79c..025a57d29 100644 --- a/examples/cookbook/app/index.tsx +++ b/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}) => ( - router.push(item.path)}> + const renderItem = ({ item }: { item: Recipe }) => ( + router.push(item.path)}> {item.title} - ),[]); + ); return ( @@ -41,6 +24,7 @@ export default function Home() { Testing Library Cookbook App + 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/' }, diff --git a/examples/cookbook/app/jotai/index.tsx b/examples/cookbook/app/state-management/jotai/TaskList.tsx similarity index 79% rename from examples/cookbook/app/jotai/index.tsx rename to examples/cookbook/app/state-management/jotai/TaskList.tsx index b02c9f454..60cac8628 100644 --- a/examples/cookbook/app/jotai/index.tsx +++ b/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 ( - + {tasks.map((task) => ( {task.title} @@ -43,3 +43,11 @@ export default function TaskList() { ); } + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); diff --git a/examples/cookbook/__tests__/app/jotai/index.test.tsx b/examples/cookbook/app/state-management/jotai/__tests__/TaskList.test.tsx similarity index 91% rename from examples/cookbook/__tests__/app/jotai/index.test.tsx rename to examples/cookbook/app/state-management/jotai/__tests__/TaskList.test.tsx index 73b2edcd1..7c6b69d12 100644 --- a/examples/cookbook/__tests__/app/jotai/index.test.tsx +++ b/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(); diff --git a/examples/cookbook/__tests__/app/jotai/test-utils.tsx b/examples/cookbook/app/state-management/jotai/__tests__/test-utils.tsx similarity index 100% rename from examples/cookbook/__tests__/app/jotai/test-utils.tsx rename to examples/cookbook/app/state-management/jotai/__tests__/test-utils.tsx diff --git a/examples/cookbook/app/state-management/jotai/index.tsx b/examples/cookbook/app/state-management/jotai/index.tsx new file mode 100644 index 000000000..03920d63f --- /dev/null +++ b/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 ; +} diff --git a/examples/cookbook/app/jotai/state.ts b/examples/cookbook/app/state-management/jotai/state.ts similarity index 100% rename from examples/cookbook/app/jotai/state.ts rename to examples/cookbook/app/state-management/jotai/state.ts diff --git a/examples/cookbook/app/jotai/types.ts b/examples/cookbook/app/state-management/jotai/types.ts similarity index 100% rename from examples/cookbook/app/jotai/types.ts rename to examples/cookbook/app/state-management/jotai/types.ts diff --git a/examples/cookbook/assets/fonts/OpenSans-Bold.ttf b/examples/cookbook/assets/fonts/OpenSans-Bold.ttf deleted file mode 100644 index 98c74e0a4..000000000 Binary files a/examples/cookbook/assets/fonts/OpenSans-Bold.ttf and /dev/null differ diff --git a/examples/cookbook/assets/fonts/OpenSans-Regular.ttf b/examples/cookbook/assets/fonts/OpenSans-Regular.ttf deleted file mode 100644 index 67803bb64..000000000 Binary files a/examples/cookbook/assets/fonts/OpenSans-Regular.ttf and /dev/null differ diff --git a/examples/cookbook/package.json b/examples/cookbook/package.json index abda27807..14502e7af 100644 --- a/examples/cookbook/package.json +++ b/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", diff --git a/examples/cookbook/yarn.lock b/examples/cookbook/yarn.lock index d4cf497f8..b2d45010c 100644 --- a/examples/cookbook/yarn.lock +++ b/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"