React Native Reanimated после быстрого refre sh без изменения значения

Question

Я занимаюсь разработкой анимации с использованием библиотек react-native-reanimated и react-native-gesture-handler. Когда я открываю страницу, она работает, как я ожидал. Но когда я изменяю любые данные, используя быстрый хук или hook в функции. Значение posX сбрасывается. И хотя он появляется в debug 'in the event, it does not update the data in Animated.View`.

import React, { useState } from 'react';
import { StyleSheet, View, Image, Dimensions } from 'react-native';
import Animated, {
  Value,
  event,
  set,
  block,
  cond,
  add,
  eq,
  debug,
  greaterThan,
  lessThan,
  multiply,
  useCode,
} from 'react-native-reanimated';

import { PanGestureHandler, State } from 'react-native-gesture-handler';

interface Props {}

const R = 70;

const image1 = require('./img1.jpeg');
const image2 = require('./img3.jpeg');

const { width, height } = Dimensions.get('window');

export const SplitView: React.FC<Props> = () => {

  const MAX = width - R;
  const MIN = 0;

  const posX = new Value<number>(0);
  const offsetX = new Value<number>((width - R) / 2);
  const panState = new Value(State.UNDETERMINED);

  const onGestureHandler = event([
    {
      nativeEvent: ({
        translationX,
        state,
      }: {
        translationX: number;
        state: State;
      }) =>
        block([
          set(panState, state),
          set(posX, add(translationX, offsetX)),

          cond(
            lessThan(posX, MIN),
            set(posX, MIN),
            cond(greaterThan(posX, MAX), set(posX, MAX)),
          ),

          debug('posX ', posX), // <=== always show on console

          cond(eq(state, State.END), [
            set(offsetX, add(offsetX, translationX)),

            cond(
              lessThan(offsetX, MIN),
              set(offsetX, MIN),
              cond(greaterThan(offsetX, MAX), set(offsetX, MAX)),
            ),
          ]),
        ]),
    },
  ]);


  return (
    <View style={styles.container}>
      <View style={[styles.left, { width, height }]}>
        <Animated.Image style={styles.image} source={image1} />
      </View>

      // But after value change or run fast refresh not working.
      // Initial value gets stuck
      <Animated.View
        style={[styles.right, { width, height, left: add(posX, R / 2) }]}>
        <Animated.Image
          style={[styles.image, { left: multiply(add(posX, R / 2), -1) }]}
          source={image2}
        />
      </Animated.View>

      <PanGestureHandler
        onGestureEvent={onGestureHandler}
        onHandlerStateChange={onGestureHandler}>
        <Animated.View
          style={[
            styles.ball,
            {
              left: posX,
              top: (height - R) / 2,
            },
          ]}
        />
      </PanGestureHandler>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  ball: {
    width: R,
    height: R,
    backgroundColor: 'red',
    borderRadius: R / 2,
    zIndex: 2,
  },

  image: {
    flex: 1,
  },

  left: {
    position: 'absolute',
    top: 0,
    left: 0,
    flex: 1,
  },

  right: {
    position: 'absolute',
    flex: 1,
    top: 0,
    left: 0,
    zIndex: 1,
    overflow: 'hidden',
    backgroundColor: 'yellow',
  },
});