• Register
0 votes
858 views

Problem :

I am learning React. I have written the below myrender method in my React Native code:

myrender() {
    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>
    );
  }

But it is giving me below error

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

 How can I fix above error?

2.3k points

Please log in or register to answer this question.

1 Answer

0 votes

Solution :

I have understood your issue.  You should have one child inside the <TouchableHighlight>.

If you are not willing to fill up your file with the Views then in that case you can also use the React Fragments to achieve your goal. Please refer below code snippets

<TouchableHighlight>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableHighlight>

For even speedy results there is a short syntax also available for the React Fragments. So your above code can also be written as shown below:

<TouchableHighlight>
  <>
   ...
  </>
</TouchableHighlight>
You can even face the issue when you have only one child under your TouchableHighlight. The issue may come up if you have few others commented out but incorrectly. So please make sure that you are commenting out properly.
Hope you have understood the possible reasons behind the error and also the solutions to fix the error.
5k points