title: React-Native — How to pass parameters using react-navigation?
body: <p>I am trying to dynamically pass a title from a Card component to a stack that uses <code>createMaterialTopTabNavigator</code>(Tab). The routes are currently separated from the components and exist in a file called <code>navigation.js</code>. How can I pass the parameters from the component to the stack in <code>navigation.js</code>? </p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Card.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
  import { withNavigation } from 'react-navigation'
  
  class Card extends Component {
      static containerStyle = {
          width: 343,
          height: 281,
      }
  
      render() {
          const { data } = this.props
          console.log(data)
          return (
              &lt;View style={[styles.root, this.props.style]}&gt;
                  &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate('Details', { title: data.title })}&gt;
                      &lt;View style={styles.imgWrapper} /&gt;
                      &lt;View style={styles.info}&gt;
                          &lt;View style={styles.infoLeft}&gt;
                              &lt;Text style={styles.title}&gt;{data.title ? data.title : 'Title'}&lt;/Text&gt;
                              &lt;Text style={styles.subTitle}&gt;{data.date ? data.date : 'Date'}&lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={styles.infoRight}&gt;
                              &lt;Text style={styles.price}&gt;{data.price ? data.price : 'Price'}&lt;/Text&gt;
                              &lt;Text style={styles.oldPrice}&gt;{data.oldPrice ? data.oldPrice : 'Old price'}&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          )
      }
  }
  
  export default withNavigation(Card)
  </code></pre>
  
  <p><strong>navigation.js</strong></p>
  
  <pre><code>import React from 'react'
  import { createMaterialTopTabNavigator } from 'react-navigation'
  import { createStackNavigator } from 'react-navigation'
  
  import Filter from '../screens/Filter'
  import Dates from '../screens/Dates'
  import Shows from '../screens/Shows'
  import Details from '../screens/Details'
  import ShowDetail from '../screens/ShowDetail'
  import Modal from '../screens/Modal'
  
  const Tab = createMaterialTopTabNavigator(
      {
          Details: Details,
          Book: Dates,
      },
      {
          tabBarOptions: {
              activeTintColor: 'black',
              inactiveTintColor: 'gray',
              style: {
                  backgroundColor: 'white',
              },
              indicatorStyle: {
                  backgroundColor: 'black',
              },
              upperCaseLabel: false,
          },
      },
  )
  
  export const MainStack = createStackNavigator(
      {
          Home: {
              screen: Shows,
              navigationOptions: {
                  title: 'Shows',
              },
          },
          Details: {
              screen: Tab,
              navigationOptions: {
                  title: 'Show title', // TITLE NEEDS TO COME HERE
                  headerLeft: null,
              },
          },
      },
      {
          initialRouteName: 'Home',
          navigationOptions: {
              headerStyle: {
                  backgroundColor: 'white',
                  height: 98,
                  // iOS
                  borderBottomWidth: 0,
                  // Android
                  elevation: 0,
              },
              headerTintColor: 'black',
              headerTitleStyle: {
                  fontWeight: 'bold',
              },
              headerBackTitle: null,
          },
      },
  )
  
  export default class App extends React.Component {
      render() {
          return &lt;MainStack /&gt;
      }
  }
  </code></pre>