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

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 2

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 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>