RNN Screens : a set of methods to help build initial screens for RNN without hassle

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