• Register
0 votes
726 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?

8 4 2
2,300 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.
5 2 1
4,980 points

Related questions

0 votes
1 answer 8 views
8 views
Problem: When populating the listview with a valid data source, the following warning is printed at the bottom of the screen: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ListView.
asked Mar 15 ummesalma 22.9k points
0 votes
1 answer 4 views
4 views
Problem: I am stuck during learning as I have already mentioned in my question someone please cooperate me to continue my project-Thanks
asked Mar 31 jamuna1 8.5k points
0 votes
1 answer 5 views
5 views
Problem: API call is a success but the navigation screen is not changed. fire an error : undefined is not a function (evaluating '_this.props.navigator('SecondScreen')') Please help me solved out this issue in React Native. Thank you in advance.
asked Mar 27 ummesalma 22.9k points
0 votes
1 answer 4 views
4 views
Problem: I am stuck during learning as I have already mentioned in my question someone please cooperate me to continue my project-Thanks
asked Mar 21 rubelkhan 20.4k points
1 vote
1 answer 7 views
7 views
Problem : First time I'm trying to run React Native project for on my device (Android 4.2.2). Why I get this Error : unable to load script from assets index.android.bundle Can someone please help to understand this.
asked Mar 19 Shovo210 13.2k points
0 votes
1 answer 5 views
5 views
Problem: I have a problem that i am unable to resolve module react native.can any one suggest me the answer Thanks in advance
asked Mar 18 waseem memon 2.4k points
0 votes
1 answer 12 views
12 views
Problem: How can I get the fileName to be the complete path of the file in order to read it from Objective C? Any idea ?
asked Mar 10 ummesalma 22.9k points
0 votes
1 answer 1 view
1 view
Problem: i need some help about this problem? react-navigation-redux-helpers
asked 1 day ago Rohit kr 15k points
0 votes
1 answer 2 views
2 views
Problem: I have this (React native supports dom and virtual dom concept) program to work with. How can I fix It?
asked Mar 31 zayed1 24.7k points
0 votes
1 answer 5 views
5 views
Problem: I am trying to find the solution of this react-native-popup-dialog Can anyone tell me ?!
asked Mar 28 Madhav96 2.3k points