React Native ~ RNN - rohit120582sharma/Documentation GitHub Wiki

React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps and has an easy to use Javascript API. React Native Navigation comes with optional redux support out of the box.

Installation

Install react-native-navigation package

npm install --save react-native-navigation@latest

Linking

References


Getting start

Change the way your app starts

React Native Navigation changes a bit of how React Native works. The biggest difference is how we register the application. We no longer use AppRegistry.registerComponent so we’ll swap out the index.ios.js and index.android.js with the following:

// index.ios.js
import Nav from './src/Nav';
// scr/Nav.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';

registerScreens(); // this is where you register all of your app's screens

// start single-screen based app
Navigation.startSingleScreenApp({
	screen: {
		title: 'Screen One',
		screen: 'example.WelcomeScreen'
	}
});

// or start tab based app
Navigation.startTabBasedApp({
	tabs: [
		{
			label: 'One',
			screen: 'example.FirstTabScreen', // this is a registered name for a screen
			icon: require('../img/one.png'),
			selectedIcon: require('../img/one_selected.png'), // iOS only
			title: 'Screen One'
		},
		{
			label: 'Two',
			screen: 'example.SecondTabScreen',
			icon: require('../img/two.png'),
			selectedIcon: require('../img/two_selected.png'), // iOS only
			title: 'Screen Two'
		}
	]
});

Register all of your screen components

Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered. We recommend doing this in a central place, like screens/index.js.

Since your screens will potentially be bundled with other packages, every screen component in your app must be registered with a unique name! Follow a namespacing convention like packageName.ScreenName.

import { Navigation } from 'react-native-navigation';

import { Provider } from 'react-redux';
import { store } from '../services';

import WelcomeScreen from './WelcomeScreen';
import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
import PushedScreen from './PushedScreen';

// register all screens of the app (including internal ones)
// using redux, pass your store and the Provider object from react-redux
export function registerScreens() {
	Navigation.registerComponent('example.WelcomeScreen', () => WelcomeScreen);
	Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
	Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen, store, Provider);
	Navigation.registerComponent('example.PushedScreen', () => PushedScreen, store, Provider);
}

Navigating Between Screens

If you want to do a navigation action like push a new screen over an existing one, take a look at the Screen API.

In screens that were registered with Navigation you have access to this.props.navigation on which you simply want to “push” a new screen to it.

It would look something like this:

// this would go inside the Component implementation of one of your screens, like FirstTabScreen.js
this.props.navigator.push({
	screen: 'example.PushedScreen',
	title: 'Pushed Screen'
});

Side Drawer

Create a screen-component

It acts as side-drawer in screens/SideDrawer/SideDrawer.js

import React, { Component } from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';

class SideDrawer extends Component {
	render(){
		return (
			<View style={styles.container}>
				<Text>Side drawer</Text>
			</View>
		);
	}
}
export default SideDrawer;

const styles = StyleSheet.create({
	container: {
		flex: 1,
		paddingTop: 25,
		backgroundColor: 'white',
		width: Dimensions.get('window').width * 0.8
	}
});

Register the screen

import SideDrawer from './SideDrawer/SideDrawer';
Navigation.registerComponent('example.SideDrawer', () => SideDrawer);

Setup the drawer configuration

It is a simple JavaScript object. Add this if you want a side menu drawer in your app. It needs to be defined per-screen as following:

Navigation.startTabBasedApp({
	tabs: [
		{
			label: 'One',
			screen: 'example.FirstTabScreen', // this is a registered name for a screen
			icon: require('../img/one.png'),
			selectedIcon: require('../img/one_selected.png'), // iOS only
			title: 'Screen One',
			drawer: {
				left: {
					screen: 'example.SideDrawer'
				}
			}
		},
		{
			label: 'Two',
			screen: 'example.SecondTabScreen',
			icon: require('../img/two.png'),
			selectedIcon: require('../img/two_selected.png'), // iOS only
			title: 'Screen Two',
			drawer: {
				left: {
					screen: 'example.SideDrawer'
				}
			}
		}
	]
});

Using navigation event & toggling the drawer

Adding buttons to the navigator

Nav bar buttons can be defined per-screen by adding static navigatorButtons = {...}; on the screen component definition. This object can also be passed when the screen is originally created; and can be overridden when a screen is pushed.

Navigation.startTabBasedApp({
	tabs: [
		{
			label: 'One',
			screen: 'example.FirstTabScreen', // this is a registered name for a screen
			icon: require('../img/one.png'),
			selectedIcon: require('../img/one_selected.png'), // iOS only
			title: 'Screen One',
			drawer: {
				left: {
					screen: 'example.SideDrawer'
				}
			},
			navigatorButtons: {
				leftButtons: [
					{
						icon: require('../../img/navicon_menu.png'),
						title: 'Menu',
						id: 'SideDrawerToggle'
					}
				]
			}
		}
	]
});

Event listener

Handle onPress events for the buttons by setting your handler with navigator.setOnNavigatorEvent(callback) in each screen-component where you want to handle the event.

class FirstTabScreen extends Component {
	constructor(props){
		super(props);
		this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
	}
	onNavigatorEvent = (event) => {
		switch(event.type){
			case 'ScreenChangedEvent':
				switch(event.id){
					case 'willAppear':
						break;
					case 'didAppear':
						break;
					default:
						break;
				}
				break;

			case 'NavBarButtonPress':
				if(event.id === 'SideDrawerToggle'){
					this.props.navigator.toggleDrawer({
						side: 'left',
					});
				}
				break;

			default:
				break;
		}
	}
}

Modal

Opening a modal is as easy as pushing a new screen onto the stack.

⚠️ **GitHub.com Fallback** ⚠️