Навигация в Expo Router: стеки, вкладки, параметры

npx create-expo-app@latest notes-app --yes
cd notes-app
npm run reset-project
npx expo install @expo/vector-icons

import { createContext, use, useState, type ReactNode } from 'react';

export type Note = {
  id: string;
  title: string;
  body: string;
};

type NotesContextValue = {
  notes: Note[];
  addNote: (title: string, body: string) => Note;
};

const NotesContext = createContext<NotesContextValue | null>(null);

const initialNotes: Note[] = [
  { id: '1', title: 'Call the supplier', body: 'Confirm the delivery date for Friday.' },
  { id: '2', title: 'Team meeting', body: 'Prepare the agenda and the weekly report.' },
];

export function NotesProvider({ children }: { children: ReactNode }) {
  const [notes, setNotes] = useState(initialNotes);

  function addNote(title: string, body: string) {
    const note = { id: String(Date.now()), title, body };
    setNotes((current) => [note, ...current]);
    return note;
  }

  return <NotesContext value={{ notes, addNote }}>{children}</NotesContext>;
}

export function useNotes() {
  const value = use(NotesContext);
  if (!value) {
    throw new Error('useNotes must be used inside NotesProvider');
  }
  return value;
}

import { Stack } from 'expo-router';

import { NotesProvider } from '@/data/notes';

export default function RootLayout() {
  return (
    <NotesProvider>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="notes/[id]" options={{ title: 'Note' }} />
        <Stack.Screen name="new" options={{ presentation: 'modal', title: 'New note' }} />
      </Stack>
    </NotesProvider>
  );
}

import Ionicons from '@expo/vector-icons/Ionicons';
import { Link, Tabs } from 'expo-router';
import { Pressable, StyleSheet, Text } from 'react-native';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#2563eb' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Notes',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="document-text-outline" size={size} color={color} />
          ),
          headerRight: () => (
            <Link href="/new" asChild>
              <Pressable accessibilityRole="button" style={styles.headerButton}>
                <Text style={styles.headerButtonText}>New</Text>
              </Pressable>
            </Link>
          ),
        }}
      />
      <Tabs.Screen
        name="about"
        options={{
          title: 'About',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="information-circle-outline" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  headerButton: {
    marginRight: 16,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    backgroundColor: '#2563eb',
  },
  headerButtonText: {
    color: '#ffffff',
    fontWeight: '600',
  },
});

import { Link } from 'expo-router';
import { FlatList, Pressable, StyleSheet, Text } from 'react-native';

import { useNotes } from '@/data/notes';

export default function NotesScreen() {
  const { notes } = useNotes();

  return (
    <FlatList
      data={notes}
      keyExtractor={(note) => note.id}
      contentContainerStyle={styles.list}
      ListEmptyComponent={<Text style={styles.empty}>No notes yet</Text>}
      renderItem={({ item }) => (
        <Link href={{ pathname: '/notes/[id]', params: { id: item.id } }} asChild>
          <Pressable style={styles.row}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.preview} numberOfLines={1}>
              {item.body}
            </Text>
          </Pressable>
        </Link>
      )}
    />
  );
}

const styles = StyleSheet.create({
  list: {
    padding: 16,
    gap: 12,
  },
  row: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#ffffff',
    gap: 4,
  },
  title: {
    fontSize: 17,
    fontWeight: '600',
    color: '#18181b',
  },
  preview: {
    fontSize: 15,
    color: '#71717a',
  },
  empty: {
    textAlign: 'center',
    color: '#71717a',
  },
});

import { Link } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';

export default function AboutScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Notes is a demo of Expo Router: tabs, a stack and a modal.</Text>
      <Link href="/notes/1" style={styles.link}>
        Open the first note
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 16,
  },
  text: {
    fontSize: 16,
    lineHeight: 24,
    color: '#3f3f46',
  },
  link: {
    fontSize: 16,
    color: '#2563eb',
  },
});

import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import { useNotes } from '@/data/notes';

export default function NoteScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { notes } = useNotes();
  const router = useRouter();
  const note = notes.find((item) => item.id === id);

  function goBack() {
    if (router.canGoBack()) {
      router.back();
    } else {
      router.replace('/');
    }
  }

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: note?.title ?? 'Not found' }} />
      <Text style={styles.body}>{note ? note.body : `Note ${id} does not exist.`}</Text>
      <Pressable accessibilityRole="button" onPress={goBack} style={styles.button}>
        <Text style={styles.buttonText}>Back to notes</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 24,
  },
  body: {
    fontSize: 17,
    lineHeight: 26,
    color: '#18181b',
  },
  button: {
    alignSelf: 'flex-start',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 10,
    backgroundColor: '#e4e4e7',
  },
  buttonText: {
    fontSize: 16,
    color: '#18181b',
  },
});

