React Native - Animation works in iOS and Android Emulator, but not in Android Device - react-native

Question

This is an extremely unusual problem...
I have a View that acts like a flashcard. I have used animations in order to flip over the flashcard.
After I click the flashcard, the system completely breaks down. It works fine ONCE, but then it doesn't even detect the clicks.
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>
);
}
}
I tried to change the code so that each card has its own animatedValue and textValue, but it did not fix the problem.
Here is a link to my recordings. The first one is the emulator, while the second one is the device:
https://imgur.com/gallery/xKYs3bc
Thanks in advance for any help! I've spent hours on this :/