Ad

Invariant Violation: Invariant Violation: React.Children.only Expected To Receive A Single React Element Child. I Don't Know Why?

- 1 answer

I keep getting the invariant violation and I really don't know why...

<TouchableHighlight key={index} style={styles.viewContent} onPress={() => this.handleAlarmPress(alarm)}>
<Image style={styles.iconWarning} source={warningIcon} />
<View style={styles.textContent}>
<Text style={styles.textTime}>{time}</Text>
<Text style={styles.textDetail}>{alarm.facilityName}</Text>
<Text style={styles.textDetail}>Room: {alarm.room}</Text>
<Text style={styles.textDetail}>Floor: {alarm.floor}</Text>
</View>
</TouchableHighlight>

If I remove Tag, working well. What do you think is the cause?

Ad

Answer

From the documentation at https://facebook.github.io/react-native/docs/touchablehighlight

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

Your TouchableHighlight contains two children (an Image and a View) but TouchableHighlights are designed to work with exactly one child. Try wrapping your Image and View inside of another View like

<TouchableHighlight key={index} style={styles.viewContent} onPress={() => this.handleAlarmPress(alarm)}>
    <View>
        <Image style={styles.iconWarning} source={warningIcon} />
        <View style={styles.textContent}>
            <Text style={styles.textTime}>{time}</Text>
            <Text style={styles.textDetail}>{alarm.facilityName}</Text>
            <Text style={styles.textDetail}>Room: {alarm.room}</Text>
            <Text style={styles.textDetail}>Floor: {alarm.floor}</Text>
        </View>
    </View>
</TouchableHighlight>
Ad
source: stackoverflow.com
Ad