chore: revamp the cookbook app (#1635)

* create a Jotai examples dir in cookbook with related utils, add state management recipes dir

* add docs with examples

* extract state from component to state, utils, simplify types and custom render func.

* refactor: tweaks & cleanup

* make cookbook app runnable

* update yarn.lock file

* fix TS issue and spelling

* remove duplicate files and adjust testMatch in config to ensure no utils test run

---------

Co-authored-by: stevegalili <steve.galili@mywheels.nl>

examples/cookbook/README.md

@@ -1,8 +1,10 @@
 # RNTL Cookbook
 
-This example app gathers recipes from the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
+This example app gathers recipes from
+the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
 
-Each recipe described in the Cookbook should have a corresponding code example in this repo.
+Each recipe described in the Cookbook should have a corresponding code example screen in this repo.
 
 Note:
-Since examples will showcase usage of different dependencies, the dependencies in `package.json` fill will grow much larger that in an normal React Native. This is fine 🐶☕️🔥.
+Since examples will showcase usage of different dependencies, the dependencies in `package.json`
+file will grow much larger that in a normal React Native. This is fine 🐶☕️🔥.

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react-native';
-import { User, UserProvider } from './providers/user-provider';
-import { Theme, ThemeProvider } from './providers/theme-provider';
+import { User, UserProvider } from '../../../app/custom-render/providers/user-provider';
+import { Theme, ThemeProvider } from '../../../app/custom-render/providers/theme-provider';
 
 interface RenderWithProvidersProps {
  user?: User | null;

examples/cookbook/jotai/TaskList.test.tsx → examples/cookbook/__tests__/app/jotai/index.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 { renderWithAtoms } from './test-utils';
-import { TaskList } from './TaskList';
-import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from './state';
-import { Task } from './types';
+import { Task } from '../../../app/jotai/types';
+import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../../../app/jotai/state';
 
 jest.useFakeTimers();
 

examples/cookbook/app.json

@@ -2,19 +2,22 @@
  "expo": {
  "name": "RNTL Cookbook App",
  "slug": "rntl-cookbook",
+ "scheme": "rntlcookbook",
  "version": "1.0.0",
  "orientation": "portrait",
  "icon": "./assets/icon.png",
  "userInterfaceStyle": "light",
  "splash": {
  "image": "./assets/splash.png",
- "resizeMode": "contain",
- "backgroundColor": "#ffffff"
+ "resizeMode": "cover",
+ "backgroundColor": "#FFFFFF"
  },
  "updates": {
  "fallbackToCacheTimeout": 0
  },
- "assetBundlePatterns": ["**/*"],
+ "assetBundlePatterns": [
+ "**/*"
+ ],
  "ios": {
  "supportsTablet": true
  },
@@ -26,6 +29,18 @@
  },
  "web": {
  "favicon": "./assets/favicon.png"
- }
+ },
+ "plugins": [
+ "expo-router",
+ [
+ "expo-font",
+ {
+ "fonts": [
+ "./assets/fonts/OpenSans-Regular.ttf",
+ "./assets/fonts/OpenSans-Bold.ttf"
+ ]
+ }
+ ]
+ ]
  }
 }

examples/cookbook/app/_layout.tsx

@@ -0,0 +1,21 @@
+import { Stack } from 'expo-router';
+import theme from '../theme';
+
+export default function RootLayout() {
+ return (
+ <Stack
+ screenOptions={{
+ headerStyle: {
+ backgroundColor: theme.colors.primary,
+ },
+ headerTintColor: '#fff',
+ headerTitleStyle: {
+ fontWeight: 'bold',
+ },
+ headerBackTitleVisible: false,
+ }}
+ >
+ <Stack.Screen name="index" options={{ headerTitle: '' }} />
+ </Stack>
+ );
+}

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

@@ -0,0 +1,13 @@
+import { Slot } from 'expo-router';
+import { UserProvider } from './providers/user-provider';
+import { ThemeProvider } from './providers/theme-provider';
+
+export default function CustomRenderLayout() {
+ return (
+ <UserProvider.Provider value={null}>
+ <ThemeProvider.Provider value={'light'}>
+ <Slot />
+ </ThemeProvider.Provider>
+ </UserProvider.Provider>
+ );
+}

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

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

