Search code examples
cssreact-nativetouchableopacity

TouchableOpacity takes full length horizontally even with both width and height set

In My React Native 0.62.2 app, a small close-circle-outline icon is added to an image up left corner. The purpose of icon is click to delete the images. Here is the component DeleteButton:

const DeleteButton = (index) => {
    return (
    <TouchableOpacity style={styles.close} onPress={() => {deleteImage(index)}} >
        <Icon name='close-circle-outline' />
    </TouchableOpacity> 
    );
};
const style = StyleSheet.create({
    close: {
        margin: 3,
        position: "absolute",
        top: 0,
        left: 0,
        width: 15,
        height: 15,
        color: "tomato"
      },

Both width and height of close area has been set in style. Here is how the icon looks like on Android emulator:

enter image description here

The close icon is on the up left and the image will be deleted when user clicks it. What I notice is that when I click on up right corner and the image gets deleted which is not desirable because user may delete the image accidentally. Tried to add flexDirection:'row' to style close and it didn't help. How to confine the click-able area of TouchableOpacity just around the icon?

Solution

  • Your corrected code ....

    const DeleteButton = (index) => {
    return (
    <TouchableOpacity style={style.close} onPress={() => {deleteImage(index)}} >
        <Icon name='close-circle-outline' />
    </TouchableOpacity> 
    );
};

const style = StyleSheet.create({
    close: {
        margin: 3,
        position: "absolute",
        top: 0,
        left: 0,
        width: 15,
        height: 15,
        color: "tomato"
      },