React Native - анимация работает в эмуляторе iOS и Android, но не на устройстве Android

Question

Это чрезвычайно необычная проблема ...

У меня есть View, который действует как флэш-карта.Я использовал анимацию, чтобы перевернуть карточку.

После того, как я щелкнул карточку, система полностью сломалась.Он работает нормально ОДИН РАЗ, но затем он даже не обнаруживает щелчки.

import React, {Component} from 'react';
import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback, Easing } from 'react-native';
import Swiper from 'react-native-swiper';
import AppText from "../components/AppText";

type Props = {};

export default class FlashcardScreen extends Component<Props> {

    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('title', 'Flashcards')
        }
    };

    constructor(props){
        super(props);
        this.animatedValue = new Animated.Value(0);
        this.value = 0;
        this.textAnimatedValue = new Animated.Value(0);
        this.animatedValue.addListener(({value}) => {
            this.value = value;
            if (value === 90){
                Animated.timing(this.textAnimatedValue, {
                    toValue: 0,
                    duration: 250,
                }).start();
            }
        });
    }

    state = {
        cards: this.props.navigation.state.params.cards,
        displayTexts: Object.keys(this.props.navigation.state.params.cards),
        index: 0,
    };

    flipAnimation = (index) => {
        alert("Clicked!");
        let { displayTexts, cards } = this.state;
        const tempDisplayTexts = [...displayTexts];
        const toValue = this.value >= 90 ? 0 : 180;
        const entry = Object.entries(cards)[index];
        Animated.parallel([
            Animated.timing(this.animatedValue, {
                toValue: 90,
                duration: 250,
                easing: Easing.linear
            }),
            Animated.timing(this.textAnimatedValue, {
                toValue: 90,
                duration: 250
            })
        ]).start(() => {
            if(displayTexts[index] === entry[0]){
                tempDisplayTexts[index] = entry[1];
            } else {
                tempDisplayTexts[index] = entry[0];
            }
            this.setState({ displayTexts: tempDisplayTexts });
            Animated.parallel([
                Animated.timing(this.animatedValue, {
                    toValue: toValue,
                    duration: 250,
                    easing: Easing.linear
                }),

            ]).start();
        });
    };

    render() {
        let { cards, displayTexts } = this.state;
        this.SetInterpolate = this.animatedValue.interpolate({
            inputRange: [0, 180],
            outputRange: ['0deg', '180deg'],
        });
        const Rotate_X_AnimatedStyle = {
            transform: [{ rotateX: this.SetInterpolate }],
        };
        this.textSetInterpolate = this.textAnimatedValue.interpolate({
            inputRange: [0, 90],
            outputRange: ['0deg', '90deg'],
        });
        const Test_Rotate_X_AnimatedStyle = {
            transform: [{ rotateX: this.textSetInterpolate }]
        };
        return (
            <View style={styles.container}>
                <Swiper showsPagination={false} loop={false} onIndexChanged={(index) => this.setState({ index })}>
                    {
                        Object.entries(cards).map((question, index) => {
                            return (
                                <View style={styles.main}>
                                    <TouchableWithoutFeedback onPress={() => this.flipAnimation(index)}>
                                        <Animated.View style={[Rotate_X_AnimatedStyle, styles.card]} />
                                    </TouchableWithoutFeedback>
                                    <Animated.Text
                                        onPress={() => this.flipAnimation(index)}
                                        style={[styles.text, Test_Rotate_X_AnimatedStyle]}>
                                        {displayTexts[index]}
                                    </Animated.Text>
                                </View>
                            )
                        })
                    }
                </Swiper>
                <AppText style={styles.position} text={(this.state.index + 1) + " / " + this.state.displayTexts.length} />
            </View>
        );
    }
}

Я попытался изменить код, чтобы каждая карта имела свои собственные animatedValue и textValue, но это не решило проблему.

Вот ссылка на мои записи.Первый - это эмулятор, а второй - устройство:

https://imgur.com/gallery/xKYs3bc

Заранее благодарен за любую помощь!Я потратил на это часы: /