reactjs - React Native - Call Function of child from NavigatorIOS -

i trying call child function right button on parent navigator.

a basic code example of need follows:

main.js

<navigatorios     style={styles.container}     initialroute={{         title: 'test',         component: test,         rightbuttontitle: 'change string',         onrightbuttonpress: () => ***i want call miscfunction here*** ,         passprops: {             fbid: this.state.fbidprop,             favspage: true         }     }}/> 

test.js

class test extends react.component{     constructor(props){         super(props);         this.state = {             variable: 'some string'         };     }     miscfunction(){         this.setstate({             variable: 'new string'         };     }     render(){         return(             <text> {variable} </text>         )     } } 

this covered in following github issue:

https://github.com/facebook/react-native/issues/31

eric vicenti comments describe how facebook solves internally:

currently best way create eventemitter in owner of navigatorios, can pass down children using route.passprops. child can mix in subscribable.mixin , in componentdidmount, can

this.addlisteneron(this.props.events, 'myrightbtnevent', this._handlerightbtnpress); 

it clear api needs improvement. actively working routing api in relay, , react-router, want navigatorios usable independently. maybe should add event emitter inside navigator object, child components can subscribe various navigator activity:

this.addlisteneron(this.props.navigator.events, 'rightbuttonpress', this._handlerightbtnpress); 

here's how looks in practical example:

'use strict';  var react = require('react-native'); var eventemitter = require('eventemitter'); var subscribable = require('subscribable');  var {     appregistry,     stylesheet,     text,     view,     navigatorios } = react; 

first pull in of our requirements including eventemitter , subscribable.

var app = react.createclass({     componentwillmount: function() {         this.eventemitter = new eventemitter();     },      onrightbuttonpress: function() {         this.eventemitter.emit('myrightbtnevent', { somearg: 'argvalue' });     },      render: function() {         return <navigatorios                 style={styles.container}                 initialroute={{                     title: 'test',                     component: test,                     rightbuttontitle: 'change string',                     onrightbuttonpress: this.onrightbuttonpress,                     passprops: {                         events: this.eventemitter                     }                 }}/>     } }); 

in our main top-level component, create new eventemitter (in componentwillmount) available across component, , use passprops pass down test component specify navigator.

we define handler right button press, emits myrightbtnevent dummy arguments when button pressed. now, in test component:

var test = react.createclass({     mixins: [subscribable.mixin],      getinitialstate: function() {         return {             variable: 'original string'         };     },      componentdidmount: function() {         this.addlisteneron(this.props.events, 'myrightbtnevent', this.miscfunction);     },      miscfunction: function(args){         this.setstate({             variable: args.somearg         });     },     render: function(){         return(             <view style={styles.scene}><text>{this.state.variable}</text></view>         )     } }); 

we add subscribable mixin, , other thing need listen out myrightbtnevent being fired app component , hook miscfunction it. miscfunction passed dummy arguments app press handler can use set state or perform other actions.

you can see working version of on rnplay:

https://rnplay.org/apps/h5mmnq