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

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 3.1K views
3.1K views
Problem : I am trying to use the native base for making app in the react-native. I am very new to both things. When I try to run the app It gives me below error: &ldquo;Module appregistry is not a registered callable module (calling runapplication)&rdquo;Below is my code for ... </Header>             </Container>         );     } } My native-base version is as follows "native-base": "^2.1.2"
asked Jan 9 alecxe 7.5k points
1 vote
1 answer 387 views
387 views
Problem : I am beginner to react-navigation. Now I have a requirement to include the react-navigation to my exiting working code. So I have recently installed the required react-navigation in the existing React Native project. When I try to run my project I am encountering below error. ... ( <View style={styles.container}> <MyNavigator /> </View> ); } } Please let me know how can I fix this issue?
asked Mar 24 christian 5.7k points
0 votes
1 answer 1.9K views
1.9K views
Problem : Facing following strange issue input is a void element tag and must neither have `children` nor use `dangerouslysetinnerhtml`.
asked Nov 13, 2019 peterlaw 6.9k points