React-native-router-flux: Scene's Not "connected" to Redux store. Can't mapStateToProps

[AndrewHenderson]

Version

Tell us which versions you are using:

• react-native-router-flux v3.36.0
• react-native v0.37.0

Expected behaviour

In order for NavBars to be able to react to state changes on their child Components, they need a way to listen for state changes on the Redux store.

Actual behaviour

Currently, the context and arguments provided to the Scene component event callbacks offer no access to the Redux store, making state-based renders challenging.

Development

I've been forced to modify the project files within node_modules in order to get various desired behaviors. I'll explore connecting the Scene components. If I find a nice solution, I'll submit a PR.

If anyone has already developed a solution, please respond here.

[AndrewHenderson]

Can anyone provide an example of how to use this? Custom nav bar for individual scene or even different state of scene (new feature)

[stonepreston]

I'm trying to figure out how to implement state based navbar buttons (such as an edit button that changes to save when pressed) Anyone have any tips?

[AndrewHenderson]

@stonepreston Use the Scene's API, particularly the render functions such as renderRightButton to return a Component based on the props. The argument to these methods is the props, however if you're using Redux, this will be a WrapperComponent. The trick is to provide props when executing the scene action, i.e. Actions.myScene({ user: {…}});.

function renderProfileRightButton(props) {
  if (props.user.id === 1) {
    return <Button><Text>Settings</Text></Button>
  } else {
    return null;
  }
// Somewhere in your router
<Scene renderRightButton={renderProfileRightButton} />

[gwest7]

Any solution to this yet?

[AndrewHenderson]

@gwest7 I created my own NavBar component that I use as a child within my scene. I hide the NavBar at the router level, using it as a proxy to pass props, and then use those props within my scene component – providing relevant ones to my child NavBar.

It's given me a lot more control over the appearance of my NavBar which relies heavily of state within the scene itself.