react-navigation

react-navigation V5
create react-native project
react-navigation installation
how to use
hide Navigation bar
reference

I’ve written a blog post about react-navigation version 5. If you want to know how to use it, see the link below.

react-navigation-v5

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.

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.

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

you can use the navigations via this library.

createBottomTabNavigator
createMaterialTopTabNavigator
BottomTabBar
MaterialTopTabBar

Installation command.

npm install --save react-navigation-tabs

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 ...

install react-navigation library via below commands.

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

link react-native-gesture-handler library

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.

official site: https://reactnavigation.org/docs

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.

react-navigation-exercise V4: https://github.com/dev-yakuza/react-navigation-v4-exercise
react-navigation-exercise V3: https://github.com/dev-yakuza/react-navigation-exercise

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,
});

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

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

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

official site: react-navigation

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.