npm package: @robotalienunicorn/react-native-redux-router
Description: A React Native Redux Router
Author: Zaid Daghestani
Latest version: 0.0.4

# react-native-redux-router

[![codecov](https://codecov.io/gh/robotalienunicorn/zcode/branch/main/graph/badge.svg?token=JKUIPN70EO)](https://codecov.io/gh/robotalienunicorn/zcode)

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

## Basic Usage

```ts
// 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}>
	}
}

```

```ts
// 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' },
      ],
    },
  ],
});
```

```ts
// Add your router slice to your redux store

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

```tsx
// 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

```tsx
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}`}
    />
  );
}
```