So, exactly what the title says, I'm making a react native app and I want the screen that I leave with navigation.navigate()
to be "reset" or "rerendered" when I e back to it, because as it is now, when I leave the screen and then e back to it it's state is the same as I left it. Here's the navigator code
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Group>
<Tab.Screen name="Devices" ponent={Devices} options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image
source={require('./android/app/src/main/assets/devices.png')}
resizeMode='contain'
style={{
width: 30,
height: 30
}}
/>
</View>
)
}} />
<Tab.Screen name="Connection" ponent={ConnectionScreen} options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image
source={require('./android/app/src/main/assets/connection.png')}
resizeMode='contain'
style={{
width: 30,
height: 30
}}
/>
</View>
)
}} />
</Tab.Group>
<Tab.Group screenOptions={{ presentation: 'modal' }}>
<Tab.Screen name='Add device' ponent={AddDevice}
options={{
tabBarButton: () => null,
tabBarVisible:false
}}/>
</Tab.Group>
</Tab.Navigator>
</NavigationContainer>
);
}
And the second smaller thing is, that I can't see any navigation aniamtions, like this Modal on the bottom for example
So, exactly what the title says, I'm making a react native app and I want the screen that I leave with navigation.navigate()
to be "reset" or "rerendered" when I e back to it, because as it is now, when I leave the screen and then e back to it it's state is the same as I left it. Here's the navigator code
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Group>
<Tab.Screen name="Devices" ponent={Devices} options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image
source={require('./android/app/src/main/assets/devices.png')}
resizeMode='contain'
style={{
width: 30,
height: 30
}}
/>
</View>
)
}} />
<Tab.Screen name="Connection" ponent={ConnectionScreen} options={{
tabBarIcon:({focused})=>(
<View style={{alignItems:'center', justifyContent:'center'}}>
<Image
source={require('./android/app/src/main/assets/connection.png')}
resizeMode='contain'
style={{
width: 30,
height: 30
}}
/>
</View>
)
}} />
</Tab.Group>
<Tab.Group screenOptions={{ presentation: 'modal' }}>
<Tab.Screen name='Add device' ponent={AddDevice}
options={{
tabBarButton: () => null,
tabBarVisible:false
}}/>
</Tab.Group>
</Tab.Navigator>
</NavigationContainer>
);
}
And the second smaller thing is, that I can't see any navigation aniamtions, like this Modal on the bottom for example
Share Improve this question asked Jan 15, 2022 at 12:49 m3k_1m3k_1 4177 silver badges18 bronze badges 1- you can change one state result . as you know when state result changed screen will rerender – Meisam Sabaghi Commented Jan 15, 2022 at 13:01
2 Answers
Reset to default 5Set unmountOnBlur
to true
Unmounting a screen resets any local state in the screen as well as the state of the nested navigators in the screen. Defaults to
false
.
<Tab.Navigator
screenOptions={{ unmountOnBlur: true }}
>
...
</Tab.Navigator>
Also, you can apply it to a single route:
<Tab.Navigator>
<Tab.Screen name="..." ponent={...} options={{ unmountOnBlur: true }} />
</Tab.Navigator>
You can make use of useIsFocused, try something like:
import { useIsFocused } from '@react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
//executes whenever this ponent/screen is focused
}, [isFocused]);
You can also set the unmountOnBlur flag to true to the particular screen as below:
<Tab.Screen
name={...}
ponent={...}
options={{unmountOnBlur: true}}
/>