React Native Pass data to another component
<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>