How to Navigate from One Screen to Another in React Native (TypeScript)

Navigation is a crucial aspect of any mobile application. It enables users to move seamlessly between different screens and access the information and features they need. In this blog post, let’s learn how to navigate from one screen to another.

Even though there are some navigation libraries, react navigation is the most popular navigation library for react native. Before proceeding, install the library into your react native project using the instructions given here.

We use the stack navigator to navigate from one screen to another. Install the stack navigator using any of the commands given below.

npm install @react-navigation/native-stack

or

yarn add @react-navigation/native-stack

First of all, create two screens by creating two files- Screen1.tsx and Screen2.tsx.

The code of Screen1.tsx is given below.

import {Text, View} from 'react-native';
import React from 'react';

const Screen1 = () => {
  return (
    <View>
      <Text>screen1</Text>
    </View>
  );
};

export default Screen1;

Similarly, following is the code of Screen2.tsx

import {Text, View} from 'react-native';
import React from 'react';

const Screen2 = () => {
  return (
    <View>
      <Text>Screen2</Text>
    </View>
  );
};

export default Screen2;

Now, let’s get into the code for App.tsx.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Screen1 from './screen1';
import Screen2 from './Screen2';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Here, we imported already created two screens. The NavigationContainer component manages the navigation tree and we have make it the top most parent.

A Stack constant is created using the createNativeStackNavigator function. Thus we can create a stack-based navigator that allows the user to navigate between screens by pushing and popping screens from a stack.

It has two Stack.Screen components, one for each of the imported screens. Each screen is given a name prop and a component prop. The name prop is used to identify the screen, while the component prop is the component that should be rendered for that screen.

Now, we have to add type checks. Create a new file named types.ts and add the following code.

import type {NativeStackScreenProps} from '@react-navigation/native-stack';

export type StackParamList = {
  Screen1: undefined;
  Screen2: undefined;
};

export type ScreenProp = NativeStackScreenProps<StackParamList>;

Here, we defines two types StackParamList and ScreenProp. StackParamList type is used to define the set of screens with parameters. As we don’t use stack navigation parameters here, the values for both screens are given as undefined.

ScreenProp is a type that extends the NativeStackScreenProps type and it uses the StackParamList type to specify the possible screens that can be navigated to within the stack navigator, and without specifying the second parameter it is expecting to receive all the route names from the Stack Navigator defined in the App.tsx.

Modify the App.tsx file as given below by importing and adding StackParamList type.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {StackParamList} from './types';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const Stack = createNativeStackNavigator<StackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

The setup is over and now we want to do the real navigation from Screen1 to Screen2. For that, a button is added to the Screen1 and also we import and use ScreenProp type. See the modified Screen1.tsx file.

import {Text, View, Button} from 'react-native';
import React from 'react';
import {ScreenProp} from './types';

const Screen1 = ({navigation}: ScreenProp) => {
  return (
    <View>
      <Text>screen1</Text>
      <Button title="Click Me" onPress={() => navigation.navigate('Screen2')} />
    </View>
  );
};

export default Screen1;

That’s it. That’s how you add stack navigation in your react native project using typescript.

Following is the output.

How to Pass Data from One Screen to Another in React Native (TypeScript)

Now, we want to pass a data from Screen1 to Screen2. As you seen earlier we have given undefined values when defining StackParamList type. Here, we have to modify types.ts as given below.

import type {NativeStackScreenProps} from '@react-navigation/native-stack';

export type StackParamList = {
  Screen1: undefined;
  Screen2: {username: string};
};
export type Screen1Prop = NativeStackScreenProps<StackParamList, 'Screen1'>;
export type Screen2Prop = NativeStackScreenProps<StackParamList, 'Screen2'>;

As you see, we intend to pass the username data from Screen1 to Screen2. Now, modify the Screen1.tsx file.

import {Text, View, Button} from 'react-native';
import React from 'react';
import {Screen1Prop} from './types';

const Screen1 = ({navigation}: Screen1Prop) => {
  return (
    <View>
      <Text>screen1</Text>
      <Button
        title="Click Me"
        onPress={() => navigation.navigate('Screen2', {username: 'John'})}
      />
    </View>
  );
};

export default Screen1;

Here, when the button is pressed we also pass the data while navigating.

Now see Screen2.tsx.

import {Text, View} from 'react-native';
import React from 'react';
import {Screen2Prop} from './types';

const Screen2 = ({route}: Screen2Prop) => {
  return (
    <View>
      <Text>username: {JSON.stringify(route.params.username)}</Text>
    </View>
  );
};

export default Screen2;

The Screen2 accepts the data and show it as text after stringify.

Following is the output.

That’s how you add stack navigation with typescript in your react native project.