animations.js

import React, { useState } from 'react';
import {
  SafeAreaView,
  View,
  Animated,
  TouchableOpacity,
  Text
} from 'react-native';

const App = () => {
  const leftValue = useState(new Animated.Value(0))[0]

  const moveBall = () => {
    Animated.timing(leftValue, {
      toValue: 150,
      duration: 2000,
      useNativeDriver: true
    }).start()
    /*    Animated.timing(value, {
         toValue: { x: 100, y: 100 },
         duration: 1000,
         useNativeDriver: false
       }).start() */
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Animated.View
          style={{
            backgroundColor: 'red',
            width: 100,
            height: 100,
            borderRadius: 100 / 2,
            transform: [{ translateX: leftValue }]
          }} />
        <TouchableOpacity onPress={moveBall}>
          <Text>move ball</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default App;