Wrapping with TouchableWithoutFeedback

React Native
1

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
2

Can you share your code?

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

The TouchableWithoutFeedback causes it to shrink in half.

4

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

Hope this helped

5

Thank you! Works great

6

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} />
</TouchableWithoutFeedback>

and added

height : “100%”

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

1 Like