CODEWITHSUNDEEP
viewreact-nativenavigator
Wikened
Wikened

Reputation: 75

How do I change the navigation bar buttons in a view?

I am currently trying to use override the behaviour of the right navigation button from my view called 'AppointmentBookingView'. I totally confused about how the Navigator and NavigationBar work together so haven't been able to figure out the solution. Can anyone clarify if this can even be done?

I am using React Native Gifted Forms.

myapp.ios.js:

static NavbarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        if (index === 0) {
            return null;
        }
        var previousRoute = navState.routeStack[index - 1];
        return (
            <TouchableOpacity
                onPress={() => navigator.pop()}
                style={styles.navBarLeftButton}>
                <Text style={[styles.navBarText, styles.navBarButtonText]}>
                    Back
                </Text>
            </TouchableOpacity>
        );
    },

    RightButton(route, navigator, index, navState) {

    },

    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.name || 'MyApp'}
            </Text>
        );
    }
};

render(){
    return (
        <Navigator
            style={styles.appContainer}
            configureScene={this.configureScene}
            initialRoute={{name: 'MyApp', component: BookAppointmentView }}
            navigationBar={
                <Navigator.NavigationBar
                    style={styles.navBar}
                    routeMapper={MyApp.NavbarRouteMapper}
                />
            }
            renderScene={this.renderScene.bind(this)}
        />

    );
}

Here's where I would like to override the behaviour

AppointmentBookingView.js

<GiftedForm
    formName='bookingForm' // GiftedForm instances that use the same name will also share the same states

    openModal={(route) => {
        route.giftedForm = true;
        this.props.navigator.push(route);
    }}
>
</GiftedForm>

Upvotes: 0

Views: 862

Answers (1)

corasan
corasan

Reputation: 2754

What you could do is something like this:

...

RightButton(route, navigator, index, navState) {
    if (route.name === 'AppointmentBookingView') {
        // Here put the button you want and whatever you want it to do
    }
},

...

My answer it's a bit late but I hope it helps

Upvotes: 1

Related Questions