React-Native Animation: Движение не плавное при переводе х и у

Question

Попытка переместить квадратный блок из угла в центр экрана, но движение происходит зигзагообразно и не плавно. Я попытался использовать NativeDriver: true, и это не сработало; Я получил ошибку. Есть ли что-то, что я пропускаю или нужно сделать по-другому, чтобы сделать это движение плавным? Кажется, что это происходит только тогда, когда я перевожу x и y одновременно, например, в этом вопросе.

Вот код ниже:

import React, {Component} from 'react';
import
    {
        StyleSheet,
        View,
        Text,
        Animated,
        Dimensions,
        TouchableWithoutFeedback
    }
from 'react-native';

export default class App extends Component {
    state = {
        animation: new Animated.ValueXY()
    };

    startAnimation = () => {
        const {width, height} = Dimensions.get("window");
        Animated.parallel([
            Animated.timing(this.state.animation.y, {
                toValue: (height / 2) - (this._height / 2),
                duration: 500
            }),
            Animated.timing(this.state.animation.x, {
                toValue: (width / 2) - (this._width / 2),
                duration: 500
            })
        ]).start();
    }

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

    render() {
        const animatedStyles = {
            transform: [
                {
                    translateX: this.state.animation.x
                },
                {
                    translateY: this.state.animation.y
                }
            ]
        }

        return (
            <View style={styles.container}>
                <TouchableWithoutFeedback
                    onPress={this.startAnimation}
                    onLayout={this.saveDimensions}
                >
                    <Animated.View
                        style={[styles.box, animatedStyles]}
                    />
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    box: {
        width: 150,
        height: 150,
        backgroundColor: 'tomato',
        position: 'absolute',
        top: 0,
        left: 0,
    },
});