Swipe Animation for `swipe to delete` in React Native

App.tsx

import { StatusBar } from 'expo-status-bar';
import React, { useRef } from 'react';
import { Animated, PanResponder, StyleSheet, Text, View } from 'react-native';
const SWIPE = 80;

export default function App() {
  const viewX = useRef(new Animated.Value(0)).current;
  const interpolateX = viewX.interpolate({
    inputRange: [-SWIPE, 0],
    outputRange: [-SWIPE, 0],
    extrapolate: 'clamp',
  });

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        console.log('=====viewX', viewX)
        // @ts-ignore
        viewX.setOffset(interpolateX.__getValue())        
      },
      onPanResponderMove: Animated.event([null, {dx: viewX}], {useNativeDriver: false}),      
      onPanResponderRelease: (e, { dx }) => {
        console.log('===dx', dx)
        viewX.setValue(dx < SWIPE/2 ? -SWIPE : +SWIPE)
      },
    })
  ).current;
  
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
      <Animated.View
        {...panResponder.panHandlers}
        style={[styles.button, { transform: [{ translateX: interpolateX }] }]}
      >
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    height: 100,
    backgroundColor: 'blue',
    borderRadius: 11,
    position: 'absolute',
    width: 200,
  }
});