React Native Navigation WIX
How to install react native navigation RNN, and use side menu, bottom tabs, and top tabs. RNN doesn't support top tabs in v 7.1.1, we will use react-native-tab-view. Also, we will use react-native-navigation-hooks because we will use functional component.
React Native Navigation is a module, dependent on and intended to be used alongside React Native, so some experience with it and knowledge of core concepts is required.
Installation
npm install --save react-native-navigation
Installing with npx rnn-link
If you're using RN 0.60 or higher, you can benefit from autolinking for some of the necessary installation steps. But unlike most other libraries, react-native-navigation requires you to make a few changes to native files.
npx rnn-link
Cocoapods
pod install --project-directory=ios
Index.js
We need to edit index.js. We create three screens home, mosteread amd report screen for bottom tabs and sidemenu screen for drawer.
import React from 'react';
import {Navigation} from 'react-native-navigation';
import HomeScreen from './screens/HomeScreen';
import MostReadScreen from './screens/MostReadScreen';
import SideMenuScreen from './screens/SideMenuScreen';
import ReportScreen from './screens/ReportScreen';
Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('MostRead', () => MostReadScreen);
Navigation.registerComponent('SideMenu', () => SideMenuScreen);
Navigation.registerComponent('Report', () => ReportScreen);
Navigation.setDefaultOptions({
statusBar: { backgroundColor: 'red', },
topBar: {
title: { color: 'white', },
backButton: { color: 'white', },
background: { color: 'red', },
leftButtonColor: 'white',
rightButtonColor: 'white'
},
bottomTab: { fontSize: 13, selectedFontSize: 15, },
});
Navigation.events().registerAppLaunchedListener(async () => { Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
id: 'SideMenu',
name: 'SideMenu',
},
},
center: {
bottomTabs: {
children: [
{ stack: {
children: [{ component: {name: 'Home'}}]
}, },
{ stack: {
children: [{ component: {name: 'Home'}}]
}, },
{ stack: {
children: [{ component: {name: 'Home'}}]
}, },
]
}, }, }, }, });});
For tabs we use react-native-tab-view, and for opening side menu we need react-native-navigation-hooks.
npm install --save react-native-navigation-hooks
npm install --save react-native-tab-view
cd ios, pod install, cd ..
Home.js
import React, {useState, useEffect} from 'react';
import {View, Text, Button, StyleSheet, Dimensions} from 'react-native';
import {Navigation} from 'react-native-navigation';
import {useNavigationButtonPress} from 'react-native-navigation-hooks';
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
const FirstRoute = () => ( <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />);
const SecondRoute = () => ( <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />);
const initialLayout = {width: Dimensions.get('window').width};
const HomeScreen = (props) => {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({ first: FirstRoute, second: SecondRoute, });
useNavigationButtonPress( (e) => {
console.log('Pressed profile button on this screen!');
Navigation.mergeOptions('SideMenu', {
sideMenu: {
left: {
visible: true,
enabled: true,
}, }, }); },
{buttonId: 'sideMenu'}, );
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout} />
)
};
HomeScreen.options = {
topBar: { title: { text: 'Home', },
leftButtons: [ { id: 'sideMenu', }, ],
bottomTab: { text: 'Home'},
};
export default HomeScreen;
const styles = StyleSheet.create({
scene: { flex: 1, }
,});
