DEV Community

Cover image for React Navigation - Getting started!
David Ruiz
David Ruiz

Posted on

React Navigation - Getting started!

In this article, we are going to understand the basic concepts of this popular library and how to make your React Native apps more scalable with navigation.

The resources of this tutorial are available on my GitHub repository. Feel free to fork it and try on your own.๐Ÿš€

Index

  • What is React Navigation?
  • Hello World with React Navigation
  • Where go from here

What is React Navigation?

React Navigation is a library that was born from the need to creating navigations into our React Native apps. As we know in mobile environments there are a lot of ways to navigate into different views, and we can choose what kind of navigation or animation we are going to need. As native platforms do.

This JavaScript-based navigation library uses native drivers for fluid transitions. Also, React Navigation adopts this approach that avoids any required knowledge in Objective C, Swift, Java, Kotlin, allowing you to focus more on the app experience.

Hello World with React Navigation

In this section, we are going to create a very simple Hello World app on React Native with the purpose of learning how to use React Navigation in a simpler way.

Before to start let's init a React Native project using the React Native CLI.

react-native init easyReactNavigation
Enter fullscreen mode Exit fullscreen mode

Inside of the project that was created it's time to install the React Navigation into our package.json file.

npm install -S react-navigation

# Then install the gesture handler.
npm install -S react-native-gesture-handler

# Link the native dependencies.
react-native link react-native-gesture-handler

Enter fullscreen mode Exit fullscreen mode

Next, configure a basic root component using React Navigation. To make it real, you need to import the createStackNavigator which is a function that returns a React Component in this case, the class App, where is exported directly from the App.js.

import { createStackNavigator, createAppContainer } from 'react-navigation'

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Navigation!</Text>
      </View>
    )
  }
}
// Create Stack Navigator gets two props createStackNavigator(routes, config)
const AppNavigator = createStackNavigator({
  Home: App
})
// Container of the app
const AppContainer = createAppContainer(AppNavigator)
export default AppContainer


Enter fullscreen mode Exit fullscreen mode

Run this code and you are going to get a very nice view with a greeting text in the middle of the screen. But, with a little difference, as you can see there is a header. This header is provided by default from the Stack Navigator.

Welcome react navigation

Navigating through views

To create a new view in React Navigation is just that simple like create a new React component with the content. In this exercise, we create a class component with just a simple and flat text in the middle of the screen.

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!๐Ÿค“</Text>
      </View>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

In the Home view let's do a button which has an event that is going to redirect to a new view. For this, let's create a method for onPress event which is in charge to use the navigation props to go to the new view.

class App extends React.Component {
  // On Press event 
  onPress = () => {
    // Navigate to the HelloWorld view
    this.props.navigation.navigate('HelloWorld')
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Welcome to React Navigation!</Text>
        <Button 
          title="Tap me ๐Ÿ˜„"
          onPress={this.onPress}
        />
      </View>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Don't forget to import the new view into the Stack Navigator.

const AppNavigator = createStackNavigator({
  Home: App,
  HelloWorld
})
Enter fullscreen mode Exit fullscreen mode

The Stack Navigator provides a transition between screens were each new screen is placed on the top of the stack and it works exactly like a call stack.

Finally, here's the final result! ๐ŸŽ‰

final app result

Where go from here

This article was just a simple started into the huge library that is React Navigation. You can take a pretty cool look to the official documentation. Also, you can follow me here on dev.to as well as on Instagram and Twitter!

Top comments (1)

Collapse
 
jbernibe profile image
jbernibe

Hello my friend,i did all your explain, but it doesnt work for me, i inclusive did the procedure of the official page react navigator 4X (reactnavigation.org/docs/en/gettin...) , but dont work, Ijust can do work it with expo, but i want to do it without expo, you think this can should to the version of something dependences?

My dependences are the follow:
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.4",
"react-native-gesture-handler": "1.5.0",
"react-navigation": "4.0.10"
},
"devDependencies": {
"@babel/core": "7.7.2",
"@babel/runtime": "7.7.2",
"@react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.6.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.57.0",
"react-test-renderer": "16.9.0"
},

Please can you help me with this, I take several days without get solution.

You have any simple example with react-navigation in github ?

PD: My project runs normal without the react-navigator, but throws error when I add the react-navigator.

Thanks in advance.
Juan.