guide on dynamic title, leftButton and rightButton?

I’ve been using RNRF for the past year, but up until this day I don’t know if what I’m doing is correct or not. I hope that other users who have been through this could share some guidance on how they are managing dynamic properties on the navbar.

In most apps you don’t have a static title. The title changes to whatever the user is looking at.

let’s imagine the following case. A list with articles, a click on the title shows you the article (and the navbar shows the title of the article in question).

You would have 2 scenes:

<Scene title="Articles" key="articles" component="Articles" ... />
<Scene title="Article" key="article" component="Article" ... />

When you do Actions.article() and the user navigates to the article component he would see “Article” for title. We have the Actions.refresh() function and we can call it when we navigate to the Article component. The question is - where do you do this? onEnter? Unfortunately onEnter is static and it doesn’t have access to any of the component’s params or functions. If we do this in ComponentDidMount, then we manage to change the title, but the user sees “Article” and a second later “Dummy article title”

We could do Actions.article({title: “my title”}) and this would actually change the title in advance, but is this the supposed way to do this? Is the previous component supposed to know what the title of the navbar for the next component in the stack is?

What do we do with the buttons of the navbar? If you have an onRight function that is supposed to call a method of the component?

If you want to display a save button, then you need to provide the rightTitle and onRight properties on the scene. in my case onRight is calling the save method of the component, but when I define the scene I can’t access a this.save(), so I do this:

<Scene rightTitle=“Save” onRight={() => {}} … />

when the user navigates to this screen - he would see a save button - if he immediately clicks it - nothing will happen and after few miliseconds/second the onRight would change in response to Actions.refresh({onRight: {} => this.save()})

With this approach however I’ve run into a lot of

Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

errors… If one is not carefull enough and updates the navbar in componentWillReceive props with Actions.refresh, one often runs in to the maximum update depth problem.

Because of all that I created my own Navbar component and I render it myself in every component. The render function of my fictional Article component would look like:

render() {
const {title} = this.props.article

return (
<View style={{flex:1}}>
<Navbar title={title} rightTitle="save" onRight={() => this.save()} />
<View>the rest of the component...</View>
</View>
)
}

I don’t like the fact that I have to render the Navbar in every scene, but this way it seems that I spare myself a lot of troubles with componentWillUpdate, refreshes etc.

How is everyone else solving this issue? Neither the provided example, not the API reference and docs answer this. Can anyone shed some light on this?

[compojoom]

I gave up and switched to directly using react navigation, but most probably something similar like this https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists