questions migrating from react-native-router

[G3z]

I with react-router i had a routing component made like so

<NativeRouter>
    <AndroidBackButton>
        <View style={{ flex: 1 }}>
            <Route exact path="/" component={DashBoard} />
            <Route exact path="/activity/:id" component={Activity} />
            <Route exact path="/detail/:type/:id" component={Detail} />
            ...
            </View>
    </AndroidBackButton>
</NativeRouter>

and i tried implementing RRN like so (is this correct ?)

<NativeRouter>
    <AndroidBackButton>
        <Navigation navBarStyle={{ backgroundColor: colors.lightBlue[500] }} titleStyle={{ color: 'white' }} backButtonStyle={{ color: 'white' }}>
            <Card exact path="/" component={DashBoard} title="Dashboard" />
            <Card exact path="/activity/:id" component={Activity} />
            <Card exact path="/detail/:type/:id" component={Detail} />
            ...
        </Navigation>
    </AndroidBackButton>
</NativeRouter>

in the first example the navbar is a plain view and so each component (Dashboard, Activity, Detail) has a NavBar components and controls things like title, color, buttons with props
I was wandering how could I maintain the same level of control, if possible, i had before

[CharlesMangwa]

Hi @G3z! If I'm not mistaken: as you can see in <Navigation /> documentation, you don't need to wrap it in a <AndroidBackButton /> component or whatsoever. As you can see in the Huge example here and here, <Navigation /> just display the right <Card /> according to which route you're calling. Hope I could help you out :)

[G3z]

thank you! and for the second part: do you have any idea on what is the best pattern to manage the navbar from in inside my components ?

[CharlesMangwa]

It can be interesting to handle these options in your 'parent' state, and then modify your navigation bar whenever this state changes imho.

I'm not 100% about it, but I think it could be something like this:

App extends Component {
  state = {
    title: 'Hello',
  }

  _onChangeTitle{
    this.setState(() => ({ title: 'world!' }))
  }
  
  render() {
    return (
      <Navigation
        navBarStyle={{ backgroundColor: 'purple' }}
        titleStyle={{ color: 'white' }}
      >
        <Card
          exact path="/home"
          component={() => (
            <NavBarModifier
              onPress={() => this._onChangeTitle()}
            />
          )}
          title={this.state.title}
        />
      </Navigation>
    )
  }
}

const NavBarModifier = (onPress) => (
  <TouchableWithoutFeedback onPress={onPress}>
    <View>
      <Text>Change navbar title !</Text>
    </View>
  </TouchableWithoutFeedback>
)

[LeoLeBras]

Hey @G3z,
To manage the nav bar from inside your components, you can do this :

class App extends Component {

  state = {
    fooTitle: 'Foo',
    barTitle: 'Bar',
  }

  setNavigationState = (key, value) => {
    this.setState({
      [key]: value,
    })
  }

  render() {
    return (
      <Navigation>
        <Card
          path="/foo"
          title={this.state.fooTitle}
          render={(ownProps) => (
            <Foo
              {...ownProps}
              setNavigationState={this.setNavigationState}
            />
          )}
        />
        <Card
          path="/bar"
          title={this.state.barTitle}
          render={() => (
            <Bar
              {...ownProps}
              setNavigationState={this.setNavigationState}
            />
          )}
        />
      </Navigation>
    )
  }

}

const Foo = (props) => (
  <TouchableHighlight
    onPress={() => props.setNavigationState('fooTitle', 'My new title')}
  >
    <Text>Change title</Text>
  </TouchableHighlight>
)

const Bar = (props) => (
  <TouchableHighlight
    onPress={() => props.setNavigationState('barTitle', 'My new title')}
  >
    <Text>Change title</Text>
  </TouchableHighlight>
)

You just need to handle state ! 🚀

[G3z]

Thanks !
I think it's worth making this an example in the documentation

[LeoLeBras]

I found some limitations with this method, I'll fix it soon.

[LeoLeBras]

@G3z Yes the documentation should be updated. PR's are welcomed !

[G3z]

I tried this apporach but it seems that the title prop in the Card component doesn't trigger an update in the actual title.
It works with title prop of Navigation component

[LeoLeBras]

I'm quite busy currently by myself with lots of other stuff. I'll investigate this soon.

[LeoLeBras]

This should be fixed in 1.0.0-rc.2

[zachrnolan]

@LeoLeBras I'm following the pattern you laid out above, but it seems to have issues when you have multiple instances of a screen in the same stack.

Example:

1. Start at /home tab which has it's own <Navigation> component
2. Push to /home/profile/1234 and set the title to the username jane
3. Push again to another profile /home/profile/5678 and set the title to the username bob
4. Tap back arrow to go back to /home/profile/1234
5. Notice that the title is set to bob when it should be jane

I have a minimal repo that shows the issue here: https://github.com/zachrnolan/react-router-navigation-demo

This seems to be directly related to this issue, but let me know if you want me to create a new issue. Thanks!

[LeoLeBras]

Hey @zachrnolan ,
I'm facing a similar issue on an application I'm working on. This bug is related to a bad design of the library. I'm fixing that on the dev branch. But it requires a lot of refactoring and I don't have much time to fix it. I hope to finish in the coming weeks.
A huge thank you for the minimal repo ❤️.
I would probably come back to you to try the @next version of the library with a specific version number (available for a limited number of people). Is that okay with you ?
Thank you for your different feedbacks. I'll try to answer them as best I can. Feel free to talk to me in DM on Twitter about you have specific needs. 😁

[zachrnolan]

@LeoLeBras Thanks for the reply! I'm happy to test the new version when it's ready. I have an app in production using Navigation Experimental and have been doing research on libraries to replace it. Your library is the best/easiest I've used so far, so I'm holding out for a v1 stable to start the replacement process.

Consider me in for any QA/feedback you need.

[LeoLeBras]

Great ! 😘

[jvt]

Hi @LeoLeBras! I'm also running into this issue now, was wondering if you've had a free moment to work on this bug at all? Thanks for the awesome library! 😄