aprofromindia
aprofromindia

Reputation: 1129

React Native prevent touch bubbling to parent elements

If I want to prevent the onPress event on the View component propagating to the parent Touchable for the following Sample component, what's the best option other than wrapping the child view in a Touchable please?

export default function Sample (): Element<*> {
  return(
    <TouchableOpacity>
      <View>
        <Text>Sample</Text>
      </View>
    </TouchableOpacity>
  );
}

Upvotes: 6

Views: 3497

Answers (1)

Gabriele Alfredo Pini
Gabriele Alfredo Pini

Reputation: 101

In my case I simply put the View inside another TouchableOpacity (with activeOpacity to 1 to block any graphic effect):

export default function Sample (): Element<*> {
  return(
    <TouchableOpacity>
      <TouchableOpacity activeOpacity={1}>
        <View>
          <Text>Sample</Text>
        </View>
      </TouchableOpacity>
    </TouchableOpacity>
  );
}

Upvotes: 0

Related Questions