Stack Navigator

Creates a Stack Navigator that integrates effector/router Router with React Navigation's Stack Navigator.

Import

import { createStackNavigator } from '@effector/router-react-native';

Usage

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@effector/router-react-native';
import { createRouter, createRoute } from '@effector/router';
import { createRouteView, RouterProvider } from '@effector/router-react';

const homeRoute = createRoute({ path: '/home' });
const detailsRoute = createRoute({ path: '/details/:id' });

const router = createRouter({
  routes: [homeRoute, detailsRoute],
});

const HomeScreen = createRouteView({
  route: homeRoute,
  view: () => (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => detailsRoute.open({ params: { id: '123' } })}
      />
    </View>
  ),
});

const DetailsScreen = createRouteView({
  route: detailsRoute,
  view: () => {
    const params = useUnit(detailsRoute.$params);
    return <Text>Details: {params.id}</Text>;
  },
});

const StackNavigator = createStackNavigator({
  router,
  routes: [HomeScreen, DetailsScreen],
  screenOptions: {
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  },
});

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

Configuration

router (required)

effector/router Router instance created with createRouter.

const router = createRouter({
  routes: [homeRoute, profileRoute],
});

const StackNavigator =
  createeffector /
  routerStackNavigator({
    router,
    routes: [HomeScreen, ProfileScreen],
  });

routes (required)

Array of route views created with createRouteView or createLazyRouteView.

const HomeScreen = createRouteView({
  route: homeRoute,
  view: () => <Text>Home</Text>,
});

const StackNavigator =
  createeffector /
  routerStackNavigator({
    router,
    routes: [HomeScreen, ProfileScreen],
  });

screenOptions

Options applied to all screens. Accepts all React Navigation Stack Navigator options.

const StackNavigator =
  createeffector /
  routerStackNavigator({
    router,
    routes: [HomeScreen, ProfileScreen],
    screenOptions: {
      // Header
      headerShown: true,
      headerTitle: 'My App',
      headerStyle: { backgroundColor: '#f4511e' },
      headerTintColor: '#fff',
      headerTitleStyle: { fontWeight: 'bold' },

      // Gestures
      gestureEnabled: true,
      gestureDirection: 'horizontal',

      // Card
      cardStyle: { backgroundColor: '#fff' },
      presentation: 'card', // or 'modal', 'transparentModal'

      // Animation
      animationEnabled: true,
    },
  });

See React Navigation Stack Navigator documentation for all available options.

initialRouteName

Name of the route to render on initial render.

const StackNavigator =
  createeffector /
  routerStackNavigator({
    router,
    routes: [HomeScreen, ProfileScreen],
    initialRouteName: '/home',
  });

Navigation

Navigate using effector/router Router route methods:

// Open route
homeRoute.open();

// With parameters
profileRoute.open({ params: { id: '123' } });

// With query
homeRoute.open({ query: { tab: 'settings' } });

// Replace
profileRoute.open({ replace: true });

Type Safety

Route parameters are type-safe:

const userRoute = createRoute({ path: '/user/:id/:tab' });
// Type: Route<{ id: string; tab: string }>

userRoute.open({
  params: { id: '123', tab: 'posts' }, // ✅ Type-safe
});

userRoute.open({ params: { id: 123 } }); // ❌ Error: id must be string