https://github.com/kanzitelli/rnn-screens
🃏 Predictable Navigation for React Native.
https://github.com/kanzitelli/rnn-screens
react react-native react-native-navigaiton-screens react-native-navigation react-navigation rnn-screens rnn-starter
Last synced: about 1 month ago
JSON representation
🃏 Predictable Navigation for React Native.
- Host: GitHub
- URL: https://github.com/kanzitelli/rnn-screens
- Owner: kanzitelli
- License: mit
- Created: 2021-10-28T18:25:36.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-17T23:41:06.000Z (over 2 years ago)
- Last Synced: 2025-04-01T22:57:41.831Z (about 2 months ago)
- Topics: react, react-native, react-native-navigaiton-screens, react-native-navigation, react-navigation, rnn-screens, rnn-starter
- Language: TypeScript
- Homepage:
- Size: 629 KB
- Stars: 27
- Watchers: 1
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
☣️ `Experiment` This is an experimental library and may have breaking changes in the future.
## Goal
The goal of [RNN Screens](https://github.com/kanzitelli/rnn-screens) is to provide React Native developers with more simplified and predictable Navigation. It's built on top of [React Native Navigation](https://github.com/wix/react-native-navigation).
## Quick start
### Starters
1. [starters-dev/rnn-with-expo](https://github.com/starters-dev/rnn-with-expo) - minimalistic starter with React Native Navigation, Expo Modules and **RNN Screens**.
2. [rnn-starter](https://github.com/kanzitelli/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.
### Bare RNN
#### 1. Install [React Native Navigation](https://github.com/wix/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](https://wix.github.io/react-native-navigation/docs/installing)
#### 2. Build screen components
```tsx
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 = ({componentId, type}) => {
return <>...>;
};
```
#### 3. Describe screens
```tsx
// 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'}},
},
},
});
```
#### 4. Build root component
```tsx
// 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'))
])
);
```
#### 5. Update `index.js`
```tsx
// index.js
import {registerRootComponent} from 'rnn-screens';
import {App} from './App';
registerRootComponent(App);
```
#### 6. Navigate with predictability
```tsx
// navigate from any screen
// push screen
screens.push(componentId, 'Settings');
// show modal
screens.show('Settings');
// push screen with passProps
screens.push(componentId, 'Settings', {type: 'push'});
// use RNN Navigation instance
screens.N.dismissAllModals();
```
## Enhancements
Feel free to open an issue for suggestions.
## Credits
Thanks to the [React Native Navigation](https://github.com/wix/react-native-navigation) team @ Wix!
## License
This project is [MIT licensed](https://github.com/kanzitelli/rnn-screens/blob/master/LICENSE.md)