react-native modal components from my screens are still visible when navigating

[toussa]

Current Behavior

When using RN's modal component on my screens, when I navigate from one screen to another, all the modals stay visible (with stackNavigator).

• What code are you running and what is happening?

see expo snack here or code below:

import React from 'react';
import { Button, View, Text, Modal } from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.27

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: "lightblue" }}>
         <Text>Home Screen</Text>
        <Modal visible={true}  onRequestClose={() => {}} animationType={'slide'} transparent={true} style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
        <View style={{backgroundColor: "lightgreen", alignItems: "center", justifyContent: "center", minWidth: "50%", minHeight: "30%"}}>
          <Text>this is a modal from Home screen</Text>
          <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details')} />
        </View>
      </Modal>
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: "lightgrey" }}>
        <Text>Details Screen</Text>
        <Modal visible={true}  onRequestClose={() => {}} animationType={'slide'} transparent={true} style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
        <View style={{backgroundColor: "yellow", alignItems: "center", justifyContent: "center", minWidth: "30%", minHeight: "20%"}}>
          
          <Text> --Detail modal-- </Text>
          <Button
          title="Detail Go back"
          onPress={() => this.props.navigation.goBack()}
        />
        </View>
      </Modal>
      </View>
    );
  }
}

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

gif representing both modal stacked:

Expected Behavior

• What do you expect should be happening?
  Even if it's explained by the fact that screens are not unmounted when stacked, it should not display the modal from the underneath screen. Or at least it should be written somewhere that react-navigation does not work with react-native modals.

How to reproduce

See the link to the expo snack or code below:

Your Environment

software	version
react-navigation	1.0.0-beta.21 and 1.0.0-beta.27 (tried on both
react-native	0.50.3
node	v8.9.4
npm	5.6.0

[kelset]

Can you please update to 1.0 let us know if it still happens?

[vonovak]

this most certainly happens on 1.0 as well. My advice would be to rely on react-navigation to present modal screens.

[brentvatne]

you should use this.props.navigation.addListener to hide anything that needs to be hidden when the screen is unfocused https://reactnavigation.org/docs/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

[toussa]

@brentvatne Thanks but that looks like a workaround to the issue. I can give another one if used with redux, that's looking to the last route in the "routes" array and check routeName. Both work, but I posted the issue here so it may be solved without workarounds.

@kelset just tested on 1.0.0 to be sure, same issue.

@vonovak Indeed, that's a good advice :) But, unfortunately, it's not the case here.

I understand that react-navigation provides its own modal "system", but in my opinion it should really be indicated somewhere that it's not working well with this original react-native component.
What do you think ?

[brentvatne]

Thanks but that looks like a workaround to the issue. I can give another one if used with redux, that's looking to the last route in the "routes" array and check routeName. Both work, but I posted the issue here so it may be solved without workarounds

this is not a workaround. this is how you would do that. we don't integrate with react-native's built in modal and assume that you want to close it when you switch between screens, that's up to you

[brentvatne]

that said, if you have a better idea for what we should do for this you are welcome to submit a RFC! https://github.com/react-navigation/rfcs