docs: add jotai to cookbook

examples/cookbook/jotai/TodoList.test.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { render, screen, userEvent } from '@testing-library/react-native';
+import { addTodo, getTodos, store, TodoItem, TodoList, todosAtom } from './TodoList';
+import { renderWithAtoms } from './test-utils';
+
+jest.useFakeTimers();
+test('renders an empty to do list', () => {
+  render(<TodoList />);
+  expect(screen.getByText(/no todos, start by adding one/i)).toBeOnTheScreen();
+});
+
+const INITIAL_TODOS: TodoItem[] = [{ id: '1', text: 'Buy bread' }];
+
+test('renders a to do list with 1 items initially, and adds a new item', async () => {
+  renderWithAtoms<TodoItem[]>(<TodoList />, {
+    initialValues: [
+      [todosAtom, INITIAL_TODOS],
+      // optional: add any other Jotai atoms and their corresponding initial values
+    ],
+  });
+  expect(screen.getByText(/buy bread/i)).toBeOnTheScreen();
+  expect(screen.getAllByLabelText('todo-item')).toHaveLength(1);
+
+  const user = userEvent.setup();
+  const addTodoButton = screen.getByRole('button', { name: /add a random to-do/i });
+  await user.press(addTodoButton);
+
+  expect(screen.getByText(/buy almond milk/i)).toBeOnTheScreen();
+  expect(screen.getAllByLabelText('todo-item')).toHaveLength(2);
+});
+
+test("[outside react's scope]start with 1 initial todo and adds a new todo item", () => {
+  // Set the initial to do items in the store
+  store.set(todosAtom, INITIAL_TODOS);
+
+  expect(getTodos()).toEqual(INITIAL_TODOS);
+  const NEW_TODO = { id: '2', text: 'Buy almond milk' };
+  addTodo({
+    id: '2',
+    text: 'Buy almond milk',
+  });
+  expect(getTodos()).toEqual([...INITIAL_TODOS, NEW_TODO]);
+});

examples/cookbook/jotai/TodoList.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { FlatList, Pressable, Text, View } from 'react-native';
+import { atom, createStore, useAtom } from 'jotai';
+
+export type TodoItem = {
+  id: string;
+  text: string;
+};
+
+export const todosAtom = atom<TodoItem[]>([]);
+
+export function TodoList() {
+  const [todos, setTodos] = useAtom(todosAtom);
+
+  const handleAddTodo = () =>
+    setTodos((prev) => [
+      ...prev,
+      {
+        id: Math.random().toString(36).slice(2, 11),
+        text: 'Buy almond milk',
+      },
+    ]);
+
+  if (!todos.length) {
+    return <Text>No todos, start by adding one...</Text>;
+  }
+
+  return (
+    <View>
+      <FlatList
+        data={todos}
+        renderItem={({ item }: { item: TodoItem }) => (
+          <Text key={item.id} accessibilityLabel={'todo-item'}>
+            {item.text}
+          </Text>
+        )}
+      />
+      <Pressable accessibilityRole="button" onPress={handleAddTodo}>
+        <Text>Add a random to-do</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// Available for use outside react components
+export const store = createStore();
+export const getTodos = (): TodoItem[] => store.get(todosAtom);
+export const addTodo = (newTodo: TodoItem) => {
+  const todos = getTodos();
+  store.set(todosAtom, [...todos, newTodo]);
+};

examples/cookbook/jotai/test-utils.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {render} from '@testing-library/react-native';
+import {useHydrateAtoms} from "jotai/utils";
+import {IHydrateAtomsProps, InitialValues, IRenderWithAtomsOptions} from "./types";
+
+function HydrateAtomsWrapper<T>({
+                                initialValues,
+                                children,
+                              }: IHydrateAtomsProps<T>) {
+  useHydrateAtoms(initialValues as unknown as InitialValues);
+  return children;
+}
+
+/**
+ * Renders a React component with Jotai atoms for testing purposes.
+ *
+ * @template T - The type of the initial values for the atoms.
+ * @param component - The React component to render.
+ * @param options - The render options including the initial atom values.
+ * @returns The render result from `@testing-library/react-native`.
+ */
+export const renderWithAtoms = <T, >(
+  component: React.ReactElement,
+  options: IRenderWithAtomsOptions<T>,
+) => {
+  const {initialValues} = options;
+  return render(component, {
+    wrapper: ({children}: { children: React.JSX.Element }) => (
+      <HydrateAtomsWrapper initialValues={initialValues}>
+        {children}
+      </HydrateAtomsWrapper>
+    ),
+    ...options,
+  });
+};

examples/cookbook/jotai/types.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { PrimitiveAtom } from 'jotai/vanilla/atom';
+import { useHydrateAtoms } from 'jotai/utils';
+import { RenderOptions as RntlRenderOptions } from '@testing-library/react-native';
+
+type WithInitialValue<Value> = {
+  init: Value;
+};
+type UseHydrateAtomsParams = Parameters<typeof useHydrateAtoms>;
+export type InitialValues = UseHydrateAtomsParams[0];
+export type InitialValue<Value> = [PrimitiveAtom<Value> & WithInitialValue<Value>, Value];
+
+export interface IRenderWithAtomsOptions<T> extends RntlRenderOptions {
+  initialValues: Array<InitialValue<T>>;
+}
+
+export interface IHydrateAtomsProps<T> {
+  initialValues: Array<InitialValue<T>>;
+  children: React.JSX.Element;
+}

examples/cookbook/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "expo": "^50.0.4",
     "expo-status-bar": "~1.11.1",
+    "jotai": "^2.8.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.2",