Invariant Violation: Invariant Violation: React.Children.only expected to receive a single React element child

Question

When I use TouchableOpacity my code works fine, but when I use TouchableWithoutFeedback my code throws an error. As I don't want that blurred effect on click, I want to use TouchableWithoutFeedback instead.

return (
    <View  style={{ ...props.style}}>
        <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
             <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
             <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
         </TouchableWithoutFeedback>

         <View style={styles.parentHr}/>
         {
             toggle.expanded &&
             <View style={styles.child}>
                 {props.data}  
             </View>
         }
    </View>
)

Answer 1

The documentation on TouchableWithoutFeedback says:

TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View.

Indeed, TouchableOpacity does support multiple childs (hence why your code works when using that component), TouchableWithoutFeedback does not. However, you are giving TouchableWithoutFeedback multiple children components ( Text and Icon ), which isn't valid. The solution should be to simply wrap the Text and Icon in a View component, or, if you don't want to use a View, a React.Fragment :

<TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
    <React.Fragment>
        <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
        <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
    </React.Fragment>
</TouchableWithoutFeedback>

Answer 2

If you don't want to show blur effect on click/touch. You can simply set activeOpacity={1} into <TouchableOpacity> tag

<TouchableOpacity activeOpacity={1}>
<Text>Hello</Text>
</TouchableOpacity>

Answer 3

You can't use two or more elements in Touchables. To solve your problem you must wrap your elements with <View></View> or <React.Fragment></React.Fragment> Like this:

   <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
        <View>
              <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
              <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
        </View>
   </TouchableWithoutFeedback>

Or

   <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
        <React.Fragment>
              <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
              <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
        </React.Fragment>
   </TouchableWithoutFeedback>