title: Component not unmounting when navigating between scenes
body: <p><strong>EDIT</strong>: I now suspect the issue is caused by the problem described <a href="https://stackoverflow.com/questions/39538891/react-native-navigator-renderscene-called-multiple-times">here</a>. I think that navigating away from a scene will render it again, thus keeping my component alive.</p>
  
  <p>========================= </p>
  
  <p>I am building a React Native component that listens for <code>NetInfo</code> changes and displays a modal dialog based on <a href="https://www.npmjs.com/package/react-native-modal" rel="nofollow noreferrer">react-native-modal</a>.</p>
  
  <p>This is the code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {NetInfo, View, Text, Button, TouchableOpacity} from 'react-native';
  import Modal from 'react-native-modal';
  
  export default class WifiCheckModal extends Component {
      constructor() {
          super();
      }
  
      componentWillMount() {
          console.log('WifiModal mounting');
      }
  
      componentDidMount() {
          setTimeout(this.refreshConnectionStatus.bind(this), 500);
          NetInfo.addEventListener('change', this._handleConnectivityChange);
      }
  
      componentWillUnmount() {
          console.log('WifiModal unmounting');
          NetInfo.removeEventListener('change', this._handleConnectivityChange);
          this.isAlive = false;
      }
  
      _handleConnectivityChange = (connectionStatus) =&gt; {
          console.log('IsConnected = ' + connectionStatus);
          // Need to handle 'WIFI' on Android and 'wifi' on iOS, so convert to lowercase.
          let isOnWifi = (connectionStatus.toLowerCase() === 'wifi');
          let shouldShowModal = !isOnWifi;
  
          if (this.state.showModal != shouldShowModal) {
              console.log('Changing modal state to ' + shouldShowModal + ' because connection is ' + connectionStatus);
              this.setState({showModal: !isOnWifi});
          }
      }
  
      render() {
          return (
              &lt;Modal isVisible={this.state.showModal}&gt;
                  &lt;View style={styles.modalContent}&gt;
                      &lt;Text&gt;You must be connected to wifi to use this app.&lt;/Text&gt;
                      &lt;TouchableOpacity onPress={this.refreshConnectionStatus.bind(this)}&gt;
                          &lt;View style={styles.button}&gt;
                              &lt;Text&gt;Check again&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
              &lt;/Modal&gt;
          );
      }
  
      refreshConnectionStatus() {
          NetInfo.fetch().then(connectionStatus =&gt; this._handleConnectivityChange(connectionStatus));
      }
  }
  </code></pre>
  
  <p>I then use this component in the <code>render</code> method of other components that serve as scenes:</p>
  
  <pre><code>class SomeComponentScene extends Component {
  
      // ...
  
      render() {
          return (
              &lt;View&gt;&lt;WifiCheckModal /&gt; ... &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>The navigation code is found in my <code>index.js</code> (imported from <code>index.android.js</code>) and looks as follows:</p>
  
  <pre><code>export default class App extends Component {
      constructor() {
          super();
      }
  
      render() {
          if (Platform.OS === 'android') {
              BackAndroid.addEventListener('hardwareBackPress', () =&gt; {
                  console.log("Android back pressed");
  
                  if (_navigator.getCurrentRoutes().length === 1  ) {
                      return false;
                  }
  
                  _navigator.pop();
                  return true;
              });
          }
  
          return (&lt;Navigator
              initialRoute={{ index: 0, name: 'Splash'}}
              renderScene={ this.navigateToScene }/&gt;);
      }
  
      navigateToScene(route, navigator) {
          console.log("navigateToScene " + JSON.stringify(route));
  
          _navigator = navigator;
  
          if (route.name == 'Splash') {
              return &lt;SplashScene
                  navigator={navigator}
                  onRequireAuthentication={() =&gt; {
                      navigator.replaceAtIndex({name: 'Login'}, 0);
                  }}
                  onNotRequireAuthentication={() =&gt; {
                      navigator.replaceAtIndex({name: 'List'}, 0);
                  }}/&gt;
          } else if (route.name == 'Login') {
              return &lt;LoginScene
                  navigator={navigator}
                  onAuthenticationCompleted={() =&gt; {
                      navigator.replaceAtIndex({name: 'List'}, 0);
                  }}/&gt;
          } else if (route.name == 'List') {
              return &lt;ListScene
                  navigator={navigator}/&gt;
          } else if (route.name == 'Add') {
              return &lt;AddScene
                  navigator={navigator}/&gt;
          } else if (route.name == 'Chat') {
              return &lt;ChatScene
                  navigator={navigator}
                  data={route.data}/&gt;
          } else if (route.name == 'Map') {
              return &lt;MapScene
                  navigator={navigator}
                  data={route.data}/&gt;
          }
      }
  }
  </code></pre>
  
  <p>I noticed that the modal's <code>componentDidUnmount</code> is not always getting called when I move between scenes, leaving multiple listeners listening for <code>NetInfo</code> changes.</p>
  
  <p>Are components not being unmounted when moving between scenes? Or perhaps there is something I'm doing that's keeping my component alive? Is there another way I should detect that my component is no longer in view and should thus unregister itself from <code>NetInfo</code>?</p>
  
  <p>Or perhaps I'm worried for nothing and it's fine to have multiple listeners and they'll all be cleaned up eventually?</p>