How should a NavBar communicate with a Component in React Native?

Question

I am using 'react-native-router-flux' with my React Native app and I can't seem to figure out how my Custom Nav Bar should communicate with my component?

I have the following code.

NavigationRouter.js:

<Scene key='addDrillScreen' component={AddDrillScreen} navBar={AddDrillNavBar} />

AddDrillScreen.js:

class AddDrillScreen extends React.Component {
  performSave() {
    // Want to call performSave() when NavBar is clicked
  }

}

AddDrillNavBar.js:

class AddDrillNavBar extends React.Component {    
  render() {
    return (
        <View style={styles.saveButton}>
        <TouchableOpacity onPress={() => {
          // ??? How do I trigger the performSave() on my AddDrillScreen?
        }}>
          <Text style={styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
      </View>
    )
  }

I don't understand how the two communicate

Here is a similar issue. Hope this fixes your problem. http://stackoverflow.com/questions/32846655/how-do-i-call-execute-a-function-from-another-component-in-react-native — Ujjwal Nepal, Apr 06 '17 at 09:12

score 0 · Answer 1 · answered Apr 06 '17 at 10:01

You have a couple of options here

Make performSave static
Move performSave to a different class, one that could be shared and isn't a react component
Use the best practice for this kind of action in your flux library if you use one. For instance, in redux you would have included that code in an action creator.

How should a NavBar communicate with a Component in React Native?

1 Answers1