Icon unpressable if Text outside view

Question

Everything inside Pressable should be pressable and trigger goBack. This code correctly allows me to press the contents inside the Pressable to go back:

<View style={styles.header}>
      <Pressable
        style={({ pressed }) => [
          styles.backButtonContainer,
          {
            color: pressed ? 'rgba(0, 224, 255, 0.3)' : 'transparent',
          },
        ]}
        onPress={() => navigation.goBack()}
        android_ripple={{ color: 'rgba(0, 224, 255, 0.3)', borderless: false }}
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      >
        <Icon name="chevron-back-outline" color="#00e0ff" size={24} />
      </Pressable>
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Text style={styles.title}>Add Gym</Text>
      </View>
    </View>

In this version pressing the arrow icon doesn't trigger anything yet pressing the padding does:

    <View style={styles.header}>
      <Pressable
        style={({ pressed }) => [
          styles.backButtonContainer,
          {
            color: pressed ? 'rgba(0, 224, 255, 0.3)' : 'transparent',
          },
        ]}
        onPress={() => navigation.goBack()}
        android_ripple={{ color: 'rgba(0, 224, 255, 0.3)', borderless: false }}
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      >
        <Icon name="chevron-back-outline" color="#00e0ff" size={24} />
      </Pressable>
        <Text style={styles.title}>Add Gym</Text>
    </View>

CSS:

  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingVertical: 20,
  },
  backButtonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding:8,
  },

Answer 1

Since you have a hitSlop set for the Pressable component, you are able to press on it outside its render view.

There could be 2 things affecting the touch area on the icon itself:

1. There might be an overlapping view on top of the icon:

Make sure that there are no absolute views rendered on top of the button.

2. The icon itself is overlapping the Pressable component.

For this, try to add to the Icon pointerEvents prop and set it as null.

Like this:

        <Icon name="chevron-back-outline" color="#00e0ff" size={24} pointerEvents="none"  />

Not sure which Icon library you are using, but it should inherit View props, in case it doesn't, wrap the whole Icon with a View and set the pointerEvents to it instead.