title: React native flatlist to tab screens
body: <p>I have a flatlist which lists customers item. When I press on each item, it will navigate to the main screen tab, which contains 3 tab screens:</p>
  
  <ul>
  <li>customer's info</li>
  <li>customer's current address</li>
  <li>customer's billing address.</li>
  </ul>
  
  <p>These 3 screens get data from different APIs but depends on customer ID.
  How can I pass flatlist keys to those screens, in order to display data from any API ?</p>
  
  <p>Here is my code at the moment:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  import TabNavigator from 'react-native-tab-navigator';
  import Icon from 'react-native-vector-icons/FontAwesome';
  import {Dimensions} from 'react-native';
  
  const deviceW = Dimensions.get('window').width
  
  const basePx = 768
  
  function px2dp(px) {
    return px *  deviceW / basePx
  }
  
  class Info extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.welcome}&gt;
          Customer info:_____
          &lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  
  class currentadd extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.welcome}&gt;
            current address is:_____
          &lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  
  class billingadd extends Component {
      render() {
        return (
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.welcome}&gt;
              Billing address is:_____
            &lt;/Text&gt;
          &lt;/View&gt;
        )
      }
    }
  
  
  export default class CustomerDetail extends Component {
  
    static navigationOptions = ({ navigation }) =&gt; {
      return {
        title: `${navigation.state.params.custid}`,
      }
    };
  
  
    state= {
      selectedTab: 'info'
    }; 
  
    render() {
      return (
        &lt;TabNavigator style={styles.container}&gt;
          &lt;TabNavigator.Item
            selected={this.state.selectedTab === 'info'}
            title="Customer General Info"
            selectedTitleStyle={{color: "#3496f0"}}
            renderIcon={() =&gt; &lt;Icon name="user" size={px2dp(22)} color="#666"/&gt;}
            renderSelectedIcon={() =&gt; &lt;Icon name="user" size={px2dp(22)} color="#3496f0"/&gt;}
            onPress={() =&gt; this.setState({selectedTab: 'info'})}&gt;
            &lt;Info /&gt;
          &lt;/TabNavigator.Item&gt;
          &lt;TabNavigator.Item
            selected={this.state.selectedTab === 'currentadd'}
            title="current address"
            selectedTitleStyle={{color: "#3496f0"}}
            renderIcon={() =&gt; &lt;Icon name="usd" size={px2dp(22)} color="#666"/&gt;}
            renderSelectedIcon={() =&gt; &lt;Icon name="home" size={px2dp(22)} color="#3496f0"/&gt;}
            onPress={() =&gt; this.setState({selectedTab: 'currentadd'})}&gt;
            &lt;currentadd/&gt;
          &lt;/TabNavigator.Item&gt;
          &lt;TabNavigator.Item
            selected={this.state.selectedTab === 'billingadd'}
            title="billing address"
            selectedTitleStyle={{color: "#3496f0"}}
            renderIcon={() =&gt; &lt;Icon name="usd" size={px2dp(22)} color="#666"/&gt;}
            renderSelectedIcon={() =&gt; &lt;Icon name="phone" size={px2dp(22)} color="#3496f0"/&gt;}
            onPress={() =&gt; this.setState({selectedTab: 'billingadd'})}&gt;
            &lt;billingadd/&gt;
          &lt;/TabNavigator.Item&gt;
        &lt;/TabNavigator&gt;
      );
    }
  }
  ...stylesheet here
  </code></pre>
  
  <p>Thank you in advance.</p>