How to get props from a child view in react native - react-native

Question

I have a react-native view like this.
<Parent>
<Header/>
</Parent>
The header is also a view with some text input fields and icons. The Parent is another view created by adding the Header component. So what I want to do is, when I type some text on the text field which is located in the Header view, I want to take that value to the Parent view props. How to do this??? I've tried some answers that showed in StackOverflow. But they didn't give me what I expected.
For someone who wants to see the full code, This is the parent screen.
export default class ParentScreen extends Component {
constructor(props) {
super(props);
this.state = {
objects: null,
indicator: true,
};
}
render(){
<View style={styles.container}>
<HeaderBar />
</View>
}}
And this is the Header screen.
export default class HeaderBar extends Component {
constructor(props) {
super(props);
}
state = {
searchEnabled: false
};
render() {
return (
<View style={styles.navigationBar}>
<View style={styles.titleArea}>
{this.state.searchEnabled === true ? (
<View style={styles.titleArea}>
<Icon
name="arrow-back"
type="Ionicons"
color="black"
onPress={() => this.setState({ searchEnabled: false })}
/>
<TextInput
placeholder="Search"
placeholderTextColor="white"
style={styles.input}
onChangeText={text => this.setState({ filterKey: text })}
/>
</View>
) : (
<View style={styles.titleArea}>
<Image
style={styles.profileImage}
source={require("../../images/user_image_1.jpg")}
/>
</View>
)}
</View>
</View>
);
}
}

Answer 1

Define a function in the parent View, something like:
onChangeText = (text) => {
this.setState({
myUpdatedText: text
})
}
Then, pass it to the child as a prop:
<HeaderBar onChangeText={this.onChangeText} />
So in the child code you can use it like:
<TextInput
placeholder="Search"
placeholderTextColor="white"
style={styles.input}
onChangeText={this.props.onChangeText}
/>