Ad
Invariant Violation: Invariant Violation: React.Children.only Expected To Receive A Single React Element Child. I Don't Know Why?
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 TouchableHighlight
s 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
Related Questions
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → How to dynamically add class to parent div of focused input field?
- → Expanding search bar not expanding before search
- → Include external javaScript CSS in laravel 5
- → Using css modules how do I define a global class
- → How to add a timer in HTML5 and Javascript?
- → Conditional BG Color on AngularJS
- → Divs aren't aware of screen resizing
- → Setting the height of a textarea inside a table
- → How can I get Greasemonkey to highlight visited image links?
- → How to handle onclick event of a button?
Ad