CODEWITHSUNDEEP
react-nativetouchablehighlight
DVais
DVais

Reputation: 1

TouchableHighlight not working although using the source code from official react native documentation

I'm a new react native developer and I have an issue with TouchableHighlight where it always shows an error "Error: React.Children.only expected to receive a single React element child." in addition while I remove it is work as usual and I assume if this issue come from my device/vscode/browser. Because I already follow the source code from https://reactnative.dev/docs/touchablehighlight but still show that error.
Error image
Image without TouchableHighlight tag

Here my code

render() {
return (
  <View style={styles.container}>
    <TouchableHighlight onPress={this.onPress}>
      <View style={styles.button}>
        <Text>Touch Here</Text>
      </View>
      </TouchableHighlight>
    <View style={[styles.countContainer]}>
      <Text style={[styles.countText]}>
        {this.state.count ? this.state.count : null}
      </Text>
    </View>
  </View>
);}

Upvotes: 0

Views: 156

Answers (1)

imKrishh
imKrishh

Reputation: 977

From the error message, the issue might happen if you pass Mutlipe child components to TouchableHighlight

From the docs:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View

<TouchableHighlight onPress={onPress}>
  <View style={styles.button}> // Mutlipe child components are wrapped in a View
    <Text>Touch</Text> // component 1
    <Text>Here</Text> // component 2
  </View>
</TouchableHighlight>

Upvotes: 1

Related Questions