CODEWITHSUNDEEP
functionreactjsreact-nativeparent-childnative
sshmaxime
sshmaxime

Reputation: 537

How to call a parent function within child in Native React

After hours spent googling around without finding an answer ... I'm asking for your help.

So what I want to do : Call the function named _toggleSearchBar() (which is in the parent) within the Child so when the onPress event (which is in the child) fire it changes the value 'isVisible' inside the parent.

Parent

class HomeScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {isVisible: false};
  }

  static navigationOptions = {
    title: 'P O S T E R',
    headerStyle: { backgroundColor: '#CECECE' },
    headerTitleStyle: { color: 'black', fontSize: 30, fontFamily: 'HelveticaNeue-CondensedBlack'},
    headerRight: <DisplayIcon src={require('./ressources/icon_search.png')} myMethod={'HERE'}/>,
    headerLeft: <DisplayIcon src={require('./ressources/icon_aroundMe.png')}/>,
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
          <View style={styles.bck}>
          <ScrollView>
            <DisplayImage src={require('./ressources/logo.jpg')} />
            <DisplayImage src={require('./ressources/logo1.jpeg')} />
            <DisplayImage src={require('./ressources/logo2.jpg')} />
            <DisplayImage src={require('./ressources/logo3.jpeg')} />
            <DisplayImage src={require('./ressources/logo4.jpg')} />
            <DisplayImage src={require('./ressources/logo5.jpeg')} />
            <DisplayImage src={require('./ressources/bde.jpeg')} />
          </ScrollView>
        </View>
        <Display enable={this.state.isVisible} style={styles.ViewIn}>
          <View>
            <TextInput style={styles.textIn}></TextInput>
          </View>
        </Display>
      </View>
    )
  }
  _toggleSearchBar() {
    this.setState(previousState => {
      return { isVisible: !this.state.isVisible };
    });
  }
}

Child

class DisplayIcon extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TouchableHighlight onPress={this.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' }>
        <Image style={styles.Picture} source={this.props.src}/>
      </TouchableHighlight>
    );
  }
}

const styles = StyleSheet.create({
  Picture: {
    marginLeft: 10,
    marginRight: 10,
    height: 30,
    width: 30,
  }
});

Bind didn't work. Nor passing the function via props ...

Thanks for your help and your time !

Upvotes: 2

Views: 1225

Answers (2)

sshmaxime
sshmaxime

Reputation: 537

HELP FOR COMPREHENSION

Inside the child.

This is not working (via Parent function)

<TouchableHighlight onPress={this.props.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' } style={styles.lol}>
        <Image style={styles.Picture} source={this.props.src}/>
</TouchableHighlight>

This is working (via child function)

  lol() {
    alert('lol');
  }

  render() {
    return (
      <TouchableHighlight onPress={this.lol} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' } style={styles.lol}>
        <Image style={styles.Picture} source={this.props.src}/>
      </TouchableHighlight>

Upvotes: 0

Sagiv b.g
Sagiv b.g

Reputation: 31024

In the Child component you should invoke this.props.myMethod and not this.myMethod.
Example: 

<TouchableHighlight onPress={this.props.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' }>

In your Parent you should pass in a prop to the child - myMethod={this._toggleSearchBar}.
Example: 

<DisplayIcon src={require('./ressources/icon_search.png')} myMethod={this._toggleSearchBar}/>

Note that you should bind _toggleSearchBar to the class.
Do it in the constructor: 

constructor(props){
  super(props);
  this._toggleSearchBar = this._toggleSearchBar.bind(this);
}

Upvotes: 0

Related Questions