React-Native - Calling Parent Method from Child Method

Question

I have a Child, Parent Component and i need the Parent Component method to be called from a Child Component method.

CODE

class Social extends Component {
            constructor(props) {
                super(props);

                var tabLabel = this.props.tabLabel;

                this.state = { text: 'Search ' + tabLabel + ' here...' , textInput: ''};
              }
                doneClick() {
                    this.props.showTrans;
                    var request = new XMLHttpRequest();
                    request.onreadystatechange = (e) => {
                      if (request.readyState !== 4) {
                        return;
                      }

                      if (request.status === 200) {
                        alert(request.responseText);
                      } else {
                        console.warn('error');
                      }
                    };

                    request.open('GET', "https://www.googleapis.com/youtube/v3/search?part=snippet&q=tupac&key=AIzaSyDFOz50C_XkuEh2T-2XTN9fqm_5xHYzbg8");
                    request.send();
                }
                      render() {

                        return (
                            <View style={styles.menu} >


                                    <View style={styles.searchbar} >
                                    <Image style={{marginTop: 10 ,marginLeft: 10 , width: 20, height: 20}} source={require('./images/search.png')} />
                                    <TextInput
                                            onSubmitEditing={ this.doneClick }
                                         style={{marginLeft: 5, color: '#757575', width: width - 80, height: 40, fontSize: 11,}}
                                         onChangeText={(textInput) => this.setState({textInput})}
                                         placeholder={this.state.text}
                                          underlineColorAndroid="transparent"
                                         />
                                </View>
                                <View style={styles.sep} >
                                </View>

                            </View>

                        );
                      }
                    }

This is Social Child Component

CODE

class ScrollableTabBarView extends Component {

                    constructor(props) {
                        super(props);
                        this.showTrans = this.showTrans.bind(this);
                        this.state = { transWidth: 0,transHeight: 0,tabScroll: null };
                        alert('dddd');

                    }



                    hideTrans() {
                        this.setState({ transHeight: 0, transWidth: 0 });
                    }
                    showTrans() {
                        this.setState({ transHeight: width, transWidth: height });
                    }

                  render() {
                    return (<View style={{ width: width, height: height, position: 'absolute' }}>
                    <ScrollableTabView
                      style={{marginTop: 40, }}
                      initialPage={0}
                      renderTabBar={() => <ScrollableTabBar/ >}
                    >
                      <Text tabLabel='User'>My</Text>
                      <Social  tabLabel='Settings'/>
                      <Social showTrans={ this.showTrans } hideTrans={ this.hideTrans }  tabLabel='Youtube'></Social>
                      <Social tabLabel='Vimeo'>favorite</Social>
                      <Social tabLabel='MySpace'>project</Social>
                    </ScrollableTabView>

                    <View style={{ justifyContent: 'center', alignItems: 'center', top: 0, left: 0,width: this.state.transWidth, height: this.state.transHeight, position: 'absolute', backgroundColor:'rgba(52,52,52,0.5)' }}>
                    <Image style={{width: 30, height: 30}} source={require('./images/loader.gif')}/>

                    </View>

                    </View>)

                  }
                }

Parent Component.

How do i get this.props.showTrans to get called

Answer 1

You are almost calling it. It should be

doneClick = () => {
  this.props.showTrans();
  ....
}

You might still get an error since showTrans will be called in the scope of your child component. You might want to make your showTrans, hideTrans as ES2015 class properties shown below or manually bind it so that "this" scope is proper.

hideTrans = () => {
  this.setState({ transHeight: 0, transWidth: 0 });
}
showTrans = () => {
  this.setState({ transHeight: width, transWidth: height });
}