slider - React native gesture handler - element jumping when adjusting the dragging multiple times

Question

I build slider for my project, the slider works fine but every time that I adjusting the dragging (with the Circle element) the circle jumps to his initial state let translateX = sub(x, 50 / 2);

Please help me understand what I need to add in order that the circle will continue from his last place.

I tried to overwrite translateX in onDrop function but it's not working ->

() =>  
  cond(  
    eq(state, State.ACTIVE),  
    call([translateX], ([v]) => {  
      onDrop(v);
    }),
  ),
[state, value],
);
const onDrop = (e) => {

const diff = e - -firstNumber;
const lastOption = diff * offSet;
setTextValue((lastOption / 10).toFixed(2));
};

my code:

  const width = Dimensions.get('window').width
  const SLIDER_WIDTH = width - 200;
  let offSet = 1000 / SLIDER_WIDTH;
  let firstNumber = SLIDER_WIDTH - 25;
  
  const [state, translationX] = useValues(
    State.UNDETERMINED,
    (-SLIDER_WIDTH + 100) / 2,
  );
  const gestureHandler = onGestureEvent({state, translationX});
  const x = diffClamp(withOffset(translationX, state), -SLIDER_WIDTH + 50, 50);
  let translateX = sub(x, 50 / 2);
  const [textValue, setTextValue] = useState(50);
  const value = round(multiply(divide(x, SLIDER_WIDTH), 100));

  useCode(
    () =>
      cond(
        eq(state, State.ACTIVE),
        call([translateX], ([v]) => {
          onDrop(v);
        }),
      ),
    [state, value],
  );
  const onDrop = (e) => {
    const diff = e - -firstNumber;
    const lastOption = diff * offSet;
    setTextValue((lastOption / 10).toFixed(2));
  };

  return (
    <View>
    <PanGestureHandler
      minDist={0}
      {...gestureHandler}
      onHandlerStateChange={chosenValue}>
      <Animated.View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: CIRCLE_SIZE,
          height: CIRCLE_SIZE,
          transform: [{translateX}],
        }}>
        <Animated.View
          style={{
            ...StyleSheet.absoluteFillObject,
          }}>
          <Circle {...{state}} />
        </Animated.View>
      </Animated.View>
    </PanGestureHandler>
  </View>
  );

Thanks in advance.

question from:https://stackoverflow.com/questions/65885055/react-native-gesture-handler-element-jumping-when-adjusting-the-dragging-multi

Answer 1

Waitting for answers