When I press the TouchableOpacity, it highlights, but a little over half of the time, it doesn't log press.
Why is the touchable area so small? It feels like it is only 1 x 1 pixel.
I already tried quite a few things, such as using a <View> wrapper and setting the width and height of the TouchableOpacity component.
<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}
/>
TouchableOpacity has the size of the content in this example which means if the icon is very small then your touchable area will be very small. I usually set a square sized container style for icons and increase the size when necessary
<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
height: 20,
width: 20
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}/>