In this article, I will introduce what types of navigators are in react-navigation v3 and how to use them. I’ve previously posted example for react-navigation v2 and this is just the update for previous post.
SwitchNavigator
- Only show one screen at a time.
- When navigate, it reset screen immediately without animation.
import { createSwitchNavigator } from 'react-navigation';import Switch1 from '../screen/Switch1';
import Switch2 from '../screen/Switch2';export default createSwitchNavigator(
{
Switch1: Switch1,
Switch2: Switch2,
},
{
initialRouteName: 'Switch1',
},
);
- Contains screens as a stack.
- Recommended to place this at the root of screens which should navigate in between.
import { createStackNavigator } from 'react-navigation';import Switch1 from '../screen/Switch1';
import Switch2 from '../screen/Switch2';export default createStackNavigator(
{
Switch1,
Switch2,
},
{
initialRouteName: 'Switch1',
headerMode: 'none',
},
);
- TopTabNavigator is deprecated and it is recommended to use this one instead in v2.
- TabNavigator has its indicator placed at the top which should be draggable.
- Basic material design is applied as default.
import React from 'react';
import {
Platform,
Image,
View,
Text,
AsyncStorage,
BackHandler,
StyleSheet,
} from 'react-native';import { ratio, colors } from '../../utils/Styles';
import { createMaterialTopTabNavigator } from 'react-navigation';import Screen1 from '../screen/Screen1';
import Screen2 from '../screen/Screen2';
import Screen3 from '../screen/Screen3';
import Screen4 from '../screen/Screen4';const MyNavigator = createMaterialTopTabNavigator(
{
Screen1,
Screen2,
},
{
navigationOptions: ({ navigation, screenProps }) => ({
header: null,
headerMode: 'none',
tabBarVisible: true,
tabBarLabel: () => {
const { routeName } = navigation.state;
switch (routeName) {
//
}
return <Text>{routeName}</Text>;
},
}),
animationEnabled: false,
swipeEnabled: true,
tabBarOptions: {
activeTintColor: 'rgb(12,157,197)',
inactiveTintColor: 'black',
indicatorStyle: {
backgroundColor: 'rgb(102,134,205)',
},
labelStyle: {
fontSize: 14 * ratio,
color: 'tomato',
},
tabStyle: {
height: 48,
alignItems: 'center',
justifyContent: 'center',
},
style: {
backgroundColor: 'white',
},
statusBarStyle: 'light-content',
},
},
);type Props = {};
type State = {};class Page extends React.Component<Props, State> {
static router = MyNavigator.router;
render() {
return (
<MyNavigator
navigation={this.props.navigation}
/>
);
}
}export default Page;
- Be sure that you should include
static router = MyNavigator.router;and passnavigationprops toNavigatorwhen you wrapNavigatorinside React.Component. - Link
- TabNavigator which indicator is placed at the bottom.
- Default TabBar style normally found in may apps.
import React from 'react';
import { Text, View, Image } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';import Screen1 from '../screen/Screen1';
import Screen2 from '../screen/Screen2';
import Screen3 from '../screen/Screen3';
import Screen4 from '../screen/Screen4';import { IC_MASK } from '../../utils/Icons';const BottomTabNavigator = createBottomTabNavigator(
{
Screen1,
Screen2,
Screen3,
Screen4,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
return <Image style={{
width: 24,
height: 24,
}} source={IC_MASK}/>;
},
}),
tabBarLabel: {
},
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
// showLabel: false,
},
}
);export default BottomTabNavigator;
- One of popular navigator used to have in android platform.
import React from 'react';
import {
Image,
Button,
} from 'react-native';
import { createDrawerNavigator } from 'react-navigation';import Screen1 from '../screen/Screen1';
import Screen2 from '../screen/Screen2';
import Screen3 from '../screen/Screen3';
import Screen4 from '../screen/Screen4';import { IC_MASK } from '../../utils/Icons';// Notification component
class MyDrawer extends React.Component {
static defaultNavigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image
source={IC_MASK}
style={{
width: 24,
height: 24,
}}
/>
),
}; render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}// Drawer Navigator
const MyApp = createDrawerNavigator({
Screen1,
Screen2,
Screen3,
Screen4,
Notifications: {
screen: MyDrawer,
},
});export default MyApp;
- Bottom tab navigator which indicator is placed at the bottom.
- Material design is applied to navigator.
- To use this navigator, you should install additional packages.
- Post Installation
npm install -S react-navigation-material-bottom-tabs
npm install -S react-native-vector-icons
react-native link react-native-vector-icons
import React from 'react';
import {
Platform,
Image,
View,
Text,
AsyncStorage,
BackHandler,
StyleSheet,
} from 'react-native';import { ratio, colors, statusBarHeight } from '../../utils/Styles';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';import { IC_MASK } from '../../utils/Icons';import Screen1 from '../screen/Screen1';
import Screen2 from '../screen/Screen2';
import Screen3 from '../screen/Screen3';
import Screen4 from '../screen/Screen4';const MyNavigator = createMaterialBottomTabNavigator({
Screen1,
Screen2,
Screen3,
Screen4,
}, {
initialRouteName: 'Screen1',
activeTintColor: '#f0edf6',
inactiveTintColor: '#3e2465',
barStyle: { backgroundColor: '#694fad' },
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
return <Image style={{
width: 24,
height: 24,
}} source={IC_MASK}/>;
},
}),
});export default MyNavigator;
Last but not least, you can also create your own navigator.
- Make your own navigator using
createCustomNavigator.
import React from 'react';
import {
View,
Text,
TouchableOpacity,
Button,
} from 'react-native';import { createNavigator, SwitchRouter, createNavigationContainer, SceneView } from 'react-navigation';import Screen1 from '../screen/Screen1';
import Screen2 from '../screen/Screen2';
import Screen3 from '../screen/Screen3';
import Screen4 from '../screen/Screen4';
import { screenWidth } from '../../utils/Styles';const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
tab: {
height: 56,
width: screenWidth,
position: 'absolute',
bottom: 0,
flexDirection: 'row',
justifyContent: 'space-around',
},
txt: {
padding: 20,
fontSize: 15,
}
};function createCustomNavigator(routeConfigMap, config = {}) {
let router = SwitchRouter(routeConfigMap, config);
let NavigatorComponent = createNavigator(
NavigationView,
router,
config,
);
return createNavigationContainer(NavigatorComponent);
}class NavigationView extends React.Component {
componentDidMount() {
console.log('componentDidMount', this.props);
}render() {
let { state } = this.props.navigation;
let activeKey = state.routes[state.index].key;
let descriptor = this.props.descriptors[activeKey];
let ScreenComponent = descriptor.getComponent(); return (
<View style={{ flex: 1 }}>
<SceneView
component={ScreenComponent}
navigation={descriptor.navigation}
screenProps={this.props.screenProps}
/>
<View style={styles.tab}>
{state.routes.map(({ routeName, key }) => (
<Button
key={key}
onPress={() => this.props.navigation.navigate(routeName)}
title={routeName}
/>
))}
</View>
</View>
);
}
}export default createCustomNavigator({
Screen1,
Screen2,
Screen3,
Screen4,
});
What you’ve covered is listed below. You can also find repo for this one.
Originally published at medium.com on July 12, 2018.
