React Native Navigator Right Button Action

Question

Using a Navigator, I need a right button that modifies the state of the top level view. Using Navigator and a custom NavigationBarRouteMapper, I'm able to achieve all of this except for the button action.

Using this Navigator implementation:

         <Navigator
            ref='navigator'
            style={styles.appContainer}
            initialRoute={{name: initialRootView.title, component: initialRootView.view}}
            navigationBar={
              <Navigator.NavigationBar
                routeMapper={NavigationBarRouteMapper}
                style={styles.navBar}
              />
            }
            configureScene={() => {
                return Navigator.SceneConfigs.FloatFromRight;
            }}
            renderScene={(route, navigator) => {
                if (route.component) {
                    // add `navigator` and `cache` as props to any top-level component that gets pushed
                    // onto the navigation stack.
                    return React.createElement(route.component, { navigator: navigator, cache: this.state.cache, ...route.props });
                }
            }}
          />

And this NavigationBarRouteMapper:

var NavigationBarRouteMapper = {
  RightButton: function(route, navigator, index, navState) {
    console.log(route.component);
    return (
      <TouchableOpacity
        onPress={route.component.onRightButton}
        style={{width: 100, height: 44, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Right Button</Text>
      </TouchableOpacity>
    );
  },
};

This renders the right button properly, and my top-level component has a function onRightButton. But how come it never gets called?

Doing some debugging within the context of RightButton, route.component.prototype.hasOwnProperty('onRightButton') returns true but route.component.hasOwnProperty('onRightButton') returns false. How is this possible? What's strange with the route.component reference returned?

Any help appreciated.

Answer 1

You can pass anything you want along as part of the route. For example:

initialRoute={{name: initialRootView.title, component: initialRootView.view onRightButton: (() => {console.log('hi')})}}

Then you can access it inside the RightButton by:

onPress={route.onRightButton}

In you example you are trying to access a function from the React Component Class for your component, which will not expose that function.