import { useRouter } from 'expo-router';
import { useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

import { useNotes } from '@/data/notes';

export default function NewNoteScreen() {
  const router = useRouter();
  const { addNote } = useNotes();
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const canSave = title.trim().length > 0;

  function save() {
    addNote(title.trim(), body.trim());
    router.dismissTo('/');
  }

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Title"
        value={title}
        onChangeText={setTitle}
        style={styles.input}
        autoFocus
      />
      <TextInput
        placeholder="Text"
        value={body}
        onChangeText={setBody}
        style={[styles.input, styles.multiline]}
        multiline
      />
      <Pressable
        accessibilityRole="button"
        accessibilityState={{ disabled: !canSave }}
        disabled={!canSave}
        onPress={save}
        style={[styles.button, !canSave && styles.buttonDisabled]}>
        <Text style={styles.buttonText}>Save</Text>
      </Pressable>
      <Pressable accessibilityRole="button" onPress={() => router.dismissTo('/')}>
        <Text style={styles.cancel}>Cancel</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 12,
  },
  input: {
    borderWidth: 1,
    borderColor: '#d4d4d8',
    borderRadius: 10,
    padding: 12,
    fontSize: 16,
  },
  multiline: {
    minHeight: 120,
    textAlignVertical: 'top',
  },
  button: {
    alignItems: 'center',
    padding: 14,
    borderRadius: 10,
    backgroundColor: '#2563eb',
  },
  buttonDisabled: {
    opacity: 0.4,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
  cancel: {
    textAlign: 'center',
    padding: 8,
    color: '#71717a',
  },
});

# development build или эмулятор с установленным приложением
npx uri-scheme open notesapp://notes/1 --android
npx uri-scheme open notesapp://notes/1 --ios

# Expo Go: путь внутри приложения идёт после /--/
exp://127.0.0.1:8081/--/notes/1

<Link href="/note/1">Typo in the path</Link>
<Link href={{ pathname: '/notes/[id]', params: { noteId: '1' } }}>Wrong param</Link>

$ npx tsc --noEmit
src/tmp/typed-check.tsx(6,13): error TS2322: Type '"/note/1"' is not assignable to type '"/" | RelativePathString | ExternalPathString | "/new" | …
src/tmp/typed-check.tsx(7,46): error TS2322: Type '{ noteId: string; }' is not assignable to type 'UnknownInputParams & { id: string | number; }'.
  Property 'id' is missing in type '{ noteId: string; }' but required in type '{ id: string | number; }'.

/// <reference types="jest" />
import { router } from 'expo-router';
import { act, fireEvent, renderRouter, screen } from 'expo-router/testing-library';

const appDir = './src/app';

describe('Notes navigation', () => {
  test('list → note details → back', async () => {
    const app = renderRouter(appDir, { initialUrl: '/' });
    await app;
    expect(app.getPathname()).toBe('/');

    await fireEvent.press(screen.getByText('Call the supplier'));
    expect(app.getPathname()).toBe('/notes/1');
    expect(app.getSearchParams()).toEqual({ id: '1' });
    expect(screen.getByText('Confirm the delivery date for Friday.')).toBeTruthy();

    await fireEvent.press(screen.getByRole('button', { name: 'Back to notes' }));
    expect(app.getPathname()).toBe('/');
  });

  test('deep link opens a note without history', async () => {
    const app = renderRouter(appDir, { initialUrl: '/notes/2' });
    await app;
    expect(app.getPathname()).toBe('/notes/2');
    expect(screen.getByText('Prepare the agenda and the weekly report.')).toBeTruthy();

    await fireEvent.press(screen.getByRole('button', { name: 'Back to notes' }));
    expect(app.getPathname()).toBe('/');
  });

  test('modal creates a note and closes', async () => {
    const app = renderRouter(appDir, { initialUrl: '/' });
    await app;
    await act(() => router.push('/new'));
    expect(app.getPathname()).toBe('/new');

    await fireEvent.changeText(screen.getByPlaceholderText('Title'), 'Buy coffee beans');
    await fireEvent.press(screen.getByRole('button', { name: 'Save' }));

    expect(app.getPathname()).toBe('/');
    expect(screen.getByText('Buy coffee beans')).toBeTruthy();
  });

  test('unknown id shows a fallback', async () => {
    await renderRouter(appDir, { initialUrl: '/notes/999' });
    expect(screen.getByText('Note 999 does not exist.')).toBeTruthy();
  });
});

$ npm test
PASS __tests__/navigation-test.tsx
  Notes navigation
    √ list → note details → back (352 ms)
    √ deep link opens a note without history (29 ms)
    √ modal creates a note and closes (70 ms)
    √ unknown id shows a fallback (10 ms)

Tests:       4 passed, 4 total