title: React Native Pass data to another component
body: <p>I am new to  React Native and trying to build a Messenger app and  I have 2 components Search and Messenger​. I am struggling to pass the data I got from Search to Messenger. </p>
  
  <p>Search component finds user (receiver) and me being sender I want to communicate but after finding user in Search I want to pass that user to Messenger so that I can chat with that specific user that found in <code>&lt;Search&gt;</code> component.</p>
  
  <p>In addition, Search component has Views that will display user calendar etc.. so ideally I don't want to use <code>&lt;Messenger&gt;</code> in render() method of Search as it will include Messenger component features inside the Search component which destroys the purpose of <code>&lt;Search&gt;</code> component. </p>
  
  <p>So my code is : </p>
  
  <pre><code>'use strict';
  
  
  var Search = React.cerateClasss({
  
  getDefaultProps: function () {
      return {
          date: new Date(),
          singerName:''
      };
  },
  getInitialState: function () {
      return {
          date: this.props.date,
          artistName: '',
          artistUserId: 1,
          maxNoArtist: 0,
          imagePath: '../common/images/1.png',
          user: null
      }
  },
  getArtistName: function () {
      var artist = [];
      var query = new Parse.Query(Parse.User);
      query.equalTo('userId', this.state.artistUserId);
      return query.first({
          success: (result) =&gt; {
              this.setState({artistName: result.get('name')});
              this.props.singerName= result.get('name');
              this.setState({imagePath: result.get('image').url()});
          },
          error: (data, error) =&gt; {
              console.log('Error occured : ' + error.message())
          }
      });
  },
  render: function () {
      if (!this.state.user) {
          return &lt;View style={styles.container}&gt;
              &lt;Text style={styles.label}&gt; Loading.... &lt;/Text&gt;
          &lt;/View&gt;
      }
      var username = this.state.user.get('username');
  
  
      return (
              &lt;View style={styles.container}&gt;
  
              &lt;ResponsiveImage source={{uri:this.state.imagePath}} initHeight="200" initWidth="400"/&gt;
  
  
              &lt;Text style={styles.label}&gt;
                  {this.state.artistName}
              &lt;/Text&gt;
  
              &lt;View style={styles.innerButtonView}&gt;
                  &lt;Button text={'Onki'} onPress={this.getPreviousArtistName}/&gt;
                  &lt;Button text={'Indiki'} onPress={this.getNextArtistName}/&gt;
              &lt;/View&gt;
  
              &lt;CalendarPicker
                  selectedDate={this.state.date}
                  onDateChange={this.onDateChange}
                  /&gt;
  
              &lt;View style={styles.innerButtonView}&gt;
                  &lt;Button text={'Cyk'} onPress={this.onLogoutPress}/&gt;
                  &lt;Button text={'Habarlas'} onPress={this.onPress}/&gt;
              &lt;/View&gt;
  
             &lt;Messenger singerName={this.props.singerName}&gt;&lt;/Messenger&gt; // BREAKS SEARCH COMPONENT PURPOSE - INCLUDES MESSENGER FEATURES IN TO SEARCH COMPONENT
  
          &lt;/View&gt;
      );
  },
  })
  
  
  var Messenger = React.createClass({
      getInitialState: function () {
          return {
              greeting: 'Salam',
              date: new Date(),
              errorMessage: '',
              user: null,
              olderMessageTextFrom: [],
              olderMessageTextTo: [],
              olderMessageDateFrom: [],
              olderMessageDateTo: [],
              earlierMessages: []
          }
      },
      componentWillMount: function () {
          Parse.User.currentAsync().then((user) =&gt; {
                  this.setState({user: user})
              }
          )
      },
      getMessages() {
          return [
              {
                  text: this.state.greeting,
                  name: this.props.singerName,
                  image: require('../common/images/1.png'),
                  position: 'left',
                  date: new Date()
              },
  </code></pre>