React Native – Pressable is not clickable on Android

What I’m building:

I’m creating a card that will render with a question mark at top of it and when the user press it, the card will flip with animation and show some information.

Code:

From a code perspective it looks like this:

import { View, StyleSheet, Text, Pressable, Animated } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { GlobalStyles } from '../../constants/styles';
import { useTranslation } from 'react-i18next';

export default Card = ({ isSpy, guessingItem, onPress }) => {
  const { t } = useTranslation();

  let currentValue = 0;
  const animatedValue = new Animated.Value(0);
  animatedValue.addListener((v) => (currentValue = v.value));

  const frontInterpolate = animatedValue.interpolate({
    inputRange: [0, 180],
    outputRange: ['0deg', '180deg'],
  });

  const backInterpolate = animatedValue.interpolate({
    inputRange: [0, 180],
    outputRange: ['180deg', '360deg'],
  });

  const frontAnimatedStyles = {
    transform: [{ rotateY: frontInterpolate }],
  };

  const backAnimatedStyles = {
    transform: [{ rotateY: backInterpolate }],
  };

  const flipCard = () => {
    console.log(currentValue);
    if (currentValue >= 90) {
      Animated.spring(animatedValue, {
        toValue: 0,
        tension: 10,
        friction: 8,
        useNativeDriver: false,
      }).start();
      setTimeout(() => onPress(), 600);
    } else {
      Animated.spring(animatedValue, {
        toValue: 180,
        tension: 10,
        friction: 8,
        useNativeDriver: false,
      }).start();
    }
  };

  return (
    <View style={styles.constainer}>
      <Pressable onPress={flipCard} style={{ backgroundColor: 'red' }}>
        <View style={GlobalStyles.styles.flexbox}>
          <Animated.View style={[styles.innerContainer, frontAnimatedStyles]}>
            <FontAwesome name="question" size={160} />
          </Animated.View>
        </View>
      </Pressable>
      <Pressable onPress={flipCard}>
        <View style={GlobalStyles.styles.flexbox}>
          <Animated.View style={[backAnimatedStyles, styles.innerContainer, styles.innerContainerBack]}>
            <View style={styles.constainer}>
              {!isSpy && (
                <>
                  <FontAwesome name={guessingItem.section.icon} size={60} />
                  <Text style={styles.itemName}>{guessingItem.name}</Text>
                </>
              )}
              {isSpy && (
                <>
                  <FontAwesome name="user-secret" size={60} />
                  <Text style={styles.placeName}>{t('youAreSpy')}</Text>
                </>
              )}
            </View>
          </Animated.View>
        </View>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  constainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  innerContainer: {
    height: 300,
    width: 230,
    marginVertical: 50,
    padding: 60,
    borderWidth: 6,
    borderColor: GlobalStyles.colors.primary50,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backfaceVisibility: 'hidden',
  },
  innerContainerBack: {
    position: 'absolute',
    right: -115,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemName: {
    marginTop: 20,
    fontSize: 18,
    alignItems: 'center',
    color: GlobalStyles.colors.primary50,
  },
  pressed: {},
});

On-screen below you can see a pressable element with red background.
If I click on any part of this red part, the card would flip. If I test it on Android, clicking on anything inside the white border would not trigger a flip. Only clicking outside of that white border but still inside the red background would trigger a flip.

The question is: Why it behaves differently when I am using basic react-native elements? How can I fix that so clicking would always work for the inside click?