Slider example

[ivan-roksandic]

Hey there. Been trying to work on a replacement for the Slider example you did on Youtube, but without the deprecated Interactable component.

However my current issue is that i want to update the snap-points when the layout changes. however it doesnt seem to be do that? I assume withSpring only does one hook?

import * as React from "react"
import { Dimensions, View, StyleSheet, SliderProperties } from "react-native"
import { PanGestureHandler } from "react-native-gesture-handler"
import { useLayout } from "react-native-hooks"

import { withSpring, snapPoint, clamp, panGestureHandler } from "react-native-redash"
import { useMemoOne } from "use-memo-one"
import Ani from "react-native-reanimated"

export interface SliderProps {
    steps: number,
    size: number
}


export function Slider(props: SliderProps) {
    const { steps = 1, size = 10 } = props;
    // Uses layout and check the width
    const { onLayout, ...layout } = useLayout();
    const { width } = layout;

    const [offset] = React.useMemo(() => [
        new Ani.Value(0)
    ], [steps, size]);
  
    // Tries to update snappoints when width changes.
    const snapPoints = React.useMemo(() => {
        let points = []
        for (let i = 0; i < steps; i++) {
            points.push(Ani.add(0, i * ((width + (size / 2)) / steps)));
        }
        // console.log("Updated snap points.");
        return points;
    }, [steps, size, width]);

    const { state, translationX, velocityX, gestureHandler } = panGestureHandler();

    const translateX = withSpring({
        state,
        velocity: velocityX,
        value: translationX,
        offset: offset,
        snapPoints,        
        config: {
            overshootClamping: true,
            damping: 10,
            mass: 2,
            restDisplacementThreshold: 0.001,
            restSpeedThreshold: 0.001,
            stiffness: 100,
        },
        onSnap: value => console.log("snapping", value)
    });



    return <View onLayout={onLayout} style={{
        height: size,
        borderRadius: size / 2,
        backgroundColor: "#F1F2F6"
    }}>
        <Ani.View style={{
            ...StyleSheet.absoluteFillObject,
            backgroundColor: "#dc5312",
            borderRadius: size / 2,
            height: size,
        }} />
        <PanGestureHandler {...gestureHandler}>
            <Ani.View style={{
                width: size,
                height: size,
                transform: [
                    { translateX }
                ],
                borderRadius: size / 2,
                borderWidth: 0.5,
                borderColor: "#88888888",
                backgroundColor: "#ffffff",
                shadowOpacity: 0.86,
                shadowColor: "#FFF",
                shadowRadius: 30,
                shadowOffset: { width: 10, height: 10 },
                overflow: "visible"
            }} />
        </PanGestureHandler>
    </View>
}

Is there any way to update the snap points somehow?

[ChaoTzuJung]

I have same issue and don't know how to use withSpring to replace Interactable component.