React Native - Animated.ValueXY - Scrollable between 2 values and save the value

[tarik1489]

Hi all,

Is it possible to limit the movements between two values with Animated.ValueXY ?

I have a bar on which we can move a square between 0 and 304. But I cannot limit the movement between 0 and 304.

Here this is the code (original code from Expo) :

import React, { useRef } from 'react';
import { Animated, PanResponder, StyleSheet, View } from 'react-native';

const DraggableView = () => {
    const pan = useRef(new Animated.ValueXY(0, 0)).current;
    const pos = 200;
    pan.x.setValue(pos);

    const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: Animated.event([
            null,
            {
                dx: pan.x, // x,y are Animated.Value
                dy: 0,
            },
        ]),
        onPanResponderRelease: () => {
            Animated.spring(
                pan, // Auto-multiplexed
                { toValue: { x: 0, y: 0 } } // Back to zero
            ).start();
        },
    });

    return (
        <View style={styles.container}>
            <View style={{ width: 320, height: 14, backgroundColor: '#C0003D' }}>
                <Animated.View {...panResponder.panHandlers} style={[pan.getLayout(), styles.box, {/*{
                    transform: [{
                        translateX: pan.x.interpolate({
                            inputRange: [0 , 304],
                            outputRange: [0, 304],
                            extrapolate: 'clamp'
                        })
                    }]
                }*/}]} />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    box: {
        width: 14,
        height: 14,
        borderWidth: 4,
        borderColor: 'white'
    },
});

export default DraggableView;

I would like to save the cursor position value to store it and display it when opening this page. (it’s a kind of like bar)

Thank you for your help