title: Pass data between two components in React Native
body: <p>I have a component that encapsulates three components one of them is the <code>DrawerLayoutAndroid</code>. Now I want to pass the reference of the drawer from the drawer component to the main component and then pass it to the header component so I can trigger it from the header component.</p>
  
  <p>I have no idea how to do that.</p>
  
  <p>Here is the main component 'cases.js'</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
  import Header from '@components/header';
  import BottomBar from '@components/bottom-bar';
  import SideBar from '@components/drawer';
  
  export default class Cases extends Component {
  
    state = {
      title : 'Cases'
    }
  
    change_text = () =&gt; {
  
      this.setState({ title : 'Test' })
  
    }
  
    open_drawer = (ref) =&gt; {
  
      ref.openDrawer();
  
    }
  
    close_drawer = (ref) =&gt; {
  
      ref.closeDrawer();
  
    }
  
    render() {
  
      return (
  
        &lt;SideBar style={ styles.container }&gt;
  
          &lt;Header title={ this.state.title } change_text={ this.change_text } open={ this.state.side_bar } /&gt;
  
          &lt;View style={ styles.body }&gt;
  
            &lt;Text style={ styles.text }&gt; { this.state.name } &lt;/Text&gt;
  
            &lt;TouchableOpacity onPress={ () =&gt; this.change_text() } style={ styles.button }&gt;
  
              &lt;Text&gt; Change State &lt;/Text&gt;
  
            &lt;/TouchableOpacity&gt;
  
          &lt;/View&gt;
  
          &lt;BottomBar ref={ this.state.side_bar } /&gt;
  
        &lt;/SideBar&gt;
  
      )
  
    }
  
  }
  
  const styles = StyleSheet.create({
    container : {
      flex : 1,
      flexDirection: 'column',
    },
    body : {
      flex : 1,
      backgroundColor: '#ccc',
      justifyContent: 'center',
      alignItems: 'center'
    },
    text : {
      color : '#fff'
    },
    button : {
      backgroundColor : '#eee',
      paddingVertical: 5,
      paddingHorizontal: 10
    }
  })
  </code></pre>
  
  <p>Here is my header:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
  import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
  import LinearGradient from 'react-native-linear-gradient';
  
  export default class Header extends Component {
  
    change_text = () =&gt; {
  
      this.props.change_text();
  
    }
  
    open = ()
  
    render () {
  
      return (
  
        &lt;LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#a4d294', '#3ac6f3']} style={ styles.header }&gt;
  
            &lt;TouchableOpacity onPress={ () =&gt; this.props.change_text() }&gt;
  
              &lt;Image source={ require('@media/images/add.png') } style={ styles.add_button } /&gt;
  
            &lt;/TouchableOpacity&gt;
  
            &lt;Text style={ styles.title }&gt; { this.props.title } &lt;/Text&gt;
  
            &lt;TouchableOpacity onPress={ () =&gt; this.props.open() }&gt;
  
              &lt;Image source={ require('@media/images/more.png') } style={ styles.more_button } /&gt;
  
            &lt;/TouchableOpacity&gt;
  
        &lt;/LinearGradient&gt;
  
      )
  
    }
  
  }
  
  const styles = StyleSheet.create({
    header : {
      height: 70,
      backgroundColor: '#eee',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center'
    },
    title : {
      color : '#fff',
      textAlign: 'center',
      fontSize: 20,
      letterSpacing: 3
    },
    add_button : {
      width: 30,
      height: 30,
      marginHorizontal: 10
    },
    more_button : {
      width: 30,
      height: 30,
      marginHorizontal: 10
    }
  })
  </code></pre>
  
  <p>And here is my drawer.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text } from 'react-native';
  import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
  import LinearGradient from 'react-native-linear-gradient';
  
  export default class Drawer extends Component {
  
    render () {
  
      const NavigationMenu = (
        &lt;LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['#a4d294', '#3ac6f3']} style={{ flex: 1 }}&gt;
          &lt;View style={{ flex : 6, justifyContent: 'center' }}&gt;
            &lt;Text&gt;He There&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/LinearGradient&gt;
      )
  
      return (
  
        &lt;DrawerLayoutAndroid
          drawerWidth={250}
          drawerPosition={ DrawerLayoutAndroid.positions.Right }
          renderNavigationView={ () =&gt; NavigationMenu }
          ref={ (drawer) =&gt; this.props.ref = drawer }
        &gt;
  
          { this.props.children }
  
        &lt;/DrawerLayoutAndroid&gt;
  
      )
  
    }
  
  }
  </code></pre>