For many of complex react native applications that consist of multiple screens, navigation is indispensable. Firstly be sure to install the essential libraries for navigation. For each react navigators you should install separate react navigation libraries.

Before starting to use stack navigator following installation commands should be run

npm install @react-navigation/stack

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

In a stack navigator, new screen is placed on top. It gives an opportunity to go back to previous screen and navigate between screens with its additional properties provided by stack navigation.

After installing steps, a separate navigation folder under the project…

useCallback function is used to prevent or restrict the re-creation of functions. One common case is using this function with React.memo (or shouldComponentUpdate in class based components) to improve the performance issues. This is especially crucial during rendering of large number of components needlessly.

In theory, we can use the trick mentioned above every time, but it does not always bring an optimal solution to performance. Be aware that there is an overhead of checking props for change in child components when memo or shouldComponentUpdate is used. …

Adding Listener to Drawer Navigator Routes

Unlike stack navigators, screens of drawer navigators are not destroyed and recreated, when the user close and re-opens these screens. These may cause some problems like the data is not updated although the component is rendered. These kind of problems can be solved by adding listeners to the routes of drawer navigators.

We can illustrate this situation with a simple example. Suppose ScreenA and ScreenB are the route components of your drawer navigator. Each component has a counter value initialized to 0, and a function that increments the counter value by 1. …

In functional component’s navigation settings, we cannot take dynamically changing parameters directly from navigation data.

Suppose a functional component has a header button which takes information entered by user. In order to get the latest information given by the user, by using setParams() function, parameters can be passed to navigation options when user enters these values.

import React,{useState, useEffect, useCallback} from “react”;
import {TextInput} from “react-native”;
const foo = props => { const [name, setName]=useState(“”);
const handlerFunc=useCallback(()=>{
//when header button is pressed
},[name]) //never be recreated to avoid infinite loop
useEffect(()=> {props.navigation.setParams({handler:handlerFunc})},[handlerFunc]) return(
<TextInput value={name} onChangeText {(name)=>setName(name)}/>

In order to get the parameter from the component part use getParam()

foo.navigationOptions=navigationData=>{const handler=navData.navigation.getParam(“handler”);return {   headerRight:(<HeaderButtons 
HeaderButtonComponent= {YourHeaderButtonComponent}>

First step is to install the latest version of Node.js. Since Expo-CLI makes it easy to implement a mobile application with react native many react native projects use Expo.

You can install expo with the following command line:

sudo npm install expo-cli — global

After installation completed, in terminal, you can go to the place where your project will be located in.

Following command can be used to create an initial project:

expo init project_name

You can choose blank template and press enter. This will take some minutes.

After the project is created you can change directory to the newly…

Since functional components are simpler in terms of syntax, reading and testing, they are commonly preferred. Although they have some advantages over class components, they had been called stateless until the usage of Hooks with React. After React v.16.8 versions, with useState Hooks, functional components can be stateful while maintaining their benefits such as simplicity in writing and testing, more focusing on the separation of container and presentation.

A simple functional component can be given as an example as follows:

import React from ‘react’;import {StyleSheet, Text, View} from ‘react-native’;const HelloWorld = () => {   return (      <View style={styles.container}>

Merve Dilek

Computer Engineer / Bilkent University-2008

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store