title: React Native - data is lost when switching between screens using react-navigation and react-redux
body: <p>I am using react-redux and react-navigation with my react native app. </p>
  
  <p>I have a component called <code>photolist</code> that gets all the photos from a database. There are two screens that call this component. The <code>userProfile</code> screen passes <strong>true and userId</strong> to <code>photolist</code> for the user's photos; the <code>feed</code> screen passes <strong>false and null</strong> to <code>photolist</code> for the all the photos. </p>
  
  <p>In App.js, I put the Feed screen and User screen in the same stack so I can navigate easily. </p>
  
  <p>With this approach, I am able to load the main page on App load, see all the photos, then go to a user's page and see the user's photos. <strong>But from the user's page, when I click the back button to go back to the main page, no photos are loaded anymore.</strong> Note that in this sequence of actions, the <code>photolist</code> component's <code>componentDidMount()</code> function is called exactly twice; when going back to the main feed from userProfile, it is not called again. </p>
  
  <p>Any idea on why is this happening and how may I resolve this? Is there a way to keep the navigation structure where clicking the back button from <code>userProfile</code> will take you back to where you were in the main feed page without needing to reload the main feed again?</p>
  
  <p>photolist.js:</p>
  
  <pre><code>class PhotoList extends React.Component {
      constructor(props) {
          super(props);
      }
  
      componentDidMount = () =&gt; {
          const { isUser, userId } = this.props;
  
          // load a single user's photos or all photos
          if (isUser) {
              this.props.loadFeed(userId);
          } else {    
              this.props.loadFeed();
          }
      }
  
      render(){
          return (
              &lt;View style={{flex:1}}&gt;
                  &lt;FlatList
                      data = {(this.props.isUser) ? this.props.userFeed : this.props.mainFeed}
                      keyExtractor = {(item, index) =&gt; index.toString()}
  
                      ...
                  /&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          mainFeed: state.feed.mainFeed,
          userFeed: state.feed.userFeed
      }
  }
  
  const mapDispatchToProps = {
      loadFeed
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(PhotoList);
  </code></pre>
  
  <p>feed.js:</p>
  
  <pre><code>&lt;PhotoList isUser={false} navigation={this.props.navigation}/&gt;
  </code></pre>
  
  <p>userProfile.js:</p>
  
  <pre><code>&lt;PhotoList isUser={true} userId={this.state.userId} navigation={this.props.navigation}/&gt;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>const FeedScreenStack = createStackNavigator({
    FeedStack: { screen: feed },
    UserProfile: { screen: userProfile }
  });
  
  </code></pre>