How to call a parent function within child in Native React - function

Question

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 !

Answer 1

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);
}

Answer 2

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>