Add your first feature

import { NotesScreen } from "@/screens/notes/notes-screen";

export default function Route() {
  return <NotesScreen />;
}

<NativeTabs.Trigger name="notes">
  <NativeTabs.Trigger.Icon sf="note.text" md="description" />
  <NativeTabs.Trigger.Label>Notes</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>

import { useQuery } from "@tanstack/react-query";

import { fetchJson } from "@/lib/api/client";

export interface Note {
  id: number;
  title: string;
  body: string;
}

export const NOTES_URL = "https://jsonplaceholder.typicode.com/posts?_limit=5";
export const notesQueryKey = ["notes"] as const;

export function useNotes() {
  const query = useQuery({
    queryKey: notesQueryKey,
    queryFn: () => fetchJson<Note[]>(NOTES_URL),
  });

  return {
    notes: query.data ?? [],
    loading: query.isPending,
    error: query.error,
    reload: () => void query.refetch(),
  };
}

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";

import { zustandStorage } from "@/stores/zustand-storage";

export interface Draft {
  id: string;
  title: string;
  body: string;
}

interface DraftsState {
  drafts: Draft[];
  add: (title: string, body: string) => void;
}

const useDraftsStore = create<DraftsState>()(
  persist(
    (set) => ({
      drafts: [],
      add: (title, body) =>
        set((s) => ({ drafts: [{ id: String(Date.now()), title, body }, ...s.drafts] })),
    }),
    {
      name: "notes:drafts",
      storage: createJSONStorage(() => zustandStorage),
      partialize: (s) => ({ drafts: s.drafts }),
    }
  )
);

export function useDrafts() {
  const drafts = useDraftsStore((s) => s.drafts);
  const add = useDraftsStore((s) => s.add);
  return { drafts, add };
}

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Field, Form } from "@/components/form";
import { Box, Button, Card } from "@/components/ui";

const schema = z.object({
  title: z.string().trim().min(2, "At least 2 characters"),
  body: z.string().trim().min(1, "Write something"),
});
type Values = z.infer<typeof schema>;

export function NoteForm({ onSave }: { onSave: (title: string, body: string) => void }) {
  const form = useForm<Values>({
    resolver: zodResolver(schema),
    defaultValues: { title: "", body: "" },
  });

  const submit = form.handleSubmit((values) => {
    onSave(values.title, values.body);
    form.reset();
  });

  return (
    <Box p={4}>
      <Card>
        <Form form={form}>
          <Box gap={3}>
            <Field<Values> name="title" label="Title" placeholder="Morning walk" />
            <Field<Values> name="body" label="Note" placeholder="What happened?" multiline />
            <Button onPress={() => void submit()}>Save</Button>
          </Box>
        </Form>
      </Card>
    </Box>
  );
}

import type { ReactNode } from "react";

import { useNotes } from "@/hooks/use-notes";
import { useDrafts } from "@/stores/drafts";
import { EmptyState, ErrorState, Icon, List, Loading, Row, Screen } from "@/components/ui";

import { NoteForm } from "./note-form";

interface Item {
  key: string;
  title: string;
  body: string;
  draft: boolean;
}

export function NotesScreen() {
  const { notes, loading, error, reload } = useNotes();
  const { drafts, add } = useDrafts();

  const items: Item[] = [
    ...drafts.map((d) => ({ key: `draft-${d.id}`, title: d.title, body: d.body, draft: true })),
    ...notes.map((n) => ({ key: `api-${n.id}`, title: n.title, body: n.body, draft: false })),
  ];

  let empty: ReactNode = (
    <EmptyState title="No notes yet" description="Write your first one above." />
  );
  if (loading) empty = <Loading label="Loading notes" />;
  if (error) {
    empty = <ErrorState title="Couldn't load notes" description={error.message} retry={reload} />;
  }

  return (
    <Screen padded={false}>
      <List
        data={items}
        keyExtractor={(item) => item.key}
        header={<NoteForm onSave={add} />}
        empty={empty}
        onRefresh={reload}
        refreshing={false}
        renderItem={(item) => (
          <Row
            title={item.title}
            subtitle={item.body}
            leading={
              <Icon
                name={item.draft ? "pencil" : "note.text"}
                fallback={item.draft ? "edit" : "description"}
              />
            }
          />
        )}
      />
    </Screen>
  );
}

import { describe, expect, it, jest } from "@jest/globals";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from "@testing-library/react-native";

import { ThemeProvider } from "@/components/ui";
import { NotesScreen } from "@/screens/notes/notes-screen";

jest.mock("@/lib/api/client", () => ({
  fetchJson: () => Promise.resolve([{ id: 1, title: "From the API", body: "Mocked note" }]),
}));

describe("NotesScreen", () => {
  it("renders the notes the API returns", async () => {
    // A fresh client per test: no retries, and no garbage-collection timer left running.
    const client = new QueryClient({
      defaultOptions: { queries: { retry: false, gcTime: Infinity } },
    });

    await render(
      <QueryClientProvider client={client}>
        <ThemeProvider>
          <NotesScreen />
        </ThemeProvider>
      </QueryClientProvider>
    );

    expect(await screen.findByText("From the API")).toBeTruthy();
    expect(screen.getByText("Mocked note")).toBeTruthy();
  });
});