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

• javascript
• react-native
• react-navigation

• 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 2

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="..." 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}}
/>