React Native Refresh Previous Screen on Go Back React Navigation Example

In a smart mobile application all the screen content is dynamic and switching between activities. But most of data management applications like Realm, SQLite and Online Data management we would edit, delete and update records in real time. When user navigates to next screen and delete or update a order then it will be also updated in previous screen. So we have to manually update the previous screen on going back. To achieve this functionality we have to use useIsFocused() method of React Navigation. We would use the useIsFocused() in any functional or class component. When user came back to previous screen it will check  the useIsFocused() value and according to that it will re-render the component itself. This would update the screen. So in this tutorial we would learn about React Native Refresh Previous Screen on Go Back React Navigation Android iOS Example.

In today’s tutorial we’re performing all the coding in functional component. So we have to pass the useIsFocused() object in useEffect() method. We would use the useEffect() method with useIsFocused() object, which works same as ComponentDidMount() method we are using in our class components. So let’s get started 🙂 .

Contents in this project React Native Refresh Previous Screen on Go Back React Navigation Android iOS Example:-

1. Before getting started the app coding, we’ve to install the latest version of react navigation. So visit my React Navigation Installation tutorial and follow step 1, 2 and 3.

2. Now open your react native project’s main App.js file and import useState, useEffect, StyleSheet, Text, View, Button, NavigationContainer, useIsFocused and createStackNavigator component.

3. Creating our first home screen functional component named as HomeScreen().

Explanation:-

In this functional component we’re making a constant object named as isFocused of useIsFocused() method. The useIsFocused() value updated every time when user renders the screen. Now using the useEffect() with isFocused we can update the screen components every time when user visits the screen or going back to screen.

4. Creating our Second screen component named as SecondScreen().

5. Creating a createStackNavigator() object named as Stack.

6. Creating our main Root functional component named as App. In this component we are creating NavigationContainer -> Stack.Navigator -> Stack.Screen and define both screens here.

7. Creating Style sheet.

8. Now in the final step we have to call the export default App method to call the app.

9. Complete Source Code for App.js file:

Screenshots:

React Native Refresh Previous Screen on Go Back React Navigation Example

Leave a Reply

Your email address will not be published. Required fields are marked *