Purpose of RNN Screens is to simplify and accelerate the process of React Native App development with React Native Navigation. It is not a replacement for RNN but a good addition!

Quick start

Make sure you have react-native-navigation installed in your project.

yarn add rnn-screens

Usage

1. Describe app’s screens

import {generateRNNScreens, Root, Stack, Component, BottomTabs} from 'rnn-screens';

export const screens = generateRNNScreens<'Main' | 'Settings'>({
  Main: {
    component: Main,
    options: {
      topBar: {
        title: {
          text: 'Home',
        },
      },
    },
  },
  Settings: {
    component: Settings,
    options: {
      topBar: {
        title: {
          text: 'Settings',
        },
      },
    },
  },
});

2. Set app’s navigation root

// One screen app
screens.N.setRoot(Root(Stack(Component(screens.get('Main')))));

// Tab based app
screens.N.setRoot(
  Root(
    BottomTabs([
      Stack(Component(screens.get('Main'))),
      Stack(Component(screens.get('Settings'))),
    ]),
  ),
);

3. Navigate with predictability

// push screen
screens.push(componentId, 'Example');

// show modal
screens.show('Example');

// push screen with passProps
screens.push<ExampleScreenProps>(
  componentId,
  'Example',
  { value: randomNum() },
)

An integration example could be found at kanzitelli/rnn-starter.

Credits

Thanks to the team @ Wix behind React Native Navigation!

License

This project is MIT licensed

GitHub

View Github