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.
|
1
2
3
4
5
6
7
8
9
|
import ‘react-native-gesture-handler’;
import React, { useState, useEffect } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer, useIsFocused } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function HomeScreen({ navigation }) {
const isFocused = useIsFocused();
useEffect(() => {
// Put Your Code Here Which You Want To Refresh or Reload on Coming Back to This Screen.
}, [isFocused]);
const navigateToNextScreen = () => {
navigation.navigate(‘Second’);
}
return (
<View style={styles.Container}>
<Text style={styles.text}> First Home Screen </Text>
<Button onPress={navigateToNextScreen} title=“Navigate To Next Screen” />
</View>
);
}
|
4. Creating our Second screen component named as SecondScreen().
|
1
2
3
4
5
6
7
8
9
|
function SecondScreen() {
return (
<View style={styles.Container}>
<Text style={styles.text}> Second Screen </Text>
</View>
);
}
|
5. Creating a createStackNavigator() object named as Stack.
|
1
|
const Stack = createStackNavigator();
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home” component={HomeScreen} />
<Stack.Screen name=“Second” component={SecondScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
|
7. Creating Style sheet.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
padding: 14,
fontSize: 32,
},
});
|
8. Now in the final step we have to call the export default App method to call the app.
|
1
|
export default App;
|
9. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import ‘react-native-gesture-handler’;
import React, { useState, useEffect } from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer, useIsFocused } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
function HomeScreen({ navigation }) {
const isFocused = useIsFocused();
useEffect(() => {
// Put Your Code Here Which You Want To Refresh or Reload on Coming Back to This Screen.
}, [isFocused]);
const navigateToNextScreen = () => {
navigation.navigate(‘Second’);
}
return (
<View style={styles.Container}>
<Text style={styles.text}> First Home Screen </Text>
<Button onPress={navigateToNextScreen} title=“Navigate To Next Screen” />
</View>
);
}
function SecondScreen() {
return (
<View style={styles.Container}>
<Text style={styles.text}> Second Screen </Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home” component={HomeScreen} />
<Stack.Screen name=“Second” component={SecondScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
padding: 14,
fontSize: 32,
},
});
export default App;
|
Screenshots:
Also Read :
Run React Native Project on Specific iOS Simulator Device in MAC
React Native Create Round Shape Image Component in Android iOS
Error: Unable to resolve module `./index` from `node_modulesreact-nativescripts/ Solution
How to Convert Integer Variable to String in React Native Application
React Native Show Default Image Before loading Real Image PlaceHolder iOS Android Example
