Andre DiCioccio

Law, Technology and Finance

How to create a react-navigation StackNavigator

In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn’t have a built-in idea of a global history stack like a web browser does — this is where React Navigation enters the story.

React Navigation’s StackNavigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one StackNavigator then it is conceptually similar to how a web browser handles navigation state – your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation’s StackNavigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

All we need to get started using React Navigation is a StackNavigator.

 

Creating a StackNavigator

StackNavigator is a function that returns a React component. It takes a route configuration object and, optionally, an options object (we omit this below, for now). Because the StackNavigator function returns a React component, we can export it directly from App.jsto be used as our App’s root component.

 

// In App.js in a new project 
import React from 'react'; 
import { View, Text } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
class HomeScreen extends React.Component { 
  render() { 
    return ( 
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>Home Screen</Text> 
      </View> 
    ); 
} } 

export default createStackNavigator({ 
  Home: { 
    screen: HomeScreen, 
  }, 
});

If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your HomeScreen component. The styles you see for the navigation bar and the content area are the default configuration for a StackNavigator.

 

 

Related articles

Apple Mac Keyboard Shortcuts and Symbols

Hi there, How many times have you looked at the Apple menu or some instructions and wondered what the keyboard symbols mean? I have been using Apple products for about 20 years now and still wonder what the little option symbol relates to on the keyboard. Here is a quick-reference that hopefully will assist some […]

Learn More

ECMA Script Block Scoped Declarations

ECMA Script 6 has introduced the ability to use const and let instead of var to declare local variables. The main benefit of this is that const and let are scoped to the block level (meaning their scope is confined to a blocked deliminated with curly brackets). A further benefit of this new syntax is […]

Learn More

JavaScript ES7 Static Class Properties

In ES6 you can declare static functions which apply to ES6 classes but ES7 adds the ability to declare static properties also. A static property can be useful in a large number of situations, such as the following (contrived example): class Cat { static legCount = 4 } console.log(Cat.legCount) // 4  

Learn More

Leave a Reply

Your email address will not be published. Required fields are marked *