react native - Setting NavigationBar's title asynchronously -

i trying set navigationbar navigator. when display static title, ok. however, when try set title asynchronously (for example when go user's profile route, user's display name api , set this.props.navigation.title when api call promise resolves) title gets jumpy.

what proper approach issue?

here component (which connected redux store) handles navigationbar:

import react 'react-native'; let {     component,     navigator,     view } = react;  import {connect} 'react-redux';  let navigationbarroutemapper = {     title: (route, navigator, index, navstate) => {         return (             <text style={{margintop: 15, fontsize: 18, color: colors.white}}>{this.props.navigation.title}</text>         );     } };  class app extends component {     render() {          return (             <view style={{flex: 1}}>                 <navigator                     ref={'navigator'}                     configurescene={...}                     navigationbar={                         <navigator.navigationbar routemapper={ navigationbarroutemapper } />                     }                     renderscene={(route, navigator) => {...}}                 />             </view>         );     } }  export default connect(state => state)(app); 

since routemapper stateless object , route seems way (best practice) keep state of navigationbar.

route can set this.props.navigator.replace(newroute); in child components. however, re-renderscene , cause dead loop of rerendering child components. want change navigationbar without side effects.

luckily, there's way keep context of current route. this:

var route = this.props.navigator.navigationcontext.currentroute; route.headeritems = {title: "message"}; this.props.navigator.replace(route); 

refs:

• how change title of navigatorios without changing route in react native

• [navigator] binding navigation bar underlying scene