Comment créer une "view swipeable smooth/ fluide"

J'ai travaillé sur cette tâche simple mais je n'ai pas réussi à le faire. Je veux juste une vue contenant une image et deux actions balayables, une lorsque les utilisateurs glissent de gauche à droite et une de droite à gauche. Sans que l'image ne bouge, je veux juste que les rendus glissants se déplacent progressivement sur l'image à mesure que les utilisateurs glissent.

c'est le code que j'ai maintenant

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;
`

Je voudrais comme je l'ai dis juste les éléments à droite et à gauche de se deplacer au-dessus de l'image/view "principale" celle que l'utilisateur voit des le départ.
Merci de votre aide