Estimated reading time: 3 minutes
According to the React Native Navigation documentation, the StackNavigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
Unlike the web browser, react native doesn’t have a built-in API to handle screen navigation. If you want to make use of navigation in your project, you will have to specify what type of navigation you want to use and add the respective dependencies.
The StackNavigator in React Native provides a way for your app to transition between screens and manage navigation history.
Here are the steps you can take to quickly create a React Native Stack Navigator, fast and easy.
Navigation in React is a little different from what is generally obtainable, especially in HTML where you just have to wrap the url or the file path in anchor tags. In React, however, you have to make sure that you have added the needed dependencies. These include the navigation dependency, gesture handler, masked view as well as the stack navigator itself.
To put it simply, for every component that you want to use in React Native, you will need to make sure there is a supported dependency for it.
On your terminal or command prompt, cd to your project folder and add the following:
yarn add @react-native-community/masked-view
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-safe-area-context
yarn add react-navigation
yarn add react-navigation-stack
Next we will create a Home, About and Contact screens. But first let us create a folder called screens.
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class Home extends Component {
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={styles.textStyle}>Home</Text>
<Text
style={styles.textStyle}
onPress={() => this.props.navigation.navigate('About')}>
About
</Text>
<Text
style={styles.textStyle}
onPress={() => this.props.navigation.navigate('Contact')}>
Contact
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
textStyle: {
fontSize: 22,
},
});
export default Home;
import React, { Component } from "react";
import { View, Text } from 'react-native';
class About extends Component{
render(){
return(
<View style={{flex:1, flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
<Text style={{fontSize: 22}}>
About us
</Text>
</View>
)
}
}
export default About;
import React, { Component } from "react";
import { View, Text } from 'react-native';
class Contact extends Component {
render(){
return(
<View>
<Text>
Contact
</Text>
</View>
)
}
}
export default Contact;
Finally we will create a folder called routes and add the Stack.js file
import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import About from "../screens/About";
import Contact from "../screens/Contact";
import Home from "../screens/Home";
class Stack extends Component{
render(){
return(
<AppContainer />
)
}
}
const myStack = createStackNavigator({
'Home' : Home,
'About' : About,
'Contact' : Contact
}, {
initialRouteName: 'Home'
});
const AppContainer = createAppContainer(myStack)
export default Stack;
Congratulations! You have successfully created a React Native Stack Navigator.
Introduction: Node.js and PHP are both popular server-side options with unique attributes. Knowing when to…
Neumorphism design, alternatively termed as "soft UI" or "new skeuomorphism," represents a design trend that…
Debugging JavaScript code can sometimes be challenging, but with the right practices and tools, you…
Service Workers are one of the core features of modern web applications, offering powerful capabilities…
A database-driven website is a dynamic site that utilizes a database to store and manage…
Toasts are user interface elements commonly used in software applications, especially in mobile app development…