/rnn-screens

🃏 Predictable Navigation for React Native.

Primary LanguageTypeScriptMIT LicenseMIT

☣️ Experiment This is an experimental library and may have breaking changes in the future.

Goal

The goal of RNN Screens is to provide React Native developers with more simplified and predictable Navigation. It's built on top of React Native Navigation.

Quick start

1. Install RNN Screens

> yarn add rnn-screens

2. Install and link React Native Navigation

> yarn add react-native-navigation
> npx rnn-link
> npx pod-install

If you had problems installing RNN, please follow more detailed tutorial

Usage

1. Update index.js

import {registerRootComponent} from 'rnn-screens';
import App from './App';

registerRootComponent(App);

2. Build components (ex., in App.tsx)

import {generateRNNScreens, Root, BottomTabs, Screen, ScreenComponent} from 'rnn-screens';

const Main: ScreenComponent = ({componentId}) => {
  return <>...</>;
};

type SettingsProps = {type: 'push' | 'show'};
const Settings: ScreenComponent<SettingsProps> = ({componentId, type}) => {
  return <>...</>;
};

3. Describe screens

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

4. Build root component

// single screen app
const App = () => Root(Screen(screens.get('Main')));

// tab based app
const TabsApp = () =>
  Root(
    BottomTabs([
      Screen(screens.get('Main')),
      Screen(screens.get('Settings')),
    ]),
  );

5. Navigate with predictability

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

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

// push screen with passProps
screens.push<SettingsProps>(componentId, 'Settings', {type: 'push'});

// use RNN Navigation instance
screens.N.dismissAllModals();

A simple example of RNN Screens integration is located under example/ folder.

If you'd like to see more advanced example with translation service and other stuff, check out kanzitelli/rnn-starter.

Enhancements

  • Better documentation
  • Build an OSS React Native app with RNN Screens.

Feel free to open an issue for suggestions.

Credits

Thanks to the team @ Wix behind React Native Navigation!

License

This project is MIT licensed