call Child component function from Parent Header Button - react-native

Question

I Have two classes Parent class and the Child class and I want to call the Child class function from the Parent class. the problem is that I want to call the child class function from the Parent Header Button. I tried the refs method but didn't get the result. is there any other way to do it?
child class:
class FilterSlider extends React.Component {
constructor(props) {
super(props);
console.log(props);
}
PanelShow = () => {
this._panel.show();
};
render() {
return (
<SlidingUpPanel
ref={(c) => (this._panel = c)}
draggableRange={{ top: height / 1.2, bottom: -10 }}
animatedValue={this._draggedValue}
showBackdrop={false}
>
<View style={styles.panel}>
<View style={styles.panelHeader}>
<Text style={{ color: '#FFF' }}>Bottom Sheet Peek</Text>
</View>
<View style={styles.container}>
<Text>Bottom Sheet Content</Text>
</View>
</View>
</SlidingUpPanel>
);
}
}
export default FilterSlider;
and parent class:
class ReportsListView extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.navigation.setParams({
openSlider : this._openSlider
});
}
_openSlider() {
this.refs.child.PaenlShow();
}
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
title : navigation.state.params.name,
headerLeft : null,
headerStyle : {
backgroundColor : '#4c8572'
},
headerRight : (
<View style={{ paddingLeft: 10, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => params.openSlider()}> //from this icon i want to call the child PanelShow function.
<Icon name="arrow-left" size={30} color="#ffffff" />
</TouchableOpacity>
</View>
),
headerTitleStyle : {
flex : 1,
color : '#fff',
alignItems : 'center',
justifyContent : 'center',
fontWeight : 'bold'
}
};
render()
{
return(
<FilterSlider ref = 'child'/>
)
}
};

Answer 1

You're using ref property incorrectly. To fix this, you can try this:
Parent component
class ReportsListView extends Component {
componentWillMount(){
this.refs.child = null;
}
render() {
return (
<FilterSlider ref={(ref) => {
this.refs.child = ref
}}/>
)
}
}
Now, you can call your function from child component, e.g: this.refs.child.doSomethings().