@rn-tools/navigation

Navigation primitives for React Native. Built on react-native-screens with integrated sheets and notifications support.

Installation

yarn expo install @rn-tools/navigation react-native-screens

Quick Start

import {
  createNavigation,
  Navigation,
  Stack,
  Tabs,
  type TabScreenOptions,
} from "@rn-tools/navigation";

const navigation = createNavigation();

const tabScreens: TabScreenOptions[] = [
  {
    id: "home",
    screen: <Stack id="home" rootScreen={<HomeScreen />} />,
    tab: ({ isActive, onPress }) => (
      <Pressable onPress={onPress}>
        <Text style={{ fontWeight: isActive ? "bold" : "normal" }}>Home</Text>
      </Pressable>
    ),
  },
  {
    id: "settings",
    screen: <SettingsScreen />,
    tab: ({ isActive, onPress }) => (
      <Pressable onPress={onPress}>
        <Text style={{ fontWeight: isActive ? "bold" : "normal" }}>Settings</Text>
      </Pressable>
    ),
  },
];

export default function App() {
  return (
    <Navigation navigation={navigation}>
      <Tabs id="main-tabs" screens={tabScreens} />
    </Navigation>
  );
}

Navigate screens, present sheets, and trigger notifications imperatively:

navigation.stack.push(<DetailScreen />, { id: "detail" });
navigation.stack.pop();
navigation.tabs.tab(1);
navigation.sheets.present(<EditSheet />, { id: "edit", snapPoints: [320, 520] });
navigation.sheets.dismiss();
navigation.sheets.dismissAll();
navigation.notifications.present(<SavedNotification />, { id: "saved", position: "top", durationMs: 3000 });
navigation.notifications.dismiss();
navigation.notifications.dismiss("bottom");
navigation.notifications.dismiss("saved");

durationMs defaults to 3000; pass null for persistent notifications.

Presented sheet and notification elements receive an injected optional dismiss?: () => void prop.

When no explicit target is provided:

• push/pop/tab resolve the deepest active stack/tabs node.
• dismiss() resolves the active sheet.
• notifications.dismiss() resolves the latest non-closing top-lane notification.

Hooks are also re-exported for convenience:

• useSheetEntry (from @rn-tools/sheets)
• useNotificationEntry (from @rn-tools/notifications)

Injected-prop typings are re-exported as well:

• SheetInjectedProps
• NotificationInjectedProps

Docs

• Navigation — setup, createNavigation, NavigationClient API (screens + sheets + notifications), hooks
• Stack — stack navigation, pushing/popping, refs, preloading, nesting
• Tabs — tab navigation, tab bar, refs, preloading, nesting with stacks
• Sheets — sheet setup, API, and props
• Notifications — notification setup, API, and props