In researching mobile apps, I have found a library that allows a developer to implement the functionality of handling the navigation side of an app, including the transition of screens and their layouts. This library is called React Navigation. There is also a library called React Native Navigation which has slight differences.
React Navigation does not use the native navigation APIs on iOS and Android, but it recreates subsets of those APIs. This allows the adding of third party JS plugins (since it is written in JavaScript), customization, etc. The main difference of React Native Navigation is that it uses native navigation APIs on iOS and Android.
Installation
The first step is to set up a React Native app, preferably with Expo tools because they allow you to start a project without installing and configuring Xcode or Android Studio.
npm install -g expo-cli
Then:
expo init ProjectName
After you set up your react native project, you install the navigation library.
npm install react-navigation
React Navigation uses a stack navigator to manage the presentation of the screens based on routes the user takes in the app. The screens, as components, are stacked, where navigating to a new screen places it on top of this stack while navigating to backwards removes it from the stack.
Using Stack Navigator
In the components folder, create two files; Homescreen.js and Aboutscreen.js.
// Homescreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class Homescreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => this.props.navigation.navigate('About')}
/>
</View>
)
}
}
// Aboutscreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class Aboutscreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>About Screen</Text>
</View>
)
}
}
In App.js, import what we need from react-navigation and implement the navigation. This is done in the root App.js because the components exported from it serve as the root components for a React Native app and their descendants.
// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: AboutScreen
}
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
createStackNavigator provides a way for our app to transition between screens, where each new screen is placed on top of a stack.
We pass in a route configuration object to the createStackNavigator function. The home and about route each belong to their respective screens.
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: AboutScreen
}
},{
initialRouteName: "Home"
});
The createStackNavigator function is passed, with navigate props to both Home and About screen components, being that the navigate props allow for navigation to specified screen components. Here is an example of it being used on a button at HomeScreen, which leads to the AboutScreen:
<Button title="Go to About"
onPress={() => this.props.navigation.navigate('About')}
/>
There are also other types of navigation like tab and drawer navigation which you can read more about here: https://reactnavigation.org/docs/getting-started/#!
References
Top comments (0)