react-native-redux-router

A react-native-screens router built on @reduxjs/toolkit

Basic Usage

// Define your screen names and your screen renderer

export type AppScreens = 'home' | 'about' | 'user'

export function AppScreen({screen, params}: {screen: AppScreens, params: any}) {
	switch (screen) {
		case 'home':
			return <HomeScreen params={params}>
		case 'about':
			return <AboutScreen params={params}>
		case 'user':
			return <UserScreen params={params}>
	}
}

// Create your router slice with it's initial state

import { createRouterSlice } from '@robotalientunicorn/react-native-redux-router';

// This is example shows all the different navigators and screens you can make
const routerSlice = createRouterSlice<AppScreens>({
  name: 'root',
  type: NavigatorType.stack,
  routes: [
    {
      name: 'stack1',
      type: NavigatorType.stack,
      routes: [{ name: 'screen1', params: 'hello-world' }],
    },
    {
      name: 'tab',
      type: NavigatorType.tab,
      activeRoute: 'tab1',
      routes: [
        {
          name: 'tab1',
          type: NavigatorType.stack,
          routes: [
            {
              name: 'tab1screen',
            },
          ],
        },
        {
          name: 'tab2',
          type: NavigatorType.stack,
          routes: [
            {
              name: 'tab2screen',
            },
          ],
        },
        {
          name: 'tab3',
          type: NavigatorType.stack,
          routes: [
            {
              name: 'tab3screen',
            },
          ],
        },
      ],
    },
    {
      name: 'switch',
      type: NavigatorType.switch,
      activeRoute: 'switch1',
      routes: [
        {
          name: 'switch1',
          type: NavigatorType.stack,
          routes: [
            {
              name: 'switch1screen',
            },
          ],
        },
        {
          name: 'switch2',
          type: NavigatorType.stack,
          routes: [
            {
              name: 'switch2screen',
            },
          ],
        },
        {
          name: 'switch3',
          type: NavigatorType.stack,
          routes: [
            {
              name: 'switch3screen',
            },
          ],
        },
      ],
    },
    {
      name: 'stack2',
      type: NavigatorType.stack,
      routes: [
        { name: '2-1' },
        { name: '2-2' },
        { name: '2-3' },
        { name: '2-4' },
      ],
    },
    {
      name: 'stack3',
      type: NavigatorType.stack,
      routes: [
        { name: '3-1' },
        { name: '3-2' },
        { name: '3-3' },
        { name: '3-4' },
      ],
    },
  ],
});

// Add your router slice to your redux store

const store = configureStore({
  reducer: {
    router: routerSlice.router,
  },
});
export type AppState = ReturnType<typeof store.getState>;

// Create your ReduxRouter component and render

const ReduxRouter = createReduxRouter({
  slice: routerSlice,
  selector: (state) => (state as AppState).router,
});

function App() {
  // don't forget your provider
  return (
    <Provider store={store}>
      <ReduxRouter Screens={AppScreen} />
    </Provider>
  );
}

hooks

import {
  useNavigation,
  useFocus,
  FocusEvents,
} from '@robotalienunicorn/react-native-redux-router';

function MyComponent() {
  const navigation = useNavigation();
  const [state, setState] = useState<FocusEvents>('focus');
  useFocus((event: FocusEvents) => {
    setState(event);
  });
  return (
    <Button
      onPress={() => {
        navigation.push({ name: 'user', params: { id: getUserId() } });
      }}
      title={`Hello nav ${state}`}
    />
  );
}