How to reset/rerender screen you just left with react navigation

Question

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 come back to it, because as it is now, when I leave the screen and then come 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" component={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" component={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' component={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

you can change one state result . as you know when state result changed screen will rerender — Meisan Saba, Jan 15 '22 at 13:01

score 3 · Accepted Answer · answered Jan 15 '22 at 13:36

3

Set 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="..." component={...} options={{ unmountOnBlur: true }} />
</Tab.Navigator>

answered Jan 15 '22 at 13:36

Yaman KATBY

1,814
10
24

Do you perhaps also know why I can't see aimations when changing screens like the modal screen at the bottom, the example on the react navigations site didn't have anything diferent in it, and it worked on snack expo https://reactnavigation.org/docs/modal/ – m3k_1 Jan 15 '22 at 13:49
1

You are using Tab navigator which doesn't have animation. The example you provided using Stack navigator however you can nest a Stack navigator inside a Tab navigator. see more: https://reactnavigation.org/docs/nesting-navigators – Yaman KATBY Jan 15 '22 at 13:55
1

Thanks man, after months I had given up on finding a solution, and by pure chance I found your answers, thanks – Rafael MR Aug 07 '23 at 20:14

Akshay Shenoy · Answer 2 · 2022-01-15T14:07:04.433

2

You can make use of useIsFocused, try something like:

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

  const isFocused = useIsFocused();

useEffect(() => {
    //executes whenever this component/screen is focused
  }, [isFocused]);

You can also set the unmountOnBlur flag to true to the particular screen as below:

<Tab.Screen
    name={...}
    component={...}
    options={{unmountOnBlur: true}}
/>

edited Jan 15 '22 at 14:07

answered Jan 15 '22 at 13:16

Akshay Shenoy

1,194
8
10

How to reset/rerender screen you just left with react navigation

2 Answers2