/  Technology   /  Navigating between app screens with React Native- Native Stack Navigator
Navigating between app screens with React Native- Native Stack Navigator

Navigating between app screens with React Native- Native Stack Navigator

 

Working with the front-end development task also involves building the app screen. On this note, if you are using React Native framework for your app-building criteria, you should never miss using the createNativeStackNavigator component. With this component, you can embed a native feel to your app and easily stack one screen on the other.

What is the use case of Stack Navigator?

Stack Navigator is a functionality that you can add to your app for easy navigation between screens. You can stack one screen over the other. Even though you can get a similar feel to iOS and Android, I will recommend customizing while adding the functionality of Stack Navigator to your app. If you want to add this feature to a Web page, you have to get the react-native-web in your project directory.

Also, in the present project, we will be installing @react-navigation/native-stack and not @react-navigation/stack. Although @react-navigation/stack can provide more dynamism to your app’s UI, given the requirements of our project, I will be using @react-navigation/native-stack.

Three contexts to be considered in Prior

1.Environment setup– You can skip this step if you have already worked with the React Native framework. However, if you are new to this development framework, you have to start with the environment setup process.  In this step, you have to get software such as Node.js, Android studio, and maybe a code editor. Since  I already have a reference article for this explaining the entire process in detail, you can learn it from there. Check the linked article. If you are still confused, you can take assistance from the experts of React Native app development company.

2.Make a Project template– The second task to start with the project is to create a template.

For this, create a folder in your local C drive and open cmd from the folder. To create the template, you need to run npx react-native init Stack_Navigator –version 0.68.1 on the cmd. Here, Stack_Navigator is the name of the project where you have to embed the code and link the third-party plugin.

3.Installing dependencies– For the project, you need third-party plugins. This way, you don’t have to create the components from scratch but can simply import the components and use them on the codebase.

Following are the plugins that you need to install and link to your app.

  • @react-native-screens
  • @react-native-masked-view/masked-view
  • @react-native-safe-area-context
  • @react-navigation/native
  • @react-navigation/native-stack

Creating the files and codebase for the Stack Navigator

For this project, we will need four files namely Home.js, About.js, Contact.js, and App.js. Let’s see how we can build all four files.

Home.js file

n1

Image 1

Import the components: TouchableOpacity, Image, View, Text, and StyleSheet.  You can get this from the react-native library.

n2

Image 2

The code creates a new component, NavigationPage. It has an onClick event that will allow the user to navigate to the About page.

n3

Image 3

The code then creates a new View element of the container. It sets its style to styles. container.

The view also contains two Text and Image objects. One for displaying text on the Home screen and another for displaying an image from Pinimg.com. The text in the button is styled to be black and the background of the button is set to white.

TouchableOpacity is used to allow users to interact with the button, which has the text element ‘Open Page’ on it.

An onPress prop is used with the button which will call the NavigationPage function.

n4

Image 4

This code line in mage 4 is used to export the Home component.

n5

Image 5

n6

Image 6

Code snippets shown in images 5 and 6 show how you can use the StyleSheet component of React Native and style the objects container, FullBack_width, btn_text, create_btn, image, and Navigation_text.

 

Heading towards the next file, i.e., the About.js file.

About.js file

You have to create a file with the name About.js  in your project root directory.

i

Image 7

Import components mentioned in image 7. For this, you have to add the line as shown in image 7.

i7

Image 8

The code creates an About component. It returns the navigationPage() function.  It is used to navigate back to the previous page.

Image 9

NextPage() function is used to allow users to navigate to the Contact screen.

i9

Image 10

Here, the code returns the View component to hold a button, a text element, and an image from a specified source.

The view component has two child components, one of which is another view component and the other is an image. The second child also has two children, one of which is a touchable opacity component, which is used to create the button ‘Back Page’. The other is another touchable opacity component, which is used to build another button ‘Next Page’.

i10

Image 11

To ensure that you can use it in the App.js file, you have to export the About component.

i11

Image 12

For the styling part, consider the snippet shown in image 12.

Contact.js file

This is a simple contact screen with the text ‘Contact’ on it.  So for this, consider the below-given snippet.

i12

Image 13

Import the core React Native components mentioned. Then create a Contact component. Return the View and Text component to hold the main contact screen and the text: ‘Contact’ in it.

Also, at last, you have to export this Contact component.

App.js file

This is the main file of the project. You can consider it as an execution file where we will combine all the created .js files and move toward program execution.

i13

Image 14

You have to import the Home, Contact, and About components. Also, import the createNativeStackNavigator and NavigationContainer from @react-navigation/native-stack and @react-navigation/native respectively.

i14

Image 15

It creates the navigation stack. createNativeStackNavigator() is a function that is used to build the stack object. This stack object is further used to build the navigator. The navigator calls the three screens (Contact, About, and Home Page). An independent component for each screen is used. It will be shown when the user navigates to each of these screens.

As we are done with the codebase, we will move forward to the next step.

Code Execution on the emulator

Open the template that you have created. Run cmd from the template. You have to pass two commands: npm install and npx react-native run-android. This will start your virtual device.

i15

Image 16

i16

Image 17

i17

Image 18

For the output, you can consider images 16, 17, and 18. There are buttons that are clickable and will allow users to navigate between all the screens created for this project.

Hope, you have enjoyed using the Stack Navigator functionality in your React Native app.

 

Leave a comment