How to create a smooth expo/react native swipeable view/component

Question

I have been working on this simple task but didn't manage to do it. I just want a view containing a picture and two swipeable actions, one to when users swipe from left to right and one from right to left. Without the image moving i just want swipeable renders to gradually move over the image as the users swipe.

this is the code i have now

`

import React, { useRef, useState, useEffect } from 'react';
import { SafeAreaView, FlatList, View, Image, Text, StyleSheet, ScrollView, TouchableOpacity, index, PanResponder, Animated, Dimensions } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';

const montage = require("../../assets/mount.jpg")

const Swipeabletest = ({ navigation }) => {
    
  const renderLeftActions = (progress, dragX) => {
    const trans = dragX.interpolate({
      inputRange: [0, 200],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });
  

    console.log('Left action translation value:', trans);
  
    return (
      <Animated.View
        style={{
          transform: [{ translateX: trans }],
          backgroundColor: 'blue',
          width: '100%',
          height: 200,
          zIndex: 200,
          position: 'relative', // Ensure the left action is absolutely positioned
          top:0,
          left:0,
          zIndex:35,
          justifyContent:'center',
          alignItems:'center',
          borderRadius:400/2
        }}
      >
        <Text>Left action</Text>
      </Animated.View>
    );
  };
  
  const renderRightActions = (progress, dragX) => {
    const trans = dragX.interpolate({
      inputRange: [-200, 0],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });
  
    console.log('Right action translation value:', trans);
  
    return (
      <Animated.View
        style={{
          transform: [{ translateX: trans }],
          backgroundColor: 'red',
          width: 200,
          height: 200,
          zIndex: 34,
          // position: 'absolute',
          // right: 0,
          top:0,
          right:0,
          justifyContent:'center',
          alignItems:'center'
        }}
      >
        <Text>Right action</Text>
      </Animated.View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>


  

<View style={{ backgroundColor: 'white', zIndex: 500, width: 200, height: 200, position: 'relative' }}>
  
  <Swipeable
    renderLeftActions={renderLeftActions}
    renderRightActions={renderRightActions}  
  >
    <View style={{ backgroundColor: 'transparent', width: 200, height: 200, position: 'relative',borderRadius:400/2 }}>
  
      <Image source={montage} style={styles.montagnephotoprofil} />
    </View>
  </Swipeable>
</View>


    
    
    
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    
    flex: 1,
  },
    montagnephotoprofil: {
    width: '100%',
    height: '100%',
    borderRadius:400/2,
  },
});

export default Swipeabletest;
`
`