@sirou/react-native

@sirou/react-native

The React Native adapter for Sirou. Integrates with React Navigation v6+ to provide type-safe navigation, deep linking, and a consistent routing API across web and mobile.

Installation

npm install @sirou/react-native @sirou/core @react-navigation/native @react-navigation/stack

Setup

// src/router.ts
import { createSirouNativeRouter } from "@sirou/react-native";
import { routes } from "./routes";

export const router = createSirouNativeRouter(routes);

// App.tsx
import { NavigationContainer } from "@react-navigation/native";
import { SirouNativeProvider } from "@sirou/react-native";
import { router } from "./router";

export default function App() {
  return (
    <NavigationContainer>
      <SirouNativeProvider router={router}>
        <RootNavigator />
      </SirouNativeProvider>
    </NavigationContainer>
  );
}

API Reference

createSirouNativeRouter(config)

Creates an Sirou router instance backed by React Navigation.

const router = createSirouNativeRouter(routes);

useSirouNativeRouter()

Returns the router instance in any component.

import { useSirouNativeRouter } from "@sirou/react-native";

const router = useSirouNativeRouter<typeof routes>();
router.go("profile", { id: "user123" });

useSirouParams(routeName)

Returns typed params for the current screen.

import { useSirouParams } from "@sirou/react-native";

function ProfileScreen() {
  const { id } = useSirouParams("profile");
  return <Text>User: {id}</Text>;
}

generateDeepLinkConfig(config)

Automatically generates a React Navigation linking configuration from your route schema. This enables deep linking without manual configuration.

import { generateDeepLinkConfig } from '@sirou/react-native';
import { routes } from './routes';

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: generateDeepLinkConfig(routes),
};

// Pass to NavigationContainer
<NavigationContainer linking={linking}>

License

MIT