React-native-router-flux: Navbar buttons need to access scene component methods

[samdturner]

Version

• react-native-router-flux 3.26.2
  

  Current Functionality

I am inserting a rightButton into react-native-router-flux using the renderRightButton api. The problem I ran into is that the rightButton needs to access a method within the scene component (ie. FirstScene).

    class App extends React.Component {
      render() {
        return(
          <Router>
              <Scene
                  key="firstScene"
                  component={FirstScene}
                  rightTitle="Apply"
                  onRight={state => I want to call some method on the instance of FirstScene}
              />
          </Router>
        )
      }

From this code, we see that the onRight function will be passed a state variable. However, after inspecting this variable, it does not have a pointer to the current instance of the FirstScene component. So we have no way of accessing methods / state that live on FirstScene.

One option would be to put all of the data currently in the state of FirstScene in a reducer. However, I am trying to keep state within components and not rely on reducers because from my experience, it keeps things easier to reason about.

Feature Request

Can we implement a pointer on the state argument passed to onRight to the instance of the current scene component.

[rturk]

Hi @samdturner can you elaborate your use case? Can't you use another logic to interface between components? Ie: Redux?

[samdturner]

My specific use case is putting a "Done" button in the right of the navbar. This button does 2 things:
1) It submits a form using the data contained within FirstScene. The logic for submitting the form is also on FirstScene.
2) It transitions to a new Scene.

This sort of use case has come up a number of times in our app.

Using redux is an option but I'm trying to avoid putting additional state in reducers for two reasons:
1) It makes the app more difficult to reason about because developers have to follow the logic from the component => action creators => reducer => component (as opposed to everything being container within a single react component).
2) You have to manage stale data in the reducer that persists even after the component is unmounted.

[rturk]

@samdturner you can always implement your own NavBar. My Apps use own navbars in order case similar to yours.

This is a redacted version of what I'm using:
https://gist.github.com/rturk/a52321593dd9264ddd2ccbd43eb489b7

[samdturner]

Thanks @rturk. I'm thinking that's probably the best solution for now.

[esutton]

Thank you @rturk for a great idea! Your custom NavBar idea should be perfect and solve a lot of problems

https://gist.github.com/rturk/a52321593dd9264ddd2ccbd43eb489b7

It looks a bit weird since the NavBar buttons and title slide in along with the scene instead of buttons instantaneously of buttons appearing at the top immediately, then title sliding in.

I also can't seem to get the NavBar to layout at the top of the scene#2. Even with scene#2 hideNavBar={true} it seems to have reserved space for the navbar.

But it solves some critical problems!

Thanks again!

[rturk]

@esutton this gist is just a pice of my code. Probably I've forgot to paste something.

[enapupe]

This is nice but I think we need a more 'native' solution.. Having the navBar animating together with the scene is not acceptable. We need a way to set button properties from component scope ...

[enapupe]

The solution I found (I don't really like it) is:

componentWillMount () {
  Actions.refresh({
    rightTitle: 'Add'
    , onRight: this.addCard
  })
}

[matart15]

@enapupe Feels like cheating. But it helps. Thanks man.

[dktan]

@enapupe mark and waiting for better solutions

[GitHubGreg]

Thanks for these comments. Seems like such an obvious use case and I can’t underdtand why this is so hard to achieve.