Is it possible to call a function in the parent component in React Native?

Question

I'm still very new to React Native, and I think this question is a fundamental misunderstanding of React.

I am trying to open modal text from a NavigationBar button. Both the custom component that I use ("react-native-modal selector") and the React Native Modal use child components to fire the event. I can’t understand how to open the modal form from the press of the right support.

<ModalPicker data = {[ {key: '1', label: '1'}, {key: '2', label: '2'}, {key: '3', label: '3'} ]} initValue = 'Select option' selectStyle={{ height: 200 }}> <NavigationBar title={{ title: "ModalTest" }} rightButton={{ title: "Open Modal" handler: () => ModalPicker.open() }} /> </ModalPicker> 

I am trying to determine if I can call the open () function, the function of the ModalPicker component from the "rightButton" prop of the NavigationBar component.

The component for ModalPicker has an opening and working function when I make TouchableHighlight a child, but how can I call a function from a child component of the props?

This is the main component of the application.

Answer 1

You can use ref='picker' for your parent component and reference this.refs.picker

 <ModalPicker data = {[ {key: '1', label: '1'}, {key: '2', label: '2'}, {key: '3', label: '3'} ]} ref='picker' initValue = 'Select option' selectStyle={{ height: 200 }}> <NavigationBar title={{ title: "ModalTest" }} rightButton={{ title: "Open Modal", handler: () => this.refs.picker.open() }} /> </ModalPicker>