How to Make the Screen Refresh when Navigating Back in React Native (TypeScript)

In this blog post, I show you how to make the screen refresh when you navigate back in react native using react navigation library. Most of the react native projects out there prefer react navigation library for the navigation solutions.

Usually, when a user navigates back using the back arrow of the header or hardware back button the screen where you are navigating will not refresh or update. By default, it is done for performance and optimization purposes.

What if you want to make some changes to the screen you are navigating back to? In such cases, you can use Navigation Events API from React Navigation. It has many built-in events such as focus, blur, beforeRemove, state, etc. You can use the focus event so that the focused screen will get refreshed.

Firstly, install the react navigation library to your react native project using the instructions given here.

We will be using Stack Navigator to demonstrate the example. Hence install it using the following command.

npm install @react-navigation/native-stack

You can easily refresh the screen on focus as given below.

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      console.log('Refreshed!');
    });
    return unsubscribe;
  }, [navigation]);

As you see, We used the useEffect hook and the unsubscribe function can be returned as the cleanup function in the effect.

In the following example, I am using react navigation library to navigate from a screen named Screen1 to a screen named Screen2. I have added a listener using the useEffect hook on the Screen1 screen. Inside it, there is an Alert function. The Alert function prompts when the Screen1 screen is focused as well as when navigating back from the Screen2 screen.

I also have a types.ts file as given below. We define two types StackParamList and ScreenProp.

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

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

export type ScreenProp = NativeStackScreenProps<StackParamList>;

Now, import the screens and types into App.tsx file.

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;

If you want to learn more about adding a stack navigator using typescript then see this blog post.

Now let’s add the two screens. Following is the code for Screen1.tsx.

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

const Screen1 = ({navigation}: ScreenProp) => {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      Alert.alert('Refreshed');
    });
    return unsubscribe;
  }, [navigation]);
  return (
    <View style={styles.container}>
      <Button
        onPress={() => {
          navigation.navigate('Screen2');
        }}
        title="Learn More"
        color="#841584"
      />
    </View>
  );
};

export default Screen1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50',
  },
});

Following is the code for Screen2.tsx.

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

const Screen2 = () => {
  return (
    <View style={styles.container}>
      <Text>Go back to test</Text>
    </View>
  );
};

export default Screen2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});

Following is the output of this react native tutorial.

As you see, the alert shows up when you navigating back to Screen1 from Screen2.

If you are a huge fan of React hooks then you may also check out the useFocusEffect hook from react navigation which does a similar task.