React-native-router-flux: Enable/Disable rightButton

[NIcholasJudd]

I need to be able to enable and disable the rightButton on the nav bar from within a component however i cant seem to find a way to achieve this I've managed to "disable" the button by making the onRight=()=>null but cant work out how to change it to ()=>Actions.ProgramBuilder2({title: 'My Action Plan'})

<Scene key="ProgramBuilder1" component={ProgramBuilder1} panHandlers={null} sceneStyle={styles.scene} //initial={true} title="Check In" onRight={enabled === true ? ()=>Actions.ProgramBuilder2({title: 'My Action Plan'}): ()=>undefined} rightButtonTextStyle={[styles.navTitle, styles.navTitleDisabled]} rightTitle="Next" />

[andpor]

I am having a similar issue. The left/right buttons are dynamic based on the state of the current scene. Most of the time the buttons are not even visible and only appear when conditions are met and application decides that transition should be made available.

This is really a very fundamental piece of functionality. Would be great to have this implemented inside the package. Otherwise have to do customizations....

Why not allow the scene to decide whether there is a left/right button and allow it to render and include a local callback rather than having the callback sitting bespoke at the route configuration spec...

This is the only piece missing to make this routing package a complete navigation package..

[cridenour]

This is really a very fundamental piece of functionality. Would be great to have this implemented inside the package. Otherwise have to do customizations....

I'm not sure it always has to be implemented at the package level, just as long as we provide the option to customize, it will work for everyone.

That said, we're always open to reviewing a PR with this functionality.

[aksonov]

@NIcholasJudd Have you tried to set onRight={null} AND rightTitle={null} ?

[aksonov]

@andpor It is how React Native work. NavBar is overlay which is persisted across scenes, so it cannot be part of individual Scene. As I understand it is done to support 'native' looking animations that are DIFFERENT for scene and for navbar.

[andpor]

hmmm, i don't quite agree...buttons can be rendered based on the component that is being rendered in a given route...you already have an instance...you should be able to call methods on it in fact to render a button (and tied it up to its own local callback)..

[aksonov]

The component doesn't have _instance_ of scene. It just renders scene. DefaultRenderer is stateless now. You may implement your own stateful renderer and submit PR.

[EricWithCare]

I agree, I'm having a hard time figuring out how to do this. I can see how you might want to hide/show a right button based on the state of the rendered scene (eg. a Save button). This also applies to the title, where the content of the title depends on a server response returned upon mounting of a scene/component. How would I do that?

[anthonywebb]

@EricWithCare you can use refresh to modify the title like this (works great):

Actions.refresh({title: this.props.name})

Oddly enough I am trying to use a similar mechanism to update the right button like this:

Actions.refresh({rightTitle: "foo", onRight: this._save()})

When I do that I get a warning "Both onRight and rightTitle/rightButtonImage must be specified for the scene", and I dont see the right button.

[anthonywebb]

@EricWithCare for more info on this issue see my question here https://github.com/aksonov/react-native-router-flux/issues/663

[albo1337]

Hey @anthonywebb
you have to do: Actions.refresh({rightTitle: "foo", onRight: this._save});

[albo1337]

My problem here is, that I don't know how to add source to rightButtonimage. When I'm doing for example this: rightButtonImage: "../../img/ic_shopping_cart.png"

An error appears: Warning: Failed propType: invalid prop 'source' supplied to 'Image'. Check the render method of 'NavBar'.

What am I doing wrong here?

Best regards,
albo1337

[albo1337]

Got it.

I had to do: rightButtonImage: require("../../img/ic_shopping_cart.png")

[adarshTS]

this code worked for me leftButtonImage={require('./components/Images/bg_inner.png')}

[javidjamae]

If anybody is interested, I made a sample app that demonstrates how to use Actions.refresh to update the Scene parameters.

https://github.com/javidjamae/react-native-redux-expo-starter/tree/rnrf-action-refresh