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

Hello Dev’s today now in this post i will show you How to Make Screen Refresh when Navigating Back in React Native? Here our leading topic is how we can make screen refresh when the navigating back in react native. Now in this example i will help you on react native refresh the previous screen on go back navigation example. So it’s a very simple example of how we can create the screen refresh when the navigating back in react native. Here i will use how we can implement refresh the previous screen on go back navigation. Just need to follow the bellow tutorial step of how we can use screen refresh when navigating back in react native.

React Native Application

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

Now in the following example, I will be using react navigation library to the navigate from the screen named HomeScreen to screen named as TestScreen. We need to added a listener by using the useEffect hook in the HomeScreen. Now Inside it, there is an Alert function. So the Alert function will be prompts when HomeScreen is focused as well as when the navigating back from sample screen to the HomeScreen.

Let’s start and following the example:

Step 1: Download Project

Now in the first step need to run the following command to create a project.

expo init ExampleApp

Step 2: Install and Setup

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

npm install @react-navigation/native

React navigation is also dependent on some other libraries. So need to install them by 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 also using the Stack Navigator to demonstrate the example. For install it by using the following command.

npm install @react-navigation/stack

Now, we need to add the following line at the top of our entry file, that is index.js file.

import 'react-native-gesture-handler';

Step 3: App.js

Now in this step, we need to open the App.js file and then 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

Now in this step, we will open the HomeScreen.js file and then 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

Now in this step, i will open the TestScreen.js file and then 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

Now in the last step need run our project by using the below command.

expo start

Read Also: How to Create Dynamic Dropdown in React Native?

Thanks for read. I hope it help you. For more you can follow us on facebook