"React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

Question

I have the following render method in my React Native code:

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }

It gives me this error:

React.Children.only expected to receive a single React element child

If I remove the TouchableHighlight component, it works fine. If I remove the Image component, it still gives that error.

I can't see why it gives me this error. <View> should be able to have more than one component inside it for rendering.

Answer 1

It seems that <TouchableHighlight> must have exactly one child. The docs say that it supports only one child and more than one must be wrapped in a <View>, but not that it must have at least (and most) one child. I just wanted to have a plain coloured button with no text/image, so I didn't deem it necessary to add a child.

I'll try to update the docs to indicate this.