TouchableOpacity overwriting other buttons

Question

In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?

          return (
            <TouchableOpacity onPress= {()=> console.log('Hello')}>
            <View style={styles.item} key={item.id}>
              <Thumbnail
                style={styles.thumbnail}
                source={{
                  uri:
                    'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
                }}></Thumbnail>
                <View style={styles.nameNumber}>
              <Text style={styles.userName}>{userName}</Text>
              </View>
              <View style={styles.deleteButtonContainer}>
                <Button
                  rounded
                  style={styles.deleteButton}
                  onPress={() => onDeleteContact(item.id)}
                  >
                  <Icon name="trash-o" size={moderateScale(20)} color="black" />
                </Button>
              </View>
            </View>
            </TouchableOpacity>
          );
        },

What is `TouchableOpacity`? Does it capture all the user input (like mouse click event)? — user0101, Jun 16 '20 at 11:40
yes, if I click on the button, I just click on the opacity @user0101 — , Jun 16 '20 at 12:27
are you importing TouchableOpacity from "react-native-gesture-handler" or "react-native"? — grooot, Jun 18 '20 at 02:47
check this out https://stackoverflow.com/questions/44593024/stacked-touchableopacity-inside-another-touchableopacity-is-not-clickable — grooot, Jun 18 '20 at 02:49

高鵬翔 · Answer 1 · 2020-06-19T00:26:58.763

0

Change like this? (Wrap the tag except the button?)

return (

    <View style={styles.item} key={item.id}>
      <TouchableOpacity onPress= {()=> console.log('Hello')}>
          <Thumbnail
            style={styles.thumbnail}
            source={{
              uri:
                'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
            }}></Thumbnail>
            <View style={styles.nameNumber}>
                <Text style={styles.userName}>{userName}</Text>
            </View>
      </TouchableOpacity>
      <View style={styles.deleteButtonContainer}>
        <Button
          rounded
          style={styles.deleteButton}
          onPress={() => onDeleteContact(item.id)}
          >
          <Icon name="trash-o" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>

  );
},

edited Jun 19 '20 at 00:26

answered Jun 17 '20 at 01:21

高鵬翔

1,997
2
8
21

This hides the text. I had already tried wrapping the thumbnail alone too but it covers a part of the thumbnail which shouldn't happen. – Jun 17 '20 at 16:45
I have update answer, take it a try, add `zindex` to move up. – 高鵬翔 Jun 18 '20 at 02:39
This doesn't solve the initial issue. The delete button is still not click-able. Also, modifying my code like this gives me the each node should have a key issue even though I already have a key – Jun 18 '20 at 11:57

TouchableOpacity overwriting other buttons

1 Answers1