title: React Native Passing User Input Data to Component in Tab Bar IOS through Navigator
body: <p>before anything, I'm a beginner in programming so I would really appreciate if anyone can provide me with a beginner-friendly explanation of my issue.</p>
  
  <p>I am trying to pass user data from the initial 'date' input page into one component that is part of TabBarIOS. I tried to do this by passing props through navigator, because the input page navigates directly to the first component of the TabBarIOS. 
  Here is my code:</p>
  
  <pre><code>class Details extends Component {
      constructor() {
      super();
      this.state = {
        date: new Date(),
  
    onDateChange( date ) {
      this.setState ({date: date});
    }
  
    navigate (){
    this.props.navigator.push({
      name: 'TabBar',
      component: TabBar,
      passProps: {date: this.date}
  
    })
  }
  </code></pre>
  
  <p>I have the <a href="https://facebook.github.io/react-native/docs/datepickerios.html" rel="nofollow">DatePicker IOS code</a> implemented here, so that the user's inputed date is rendered and returned to show that date like this; afterwards navigating to the TabBar component:</p>
  
  <pre><code>  &lt;DatePickerIOS
        date={(this.state &amp;&amp; this.state.date) || new Date()}
        onDateChange={(newDate) =&gt; {
          this.setState({date: newDate})
        }}
        mode={'date'}
        timeZoneOffsetInMinutes={-1 * new Date().getTimezoneOffset()} /&gt;
      &lt;/View&gt;
  
   &lt;View style = {styles.nameInput} value = {this.state.date}&gt;
        &lt;Text&gt; {this.state.date.getDate()}/{this.state.date.getMonth()}/{this.state.date.getFullYear()}&lt;/Text&gt;
        &lt;/View&gt;
  
      &lt;TouchableHighlight style = {styles.button} onPress = {() =&gt; this.navigate(date)}&gt;
      &lt;Text&gt; Start &lt;/Text&gt;
      &lt;/TouchableHighlight&gt;
  </code></pre>
  
  <p>Afterwards, I try to do this into the TabBar component:</p>
  
  <pre><code>    &lt;TabBarIOS.Item
        selected = {this.state.selectedTab === 'Home'}
        systemIcon = "history"
        onPress={() =&gt; {
          this.setState({
            selectedTab: 'Home',
          });
        }}&gt;
      &lt;Home date = {this.date}&gt;&lt;/Home&gt;
     &lt;/TabBarIOS.Item&gt;
  </code></pre>
  
  <p>The following is now the Home component: </p>
  
  <pre><code>class Home extends Component {
     render () {
       return (
         &lt;Text&gt; The date is {this.props.date} &lt;/Text&gt;
          );
         }
        }
  </code></pre>
  
  <p>Can somebody explain to me what I am doing wrong here- if anybody needs more information to answer this question I can provide the necessary details.</p>
  
  <p>Thank You</p>