react-navigation

2019-10-03

use react-navigation for developing an application.

create react-native project

this blog uses react-native project which composed typescript and styled-components. if you want to know how to apply typescript and styled-components to RN, see previous blogs.

react-navigation installation

react-navigation V4

install react-navigation library via below commands.

npm install --save react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

from react-navigation V4, each navigation is separated other libraries. you need to install the library which you want to use the navigation like below.

react-navigation-stack

you can use the navigations via this library.

  • createStackNavigator
  • StackGestureContext
  • Transitioner
  • StackView
  • StackViewCard
  • StackViewTransitionConfigs
  • Header
  • HeaderTitle
  • HeaderBackButton
  • HeaderStyleInterpolator

Installation command.

npm install --save react-navigation-stack

react-navigation-tabs

you can use the navigations via this library.

  • createBottomTabNavigator
  • createMaterialTopTabNavigator
  • BottomTabBar
  • MaterialTopTabBar

Installation command.

npm install --save react-navigation-tabs

react-navigation-drawer

you can use the navigations via this library.

  • createDrawerNavigator
  • DrawerGestureContext
  • DrawerRouter
  • DrawerActions
  • DrawerView
  • DrawerNavigatorItems
  • DrawerSidebar

Installation command.

npm install --save react-navigation-drawer

after installation, you should connect native modules to execute the command below.

cd ios
pod install
cd ...

react-navigation v3

install react-navigation library via below commands.

npm install --save react-navigation react-native-gesture-handler
npm install --save-dev @types/react-navigation

execute below command to link react-native-gesture-handler library to RN(react-native) project.

react-native link react-native-gesture-handler

how to use

there are many ways to use react-navigation at the official site. if you want to know details, please check below link.

we’ve made the repository about basic usage by following official site. before using react-navigation, if you see this repository, it will help when you get the basic structure.

import Navigation to use.

V4

import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import {
  createBottomTabNavigator,
  createMaterialTopTabNavigator,
} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';

V3

import {
  createSwitchNavigator,
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

createAppContainer

to use react-navigation in App, we should use createAppContainer to Top navigation.

createSwitchNavigator

if App has Login feature, we recommend to use createSwitchNavigator. our Repository uses Switch Navigation to basic navigation.

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading,
      Auth,
      MainNavi,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  )
);

createStackNavigator

this createStackNavigator is the navigator to stack a view to another view. we use this navigation to show full screen view on tab navigation and display another view in tab nabigation.

const MainNavi = createStackNavigator({
  MainTab: {
    screen: MainTab,
    navigationOptions: ({ navigation }) => ({
      header: null,
    }),
  },
  FullDetail,
});

createBottomTabNavigator

we use this createBottomTabNavigator to show tab navigation on the bottom of the screen.

const MainTab = createBottomTabNavigator({
  FirstTabStack,
  SecondTab,
  ThirdTab,
});

switch navigation

we use below code to switch a view to another view.

this.props.navigation.navigate('MainTab');

hide Navigation bar

you can hide navigation bar with below code

...
export default class Home extends React.Component<Props, State> {
  static navigationOptions = { header: null };

  render() {
    return (
      <Container>
        <StyledText>Home screen!</StyledText>
      </Container>
    );
  }
}
...
  • static navigationOptions: you can set navigation options via this variable.
  • { header: null }: hide navigation header bar.

reference

Buy me a coffeeBuy me a coffee
Posts