make cookbook app runnable

Author: vanGalilea

examples/cookbook/App.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { screen } from '@testing-library/react-native';
 import { renderWithProviders } from './test-utils';
-import { WelcomeScreen } from './WelcomeScreen';
+import { Index } from './index.test';
 
 test('renders WelcomeScreen in light theme', () => {
-  renderWithProviders(<WelcomeScreen />, { theme: 'light' });
+  renderWithProviders(<Index />, { theme: 'light' });
   expect(screen.getByText('Theme: light')).toBeOnTheScreen();
 });
 
 test('renders WelcomeScreen in dark theme', () => {
-  renderWithProviders(<WelcomeScreen />, { theme: 'dark' });
+  renderWithProviders(<Index />, { theme: 'dark' });
   expect(screen.getByText('Theme: dark')).toBeOnTheScreen();
 });
 
 test('renders WelcomeScreen with user', () => {
-  renderWithProviders(<WelcomeScreen />, { user: { name: 'Jar-Jar' } });
+  renderWithProviders(<Index />, { user: { name: 'Jar-Jar' } });
   expect(screen.getByText(/hello Jar-Jar/i)).toBeOnTheScreen();
 });
 
 test('renders WelcomeScreen without user', () => {
-  renderWithProviders(<WelcomeScreen />, { user: null });
+  renderWithProviders(<Index />, { user: null });
   expect(screen.getByText(/hello stranger/i)).toBeOnTheScreen();
 });

examples/cookbook/custom-render/WelcomeScreen.test.tsx renamed to examples/cookbook/__tests__/app/custom-render/index.test.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/custom-render/test-utils.tsx renamed to examples/cookbook/__tests__/app/custom-render/test-utils.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/jotai/TaskList.test.tsx renamed to examples/cookbook/__tests__/app/jotai/index.test.tsx

@@ -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/jotai/test-utils.tsx renamed to examples/cookbook/__tests__/app/jotai/test-utils.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.json

@@ -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/app/_layout.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>