How to Refresh React Native Screen When Returning from Another Screen

Hi guys, In this article, we are going to learn about How to Refresh React Native Screen When Returning from Another Screen. React Native is a powerful framework for building mobile applications, and navigation is a fundamental part of any mobile app. In many cases, you might need to refresh a screen when a user returns to it after navigating to another screen. To achieve this, you can use the useIsFocused hook provided by React Navigation. In this article, we’ll walk through the steps to accomplish this task.

useIsFocused is a hook provided by the React Navigation library that allows you to determine whether a screen is currently in focus or not. It returns a boolean value, true if the screen is focused and false otherwise. This hook is incredibly useful for triggering actions or refreshes when a screen comes into focus.

1. Setting up useIsFocused

Before we move forward, ensure that you have React Navigation and useIsFocused imported in your component

import { useIsFocused } from '@react-navigation/native';

Now, let’s see how to use this hook to refresh a screen when returning from another screen.

2. Initialise useIsFocused

Start by initialising the useIsFocused hook in your component. following line of code will give you access to the isFocused variable, which indicates whether the screen is currently in focus.

const isFocused = useIsFocused();

3. Trigger a Refresh Effect

Now, you can use the isFocused variable to trigger a refresh effect when the screen comes into focus. This is typically done using the useEffect hook.

useEffect(() => {
  if (isFocused) {
    // Perform actions you want when the screen is focused.
    // This could be fetching data, re-rendering components, or any other refresh logic.
    getData();
  }
}, [isFocused]);

4. Full source code

Check following App.js code for whole source code.

import React, {Component, useEffect} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {NavigationContainer, useIsFocused} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

function HomeScreen({navigation}) {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      // Perform actions you want when the screen is focused.
      // This could be fetching data, re-rendering components, or any other refresh logic.
      alert('Home screen is on focus');
    }
  }, [isFocused]);

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <TouchableOpacity onPress={() => navigation.navigate('Cart')}>
        <Text>Home Screen</Text>
      </TouchableOpacity>
    </View>
  );
}

function CartScreen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Cart Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

5. Output

This is how to Refresh React Native Screen When Returning from Another Screen.

Thank you 🙂 Happy coding!