Change the nav title without re-rendering

[nica0012]

Hi all,

Is it possible to change the nav title without re-rendering?

I am currently using this, which works:

  if (event.nativeEvent.contentOffset.y > 20) {
      Actions.refresh({ title: this.props.title) });
    } else {
      Actions.refresh({ title: 'Specs' });
    }

The problem is there is animation taking place during this switch - when the switch happens it lags the whole animation. I even tried to do the switch before and after the animation but it still lags it.

Cheers.

[daviscabral]

I think this might be possible only if you use a custom smart Header (that might get an action and trigger its re-render - without re-rendering the rest of the page).

A different alternative, hacky way, in case you are working with a sort of scrolling title replacement, it's to use conditional styles to apply the title over the Header (covering the header title).

Have you tried to disable the animations before updating the title?

[nica0012]

@daviscabral Thanks for the feedback! I just tried to use redux to dispatch an action (new title) to the router component after the scrollview reaches the title switch point, but this is causing the whole screen to re-render which causes the scroll to start over... I have also tried removing the title and then using absolute positioning to place my own over it like you mentioned, but i can't seem to over ride the zIndex value of the RNRF navbar.

Can you tell me more about this custom smart header? I thought using redux on the router component would do the trick, it caused the title to change but its causing a re-render on everything - maybe because its the overall wrapper?

[aksonov]

You may pass React component as header (i.e. smart header) that will listen for some redux/mobx events and changes the title.

[kuriel-trivu]

Why the default Header is not smart by default?