React Native built-in Modal is not visible while coming back to screen

Question

I'm confused in this code little bit, I've two screens, MainScreen and FeedScreen inside NativeStackNavigator, where initialScreenName(screen which will be routed/render first) is MainScreen.

I've a modal nested inside MainScreen , and inside modal there is a button which will navigate to the FeedScreen, while navigating to FeedScreen , Modal was visible but while coming back to MainScreen , Modal is no more visible, and even not openning after clicking on "Show Modal" button...

Where Modal visibility is controlled by state variable, which is also true but still Modal is not visible...

Kindly point out what is going on here because according to me, Modal should be open while coming back to MainScreen from FeedScreen...

Here is code...

function MainScreen({navigation}){

const [modalVisibility, setModalVisibility] = useState(false)

return <View>
          <Text style={{ fontSize: 25 }}>I'm Main Screen...</Text>
          <Text>{String(modalVisibility)}</Text>
          <Button title='Show Modal' onPress={()=>setModalVisibility(true)} ></Button>

          <Modal visible={modalVisibility} onRequestClose={()=>setModalVisibility(false)}>
            <Text>I'm modal with visiblility {String(modalVisibility)}</Text>
            <Button title='Go to Feed' onPress={()=>navigation.navigate('FeedScreen')}/> 
          </Modal>
      </View>

}

function FeedScreen({navigation}) {
return <View>
      <Button title='Go to Main' onPress={()=>navigation.navigate("MainScreen")}></Button>
  </View>
}

function RootStackScreen() {
return (
<NavigationContainer>
  <RootStack.Navigator initialRouteName='MainScreen'>

      <RootStack.Screen name="MainScreen" component={MainScreen}/>
      <RootStack.Screen name="FeedScreen" component={FeedScreen}/>

  </RootStack.Navigator>
</NavigationContainer>

score 0 · Answer 1 · answered Jan 09 '22 at 08:35

0

The problem is that the modalVisibility state is not exposed for the FeedScreen meaning the feedscreen cannot access the state, you can use a [context provider] [1] to expose that state to it.

[1]: https://reactjs.org/docs/context.html

answered Jan 09 '22 at 08:35

Abdusalam mohamed

348
3
8

Dear, I don't want to expose the modalVisibility state of "MainScreen" to the "FeedScreen", actually Modal (nested inside "MainScreen") is not visible while coming back to "MainScreen" from "FeedScreen", there is no issue of modalVisibility state... – Faizan Muhammad Jan 09 '22 at 09:24
Yeah so because the MainScreen Component re-renders when you navigate to it, the value of modalVisibility state is initialized as false (because you set the default value to be false) – Abdusalam mohamed Jan 09 '22 at 11:42
No, in stackNavigator, if routed screen in already available in the stack then it will not be re-rendered, I've have also checked it, in the above code, by printing modalVisibility state inside Text component, when I'm coming back to MainScreen, modalVisibility state is "true", means state of screen will be preserved when you will navigate to screen which is already present in the stack... – Faizan Muhammad Jan 09 '22 at 13:54
so does it work when you refresh the MainScreen? – Abdusalam mohamed Jan 09 '22 at 14:01
you have `` in the MainScreen and ` – Abdusalam mohamed Jan 09 '22 at 14:06

React Native built-in Modal is not visible while coming back to screen

1 Answers1