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

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.

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.

The <TouchableHighlight> element is the source of the error. The <TouchableHighlight> element must have a child element.

Try running the code like this:

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}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}

Yes, indeed you need to have one child inside your <TouchableHighlight>.

And, If you don't want to pollute your file with Views you can use React Fragments to achieve the same.

<TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>

or even better there is a short syntax for React Fragments. So the above code can be written as below:

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>

I had this same error, even when I only had one child under the TouchableHighlight. The issue was that I had a few others commented out but incorrectly. Make sure you are commenting out appropriately: http://wesbos.com/react-jsx-comments/

just after TouchableWithoutFeedback or <TouchableHighlight> insert a <View> this way you won't get this error. why is that then @Pedram answer or other answers explains enough.

In my case, I just had to put the element one line down:

This throws an error:

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}> {props.children}
  </TouchableWithoutFeedback>;
}

While this does not throw an error:

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    {props.children}
  </TouchableWithoutFeedback>;
}

Usually it happen in TochableHighlight. Anyway error mean that you must used single element inside the whatever component.

Solution : You can use single view inside parent and anything can be used inside that View. See the attached picture

enter image description here

1. <TouchableHighlight> element can have only one child inside

2. Make sure that you have imported Image

use TouchableHighlight from 'react-native-gesture-handler' instead of 'react-native'

import { TouchableHighlight } from 'react-native-gesture-handler';

The description from the documentation says:

> Gesture Handler library provides an implementation of RN's touchable > components that are based on native buttons and does not rely on JS > responder system utilized by RN. Our touchable implementation follows > the same API and aims to be a drop-in replacement for touchables > available in React Native.

https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/touchables/

You can install this library from: https://github.com/software-mansion/react-native-gesture-handler

It might be because of the wrong import statement for the TouchableWithoutFeedback.

Incorrect: import { TouchableWithoutFeedback } from 'react-native'

Correct: import { TouchableWithoutFeedback } from 'react-native-gesture-handler'