title: How to get callback from child component to parent component in React Native
body: <p>I have been working on react-native to get the callback from child to parent. Below is the code snippet of my implementation:</p>
  
  <p>MainView.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      StyleSheet,
      View,
      Text,
      Image,
      TouchableHighlight,
      FlatList,
      Dimensions,
  } from 'react-native';
  import ListCell from './ListCell';
  import {displayAlert} from './CustomAlert';
  type Props =  {
  };
  
  let winSize = Dimensions.get('window');
  export default class MainView extends Component&lt;Props&gt; {
  
  _keyExtractor = (item, index) =&gt; { return(index.toString());};
  
    _renderItem = ({item, index}) =&gt; {
      return (&lt;ListCell
      item={item}
      index={index}
      onPressItem={this._onPressItem}
      /&gt;);
    };
    _onPressItem = (item,index) =&gt; {
      console.log("Pressed row : "+index);
      displayAlert();
      // this.props.navigation.navigate('Detail',{item: item});
    };
      render() {
          return(
              &lt;FlatList
          style={styles.flatListStyle}
          data={this.props.listing}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        /&gt;
          );
      }
  }
  </code></pre>
  
  <p>The list Cell Component for FlatList is :</p>
  
  <p>ListCell.js</p>
  
  <pre><code>import React, {PureComponent} from 'react';
  import {
      StyleSheet,
      TouchableHighlight,
      View,
      Image,
      Text,
  } from 'react-native'
  
  
  export default class ListCell extends PureComponent {
    _onPress() {
      this.props._onPressItem(this.props.item,this.props.index);
    }
    render() {
      const item = this.props.item;
      const price = item.price_formatted.split(' ')[0];
      return (
        &lt;TouchableHighlight
        style={styles.listCellContainer}
        onPress={this._onPress}
        underlayColor='#dddddd'&gt;
          &lt;View &gt;
            &lt;View style={styles.rowContainer}&gt;
              &lt;Image style={styles.thumb} source={{uri:item.img_url}}/&gt;
              &lt;View style={styles.textContainer}&gt;
                &lt;Text style={styles.price}&gt;{price}&lt;/Text&gt;
                &lt;Text style={styles.title}&gt;{item.title}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
      );
  
    }
  }
  </code></pre>
  
  <p>this code will work fine when declared in single file, but when seperated in two different file it gives an error stating  <code>this.props._onPressItem</code> is undefined when tap on cell.</p>
  
  <p>I have followed the following <a href="https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17" rel="nofollow noreferrer">https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17</a> approach but didn't succeed on that either
  Any suggestions would be helpful.</p>