Navigator Invariant violation: onlyChild should be passed on to children with exactly one child

Question

I have an error when I use Navigator and TouchableHighlight in my application this is the code for my index.ios.js (render and renderScene functions):

render: function() { return ( <View> <Navigator renderScene={this.renderScene}> </Navigator> </View> ) }, renderScene: function(route, nav) { return <LoginView navigator={nav} />; } 

and this is the code to login LoginView

  var LoginView = React.createClass({ onPress: function() { }, render: function() { return ( <View> <TouchableHighlight /> </View> ) }, }); 

I am sure that this is due to the fact that TouchableHighlight can only have one child (in the function of rendering TouchableHihglight.js the function onlyChild from onlyChild.js is used to check the number of children) I do not understand why in my case TouchableHighlight has more than one child (as I see, there are no children at all) ???

hope you help me guys (:

Answer 1

You need to transfer one child to TouchableHighlight. Something like that:

 <TouchableHighlight> <Text>Hello</Text> </TouchableHighlight> 

Will remove the error.