examples/cookbook/app/index.tsx

@@ -0,0 +1,105 @@
+import React, {useCallback, useEffect} 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)}>
+ <Text style={styles.pressableText}>{item.title}</Text>
+ </Pressable>
+ ),[]);
+
+ return (
+ <View style={styles.container}>
+ <View style={styles.bannerContainer}>
+ <Image source={require('../assets/icon.png')} style={styles.logo} />
+ <Image
+ resizeMode={'contain'}
+ source={require('../assets/gradientRNBanner.png')}
+ style={styles.banner}
+ />
+ <Text style={styles.title}>Testing Library</Text>
+ <Text style={styles.subTitle}>Cookbook App</Text>
+ </View>
+ <FlatList<Recipe>
+ data={recipes}
+ renderItem={renderItem}
+ keyExtractor={(item) => item.id.toString()}
+ />
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5F5F5',
+ paddingVertical: 20,
+ },
+ bannerContainer: {
+ alignItems: 'center',
+ marginBottom: 20,
+ },
+ title: {
+ fontSize: 20,
+ fontFamily: 'OpenSans-Bold',
+ color: theme.colors.black,
+ },
+ subTitle: {
+ fontSize: 14,
+ fontFamily: 'OpenSans-Regular',
+ color: theme.colors.gray,
+ },
+ banner: {
+ height: 40,
+ },
+ logo: {
+ width: 80,
+ height: 80,
+ marginBottom: 20,
+ },
+ pressable: {
+ backgroundColor: '#9b6dff',
+ padding: 12,
+ marginBottom: 8,
+ borderRadius: 16,
+ },
+ pressableText: {
+ color: '#fff',
+ fontSize: 14,
+ fontFamily: 'OpenSans-Bold',
+ textAlign: 'center',
+ },
+});
+
+type Recipe = {
+ id: number;
+ 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/jotai/TaskList.tsx → examples/cookbook/app/jotai/index.tsx

@@ -1,10 +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 { useAtom } from 'jotai';
-import { nanoid } from 'nanoid';
 import { newTaskTitleAtom, tasksAtom } from './state';
 
-export function TaskList() {
+export default function TaskList() {
  const [tasks, setTasks] = useAtom(tasksAtom);
  const [newTaskTitle, setNewTaskTitle] = useAtom(newTaskTitleAtom);
 
@@ -20,7 +21,7 @@ export function TaskList() {
  };
 
  return (
- <View>
+ <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  {tasks.map((task) => (
  <Text key={task.id} testID="task-item">
  {task.title}

examples/cookbook/jest.config.js

@@ -2,4 +2,5 @@ module.exports = {
  preset: '@testing-library/react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  setupFilesAfterEnv: ['./jest-setup.ts'],
+ testMatch: ['**/*.test.{ts,tsx}'],
 };

examples/cookbook/package.json

@@ -1,5 +1,5 @@
 {
- "main": "node_modules/expo/AppEntry.js",
+ "main": "expo-router/entry",
  "scripts": {
  "start": "expo start",
  "android": "expo start --android",
@@ -12,20 +12,29 @@
  },
  "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-status-bar": "~1.11.1",
  "jotai": "^2.8.4",
  "nanoid": "^3.3.7",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-native": "0.73.2",
+ "react-native-get-random-values": "~1.8.0",
+ "react-native-safe-area-context": "4.8.2",
+ "react-native-screens": "~3.29.0",
  "react-native-web": "~0.19.6"
  },
  "devDependencies": {
  "@babel/core": "^7.20.0",
+ "@expo/metro-runtime": "~3.1.3",
  "@testing-library/react-native": "^12.4.0",
  "@types/eslint": "^8.56.10",
  "@types/jest": "^29.5.12",
  "@types/react": "~18.2.45",
+ "@types/react-native-get-random-values": "^1",
  "eslint": "^8.57.0",
  "jest": "^29.7.0",
  "react-test-renderer": "18.2.0",

examples/cookbook/theme.ts

@@ -0,0 +1,8 @@
+export default {
+ colors: {
+ primary: '#9b6dff',
+ secondary: '#58baad',
+ black: '#323232',
+ gray: '#5b5a5b',
+ },
+};