Часть интерактивного значка на обратной стороне перевернутой карты не работает

Question

У меня есть анимация, которая перемещает карту в середину при ее масштабировании, а затем она переворачивается.На перевернутой стороне карты есть щелкающий значок, который переворачивает анимацию, возвращая карту туда, где она была.Проблема заключается в том, что правая сторона этого значка, которая находится за границей вида начальной позиции карты, не активируется, даже если она отображается сверху.Я также пытался использовать кнопку с такими же результатами.

Экран до переворачивания карты:

Экран после переворачивания карты:

Вот код, максимально упрощенный для этого:

import React, {Component} from 'react';
import ReactNative,
    {
        View,
        Text,
        StyleSheet,
        Image,
        TouchableWithoutFeedback,
        TouchableHighlight,
        Dimensions,
        Animated
    }
from 'react-native';
import colors from '../config/colors';
import {PrimaryButton} from '../components/PrimaryButton';
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';

const { width, height } = Dimensions.get('window');

class choose_game_screen extends Component {
    constructor (props) {
        super(props);
        this.state = {
            card_flipped: false,
            owns_app: false,
            animation1: new Animated.ValueXY(),
            scale_animation1: new Animated.Value(1),
            flip_animation1: new Animated.Value(0),
            index1: 1,
            index2: 1,
            card_disabled: false,
            card_flipped1: false,
            card_flipped2: false,
        }
    }

    ownsAppTrue = () => {
        //flip animation code
    }

    reverseFlip() {
        //reverse flip animation code
    }

    saveDimensions = e => {
        this._width = e.nativeEvent.layout.width;
        this._height = e.nativeEvent.layout.height;
    };

    test = () => {
        this.setState({card_flipped: false});
        this.setState({owns_app: false});
    }

    render() {
        // animated styles are here
        return (
            <View style={styles.container}>
                <View style={{flexDirection: 'row'}}>
                    <View style={{flex: 1, alignItems: 'center', zIndex: this.state.index1}}>
                        <TouchableWithoutFeedback
                            onPress={() => this.ownsAppTrue()}
                            disabled={this.state.card_disabled}
                        >
                            <View style={{paddingBottom: 10}}>
                                <Animated.View style={parent_animation1} onLayout={this.saveDimensions}>
                                    <Animated.View style={[styles.cardBack, front_animation1]}>
                                        <Image
                                            source={require('../components/ChooseGameCard/images/TestImage.png')}
                                            style={styles.imageSize}
                                        />
                                    </Animated.View>
                                    <Animated.View style={[back_animation1, styles.cardBack, styles.flipCard]}>
                                        <Text>This is Front</Text>
                                        <View>
                                            <TouchableHighlight
                                                onPress={() => this.reverseFlip()}
                                            >
                                                <Icon
                                                    name='ios-close-circle'
                                                    size={35}
                                                    style={{alignSelf: 'flex-start'}}
                                                    color={colors.primaryText}
                                                />
                                            </TouchableHighlight>
                                        </View>
                                    </Animated.View>
                                </Animated.View>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={{flex: 1, alignItems: 'center', zIndex: this.state.index2}}>
                        <View
                            style={{paddingBottom: 10}}
                        >
                            <Image
                                source={require('../components/ChooseGameCard/images/TestImage.png')}
                                style={styles.imageSize}
                            />
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: colors.backgroundColor,
        margin: 10,
        borderWidth: 1,
        borderColor: colors.borderColor,
    },
    flipCard: {
        backgroundColor: colors.cardFront,
        position: 'absolute',
    },
    cardBack: {
        width: (Dimensions.get('window').width) * 0.4,
        height: ((Dimensions.get('window').width) * 0.4) * 1.5,
        alignItems: 'center',
        backfaceVisibility: 'hidden',
    },
    imageSize: {
        width: (Dimensions.get('window').width) * 0.4,
        height: ((Dimensions.get('window').width) * 0.4) * 1.5,
    },
})

export default choose_game_screen;

Есть идеи, что происходит?Я не понимаю, почему вся иконка появляется сверху, но работает только в том случае, если она находится внутри исходной границы карты.Анимация перемещает значок за эту границу.