title: React Native - Passing Data Across Screens
body: <p>I'm having some trouble with a <code>react-native</code> app. I can't figure out how to pass data across screens.</p>
  
  <p>I realize that there are other similar questions that are answered on SO, however the solutions did not work for me.</p>
  
  <p>I'm using the <code>StackNavigator</code>. Here's my setup in my <code>App.js</code> file.</p>
  
  <pre><code>export default SimpleApp = StackNavigator({
      Home: { screen: HomeScreen },
      Categories: { screen: CategoriesScreen }, // send from here
      Category: { screen: CategoryScreen }      // to here
  });
  </code></pre>
  
  <p>I have a <code>TouchableHighlight</code> component which has a <code>onPress</code> event that will navigate to the desired screen. This is on my <code>Categories.js</code> file/screen.</p>
  
  <pre><code>&lt;TouchableHighlight onPress={(id) =&gt; {
      const { navigate } = this.props.navigation;
      navigate('Category', { category: id });
  }}&gt;
      &lt;Text&gt;{name}&lt;/Text&gt;
  &lt;/TouchableHighlight&gt;
  </code></pre>
  
  <p>When I click the element, the screen does indeed switch to <code>category</code>, however it fails to send the <code>props</code> data.</p>
  
  <p>So when I check the data in my <code>Category</code> screen, it returns undefined. I have tried the following methods:</p>
  
  <pre><code>this.props.category
  this.props.navigation.state.category;
  this.props.navigation.state.params.category
  </code></pre>
  
  <p>How exactly can I access that data that I passed in 
  the <code>navigate</code> method?</p>
  
  <pre><code>navigate('Category', { category: id });
  </code></pre>
  
  <hr>
  
  <p>Edit: Here is my actual code structure:</p>
  
  <p>The <code>data</code> comes from a <code>API</code>.</p>
  
  <pre><code>for (var i = 0; i &lt; data.length; i++) {
      var name = data[i].name;
      var id = data[i].id;
      categoryComponents.push(
          &lt;Card key={id}&gt;
              &lt;CardItem&gt;
                  &lt;Body&gt;
                      &lt;TouchableHighlight onPress={(id) =&gt; {
                          const { navigate } = this.props.navigation;
                          navigate('Category', { params: { category: id } });
                      }}&gt;
                          &lt;Text&gt;{name + " " + id}&lt;/Text&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/Body&gt;
              &lt;/CardItem&gt;
          &lt;/Card&gt;
      );
  }
  </code></pre>