How to Make Screen Refresh when Navigating Back in React Native?

Hi Guys,

Today our leading topic is how to make screen refresh when navigating back in react native. this example will help you react native refresh previous screen on go back navigation example. it's simple example of how to create screen refresh when navigating back in react native. We will use how to implement refresh previous screen on go back navigation. Follow bellow tutorial step of how to use screen refresh when navigating back in react native.

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 focussed screen will get refreshed.

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

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: Install and Setup

Firstly, install the react navigation library to your react native project using the following command.

npm install @react-navigation/native

React navigation is dependent on some other libraries. So install them using the following command.

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

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

npm install @react-navigation/stack

Now, you have to add the following line at the top of your entry file, that is index.js file.

import 'react-native-gesture-handler';

Step 3: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './Screens/HomeScreen';
import TestScreen from './Screens/TestScreen';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name='Home' component={HomeScreen} />
                <Stack.Screen name='Test' component={TestScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

Step 4: HomeScreen.js

In this step, You will open the HomeScreen.js file and put the code.

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

const HomeScreen = ({ navigation }) => {

    React.useEffect(() => {
        const focusHandler = navigation.addListener('focus', () => {
            Alert.alert('Refreshed');
        });
        return focusHandler;
    }, [navigation]);
    
    const gotoTestStackScreen = () => {
        navigation.navigate('Test');
    }
    
    return (
        <View style={styles.container}>
            <Text style={styles.text}>HomeScreen!</Text>
            <Button title="Go to test test screen" onPress={gotoTestStackScreen} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 20,
        marginBottom: 10,
    },
});

export default HomeScreen;

Step 5: TestScreen.js

In this step, You will open the TestScreen.js file and put the code.

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

const TestScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>TestScreen</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 20,
    },
});

export default TestScreen;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...