Wrapping with TouchableWithoutFeedback

On Lists part 7 of the React Native fundamentals course, Mosh goes ahead and wraps our ListItemDeleteAction inside of a TouchableWithoutFeedback. On my phone, this causes the red delete box to shrink nearly in half, while his stays the same in the tutorial. Why is this?

1 Like

Can you share your code?

function ListItemDeleteAction({onPress}) {
return (
    <TouchableWithoutFeedback onPress={onPress}>
        <View style={styles.container}>
            <MaterialCommunityIcons name="trash-can" size={35} color={colors.white}/>

The TouchableWithoutFeedback causes it to shrink in half.

I had the same problem. I fixed it by swapping View and TouchableWithoutFeedback. So the code would look like this:

Hope this helped

Thank you! Works great

The above method only makes the icon touchable for me, the rest of the button does not react to clicks.

To resolve this, I used:

<TouchableWithoutFeedback style={styles.container} onPress={onPress}>
     <MaterialCommunityIcons name='trash-can' size={35} color={colors.white} />

and added

height : “100%”

into my “container” style so the button would stretch its height fully.

1 Like