javascript - RN: Navigationbar - How to change title from Rightbutton -

not sure why doesn't work - want have textinput in navigationbar-title , button clear input in "rightbutton". code should explain this: have simple navigator (simplified here):

      <navigator                 ref="navigator"                 navigationbar={                    <navigator.navigationbar                      style={styles.nav}                      routemapper={ navigationbarroutemapper } />                  } /> 

with textinput (for searching) in title, , icon clear input.:

var navigationbarroutemapper = {   rightbutton(route, navigator, index, navstate) {    if(route.name=='search') {     return (      <touchablehighlight         underlaycolor="transparent"         onpress={() => this.refs.searchtextinput.clear() }>       <icon           name={"clear"}           size={24}           color="#777777"           style={styles.rightnavbutton} />      </touchablehighlight>     );  }   title(route, navigator, index, navstate) {   if(route.name=='questionlist' || route.name=='search'){    return (     <textinput       ref="searchtextinput"       style={ styles.searchbar}       autofocus = {(route.name!='search')? false : true}       onfocus={           (route.name!= 'search')?               ( index<2?                 () => navigator.push({name: 'search', enablebackbutton: true})               :                 ()=> navigator.pop()               )           :               null }       onchangetext={(text) => {route.sendtexttomodule(text)}}       placeholder='ask...'/>);     } } 

error is: undefined not object(evaluating '_this2.refs.searchtextinput'). seems it's not in scope, yeah.. never learned js :)

using state textinput value make rid of complexity. add state called xtextinputvalue=' ' in constructor.

• onchangetext={(text) => {navigator.props.settextvaluex(text)}}//textinput oncchangetext
• titletext= {this.state.xtextinputvalue}// add prop in navigator component
• settextvaluex = ( (val) => this.setstate(xtextinputvalue:val)// add method in navigator component

that's it. onchangetext call navigator's settextvaluex function , function refresh value meanwhile titletext value refreshed during same render.

//your new navigator component

  <navigator              ref="navigator"              titletext= {this.state.xtextinputvalue}              settextvaluex = ( (val) => this.setstate(xtextinputvalue:val)              navigationbar={               <navigator.navigationbar                 style={styles.nav}                 routemapper={ navigationbarroutemapper } />            } />