ios - React Native - Navigator Recursive Children Crashes -

i having @ navigator component in react-native cannot accept child node in stack. e.g. if take facebook app example. user search user, click friends, click user. crashes when try add stack error

invariant violation: expected component class, got [object object]. 

i have tried via standard navigator , react-native-router. current code looks this

class optionsbranch extends component {     render() {         /*<touchablehighlight style={styles.spaceout} onpress={() => {this.props.toroute({name:"test", component:userprofile})}}><text>[push]</text></touchablehighlight>*/         return (             <view style={styles.container}>                 <text>[optionsscreen]</text>                 <touchablehighlight style={styles.spaceout} onpress={() => {this.props.toroute({id:"x", name:"test", component:userprofile})}}><text>[push]</text></touchablehighlight>                 <touchablehighlight style={styles.spaceout} onpress={() => {this.props.toback()}}><text>[pop]</text></touchablehighlight>             </view>         );     } } 

i can work indefinitely long never re-use class. moment do, error.

i post links research there isn't out there navigator (rather navigatorios) except samples included framework , seem achieve ti without passing full route, need.

e.g.

<navbutton onpress={() => { navigator.push(_getrandomroute()) }} text="push"/> 

if try use in code (without react-native-router) i.e.

<touchablehighlight onpress={() => { this.props.navigator.push({ name:"mycomponent", component:mycomponent }) }} /> 

it errors also.

why this? limitation of navigator? error in code?

a boiler plate app uses tabbar , navigator have been quite helpful learn from. navigatorios little limited customisation.

it appears error cyclic dependency.

to prevent lazyloaded classes needed populate navigator. instead of blanket "requiring" them @ top of js files (yes, ignore tutorials you've done). instead require them in functions use them. remove cyclic dependancy , allows reuse classes.

e.g. instead of this:

var myclass = require('./myclass'); ... (some other code) ... render: function(){     return(         <touchablehighlight onpress={ () => {this.props.toroute( {name: "mypage", component: myclass, data: "somedata" } )}>             <text>link</text>         </touchablehighlight>     ); } 

do this:

gotomyroute: function(myparameter){     var myclass = require('./myclass');     this.props.toroute( {name: "mypage", component: myclass, data: myparameter }) }  render: function(){     return(         <touchablehighlight onpress={ () => {this.gotomyroute("somedata")} }>             <text>link</text>         </touchablehighlight>     ); }