☣️ Experiment This is an experimental library and may have breaking changes in the future.
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.
-
starters-dev/rnn-with-expo - minimalistic starter with React Native Navigation, Expo Modules and RNN Screens.
-
rnn-starter - more advanced starter that is powered by cli-rn, React Native Navigation, Expo Modules, RNN Screens, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.
1. Install React Native Navigation and RNN Screens
> yarn add react-native-navigation rnn-screens
> npx rnn-link
> npx pod-install
If you had problems installing RNN, please follow more detailed tutorial
import {generateRNNScreens, Root, BottomTabs, Screen, ScreenComponent} from 'rnn-screens';
// src/screens/main.tsx
export const Main: ScreenComponent = ({componentId}) => {
return <>...</>;
};
// src/screens/settings.tsx
type SettingsProps = {type: 'push' | 'show'};
export const Settings: ScreenComponent<SettingsProps> = ({componentId, type}) => {
return <>...</>;
};// src/screens/index.tsx
import {generateRNNScreens} from 'rnn-screens';
import {Main} from './main';
import {Settings} from './settings';
export const screens = generateRNNScreens({
Main: {
component: Main,
options: {
topBar: {title: {text: 'Home'}},
},
},
Settings: {
component: Settings,
options: {
topBar: {title: {text: 'Settings'}},
},
},
});// App.tsx
// single screen app
export const App = () => Root(Screen(screens.get('Main')));
// tab based app
export const TabsApp = () =>
Root(
BottomTabs([
Screen(screens.get('Main')),
Screen(screens.get('Settings'))
])
);// index.js
import {registerRootComponent} from 'rnn-screens';
import {App} from './App';
registerRootComponent(App);// navigate from any screen
// 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();Feel free to open an issue for suggestions.
Thanks to the React Native Navigation team @ Wix!
This project is MIT licensed
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent