How do you set custom actions for buttons on the initial route? about react-native-navbar

[Kureev]

Hi @aaronksaunders! I'm not sure that I got your case. onNext specifies a callback for "Next" button.

[aaronksaunders]

the current example assumes that the component loading the new NavBar/Component will handle the next action when I reality it doesn't make sense.

Even in the basic example you have provided, architecturally it makes more sense to have the Example component handle the click event on the menu, not the root component Basic your current example tightly couples the two which I don't this is appropriate... unless I am missing something

class Example extends React.Component {
  render() {
    return (
      <View>
        <Text>Some content</Text>
      </View>
    );
  }
}

class Basic extends React.Component {
  renderScene(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route
      });
    }

    return (
      <View style={styles.navigator}>
        {navBar}
        <Component navigator={navigator} route={route} />
      </View>
    );
  }

  handleNext() {
    alert('Next button click handler');
  }

  render() {
    return (
      <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: Example,
          navigationBar: <NavigationBar
            title="Initial View"
            onNext={this.handleNext} //<== this should be handled by Example Component
          />
        }}
      />
    );
  }
}

[JonasJonny]

You can use "customNext={<RequiredComponentName />}" 
and there use "this.props.navigator.***" or other logic.

[aaronksaunders]

@JonasJonny not really following you here. Can you provide a little more detail?

[JonasJonny]

You should use customNext instead of onNext. With customNext you can pass whole component.
In that component you can have render function with TouchableHighlight and onPress function which will call:

// DefaultComponent

<Navigator
                            renderScene={this.renderScene}
                            initialRoute={{
                                component: ***,
                                navigationBar: <NavigationBar
                                    title="***"
                                    customNext={<RequiredComponentName />}
                                    ...
                                />
                            }}
                        />

//RequiredComponentName

goToPage() {
        this.props.navigator.push({
            title: "New title",
            component: AnotherComponentName,
            backButtonTitle: 'Back',
            navigationBar: <NavigationBar
                customNext={<DifferentComponentName/>}
                titleColor="#fff"
                ...}
                />
        });
}


render() {
        return (
            <TouchableHighlight underlayColor="transparent" onPress={this.goToPage}>
                ...
            </TouchableHighlight>
        )
    }