Navigator Invariant Violation: onlyChild must be passed children with exactly one child

Question

I have an error when i use Navigator and TouchableHighlight in my app 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 for the LoginView

    var LoginView = React.createClass({
      onPress: function() {

      },
      render: function() {

        return (

            <View>
              <TouchableHighlight />
            </View>

        )
      },
    });

I'm sure this happens because of the fact that TouchableHighlight can only have one child (in the render function of TouchableHihglight.js there is a use of the onlyChild function from onlyChild.js to verify the number of children) What I do not understand is why in my case TouchableHighlight has more than one child (as I see it there are no children at all)???

hope you help me guys (:

Answer 1

You need to pass in one child to TouchableHighlight. Something like this:

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

Will eliminate the error.