Same post for react-navigation v4
Introduction
One of the most important aspects of any application is navigation. Unless your application is truly one single screen, your user is going to have to click to navigate around and this requires a good navigation library. There are a few popular options in the React-Native world but the most popular, and the one recommended in Facebook’s React-Native documentation, is React Navigation. The library just underwent a huge rewrite with v5 which is currently inalpha , but we will use this is the library throughout this post and cover how to use it for common navigation scenarios.
IMPORTANT NOTE
I currently can’t get the gestures to work for the drawer so if you need a drawer I would avoid upgrading to v5.
What are Navigators?
The main concept behind React Navigation is navigators. The app will essentially be a chain of navigators that define the app’s screens and flow between them. There are multiple navigation types and each has its configuration options.
It is up to you to decide which navigator or navigators fit best in your app. You are not limited to just using one and they can even be embedded in one another (e.g. a stack navigator embedded in a tab navigator).
For our demo app we will be making an app with a tab navigator with three tabs. The first tab is simply a normal screen component, the second tab will have a stack navigator embedded with two buttons, “Red” and “Blue, that lead to a screen of the color clicked. The second tab has a drawer navigator with a screen containing a button to trigger the drawer.
Initialize Project
npx react-native init magellan--template react-native-template-typescriptcdmagellangit initgit add-Agit commit-m"react-native init"Install Supporting Libraries
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-contextiOS
cdios/podinstallcd ..Android
// android/app/build.gradle...dependencies{...implementation'androidx.appcompat:appcompat:1.1.0-rc01'implementation'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'...}...// android/app/src/main/java/com/<PROJECT_NAME>/MainActivity.java...importcom.facebook.react.ReactActivityDelegate;importcom.facebook.react.ReactRootView;importcom.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;...publicclassMainActivityextendsReactActivity{...@OverrideprotectedReactActivityDelegatecreateReactActivityDelegate(){returnnewReactActivityDelegate(this,getMainComponentName()){@OverrideprotectedReactRootViewcreateRootView(){returnnewRNGestureHandlerEnabledRootView(MainActivity.this);}};}...}Install React-Navigation Core
yarn add @react-navigation/core@next @react-navigation/native@nextInstall Stack Navigator
yarn add @react-navigation/stack @react-native-community/masked-viewiOS
cdios/podinstallcd ..Install Tab Navigator
yarn add @react-navigation/bottom-tabsInstall Drawer Navigator
yarn add @react-navigation/drawerExample App
App
// App.tsximportReactfrom'react';import{NavigationNativeContainer}from'@react-navigation/native';import'react-native-gesture-handler';import{enableScreens}from'react-native-screens';importTabNavigatorfrom'./src/navigators/TabNavigator';// Enable react-native-screens for performance improvementsenableScreens();// Import main Navigator & wrap it in NavigationNativeContainerconstApp=()=>(<NavigationNativeContainer><TabNavigator/></NavigationNativeContainer>);exportdefaultApp;Navigators
TabNavigator
// src/navigators/TabNavigator.tsximportReactfrom'react';import{createBottomTabNavigator}from'@react-navigation/bottom-tabs';// Import ComponentsimportHomeScreenfrom'../screens/HomeScreen';importColorStackNavigatorfrom'./ColorStackNavigator';importDrawerNavigatorfrom'../navigators/DrawerNavigator';// Initialize Bottom Tab NavigatorconstBottomTabs=createBottomTabNavigator();// Create TabNavigator with three tabsconstTabNavigator=()=>(<BottomTabs.Navigator><BottomTabs.Screenname="Home"component={HomeScreen}/><BottomTabs.Screenname="Color"component={ColorStackNavigator}/><BottomTabs.Screenname="Drawer"component={DrawerNavigator}/></BottomTabs.Navigator>);exportdefaultTabNavigator;ColorStackNavigator
importReactfrom'react';import{createStackNavigator}from'@react-navigation/stack';// Import ComponentsimportChooseColorScreenfrom'../screens/ChooseColorScreen';importColorScreenfrom'../screens/ColorScreen';// Make type for the screens and paramsexporttypeColorStackNavigatorParamList={ChooseColor:undefined;Color:{color:'blue'|'red'};};// Initialize StackNavigator with the created typeconstStack=createStackNavigator<ColorStackNavigatorParamList>();// Create ColorStackNavigator with two screensconstColorStackNavigator=()=>(<Stack.Navigator><Stack.Screenname="ChooseColor"component={ChooseColorScreen}options={{title:'Choose Color'}}/><Stack.Screenname="Color"component={ColorScreen}options={({route})=>({title:route.params.color})}/></Stack.Navigator>);exportdefaultColorStackNavigator;DrawerNavigator
importReactfrom'react';import{createDrawerNavigator}from'@react-navigation/drawer';// Import ComponentsimportDrawerScreenfrom'../screens/DrawerScreen';importOtherScreenfrom'../screens/OtherScreen';// Make type for the screens and paramsexporttypeDrawerNavigatorParamList={Drawer:undefined;Other:undefined;};// Initialize DrawerNavigator with the created typeconstDrawer=createDrawerNavigator<DrawerNavigatorParamList>();// Create DrawerNavigator with two screensconstDrawerNavigator=()=>(<Drawer.Navigator><Drawer.Screenname="Drawer"component={DrawerScreen}/><Drawer.Screenname="Other"component={OtherScreen}/></Drawer.Navigator>);exportdefaultDrawerNavigator;Currently the gesture-handler doesn’t seem to be working so you can’t slide the drawer out or tap it away. It is an ongoing issue so I will update when I find a solution.
Screens
HomeScreen
constHomeScreen=()=>{return(<Viewstyle={styles.container}><Text>Welcome!Trynavigatingwiththeothertabs.</Text></View>);};ChooseColorScreen
importReactfrom'react';import{StackNavigationProp}from'@react-navigation/stack';import{ColorStackNavigatorParamList}from'../navigators/ColorStackNavigator';import{StyleSheet,View,Button}from'react-native';// Make type for screen navigation propstypeChooseColorScreenNavigationProp=StackNavigationProp<ColorStackNavigatorParamList,'ChooseColor'>;// Make type for screen propstypeProps={navigation:ChooseColorScreenNavigationProp;};constChooseColorScreen=({navigation}:Props)=>(<Viewstyle={styles.container}><Buttontitle="Red"onPress={()=>navigation.navigate('Color',{color:'red'})}/><Buttontitle="Blue"onPress={()=>navigation.navigate('Color',{color:'blue'})}/></View>);...exportdefaultChooseColorScreen;ColorScreen
importReactfrom'react';import{RouteProp}from'@react-navigation/core';import{ColorStackNavigatorParamList}from'../navigators/ColorStackNavigator';import{View}from'react-native';// Make type for screen route proptypeColorScreenRouteProp=RouteProp<ColorStackNavigatorParamList,'Color'>;// Make type for screen propstypeProps={route:ColorScreenRouteProp;};constColorScreen=({route}:Props)=>{const{color}=route.params;return<Viewstyle={{flex:1,backgroundColor:color}}/>;};exportdefaultColorScreen;DrawerScreen
importReactfrom'react';import{DrawerNavigationProp}from'@react-navigation/drawer';import{DrawerNavigatorParamList}from'../navigators/DrawerNavigator';import{StyleSheet,View,Button}from'react-native';// Make type for screen navigation propstypeDrawerScreenRouteProp=DrawerNavigationProp<DrawerNavigatorParamList,'Drawer'>;// Make type for screen propstypeProps={navigation:DrawerScreenRouteProp;};constDrawerScreen=({navigation}:Props)=>{return(<Viewstyle={styles.container}><Buttontitle="Click this text or swipe in from the left to toggle the drawer"onPress={()=>navigation.toggleDrawer()}/></View>);};...Currently the gesture-handler doesn’t seem to be working so you can’t slide the drawer out or tap it away. It is an ongoing issue so I will update when I find a solution.
OtherScreen
...constOtherScreen=()=>{return(<Viewstyle={styles.container}><Text>Iamanotherscreen!</Text></View>);};...Currently the gesture-handler doesn’t seem to be working so you can’t slide the drawer out or tap it away. It is an ongoing issue so I will update when I find a solution.
Conclusion
Navigation is really important for basically every app and thankfully React-Navigation makes quick, beautiful routing management and animated transitions a cinch. This post only covered the basics of how to use these main navigators but it should be enough to get you started. Even though v5 is in alpha right now, the only problem I have seen is the drawer gesture control. v5 adds a huge improvement in the structure of the navigators, making it more declarative and “Reacty”. Also the Typescript support is much better with the types in v4 being hard to work with.
When you need to start styling your navigation bars, adding icons, or whatnot, head over to the beautiful React-Navigation documentation. As I mentioned in the post, gestures are currently not working on the DrawerNavigator. I will update the post when I find a solution.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
