i’m trying to recreate whatsapp slide left to cancel audio recording feature for my react native chat app, for this I’m using pan but I can’t get the button to move at all… I don’t get any error message either.

 const pan = useRef(new Animated.Value(0)).current;  // This will hold the accumulated distance

    const panResponder = useRef(
        PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove: (evt, gestureState) => {
                const newDx = gestureState.dx;
                if (newDx < 0 && newDx > -150) { // Only allow moving to the left and within bounds
                    pan.setValue(newDx);
                }
            },
            onPanResponderRelease: (evt, gestureState) => {
                if (gestureState.dx < -100) {
                    Alert.alert('Canceled recording');  // Cancel if the user drags beyond -100 pixels
                    setCanceled(true);
                }
                Animated.spring(pan, {  // Animate back to original position
                    toValue: 0,
                    useNativeDriver: true
                }).start(() => {
                    if (gestureState.dx < -100) {
                        console.log("Recording canceled due to slide.");
                    } else {
                        //console.log('send audio here');
                    }
                });
            }
        })
    ).current;

    const [canceled, setCanceled] = useState(false);

And my slidable button (it won’t actually move…)

<Animated.View style={{ width: 60, height: 60, marginLeft:'auto',marginRight:15,position:'relative',transform: [{ scale: scaleAnimation }, { translateX: pan }] }}
            {...panResponder.panHandlers}
            >
            <TouchableOpacity activeOpacity={0.9}
                onPressIn={() => {
                    // Reset on press
                    checkPermissions();
                }}
                onPressOut={() => {
                    
                        onPressedSendAudio();
                    
                }}
                style={{  backgroundColor: root.uiStore.actionColor, width: 60, height: 60,  marginHorizontal: 5, borderRadius: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}  >
                <FontistoIcon name="mic" style={{ fontSize: 26, color: 'white' }}/>
            </TouchableOpacity>
        </Animated.View>