Обработка прикосновения за пределами родительского компонента

Question

Область, отмеченная синей рамкой, не обрабатывает прикосновения

Я создал пользовательский TabBar и Компонент с TouchableOpacity (подсвечивается золотым). Проблема в том, что он обрабатывает только прикосновения внутри вида снизу. zIndex: 1 не решил проблему. Можно ли как-то это исправить?

Вот ответ моей средней кнопки:

const DiaryTab = props => {
  const {isActive, onPress, onLongPress} = props;

  return (
    <TouchableOpacity
      onPress={onPress}
      onLongPress={onLongPress}
      style={[S.container, {backgroundColor: 'gold'}]}>
      <View style={S.outerCircle}>
        <View
          style={[
            S.innerCircle,
            {
              backgroundColor: isActive ? R.colors.orange : R.colors.mainGreen
            }
          ]}>
          <Icon name="header-check" size={40} color={R.colors.white} />
        </View>
      </View>
    </TouchableOpacity>
  );
};

const S = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    height: 100,
    top: -42
    // zIndex: 999
  },
  outerCircle: {
    width: 82,
    height: 82,
    backgroundColor: R.colors.white,
    // top: -42,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 41
  },
  innerCircle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 3
  }
});

Спасибо!