fix: migrate modal gestures and avoid render-time shared value reads

jest.setup.js

@@ -90,18 +90,61 @@ jest.mock('react-native-reanimated', () => {
 jest.mock('react-native-gesture-handler', () => {
 
   const View = require('react-native').View;
+  const createGesture = () => {
+
+    const gesture = {
+      _onStart: undefined,
+      _onUpdate: undefined,
+      _onFinalize: undefined,
+      onStart( cb ) {
+
+        this._onStart = cb;
+        return this;
+
+      },
+      onUpdate( cb ) {
+
+        this._onUpdate = cb;
+        return this;
+
+      },
+      onFinalize( cb ) {
+
+        this._onFinalize = cb;
+        return this;
+
+      },
+    };
+
+    return gesture;
+
+  };
 
   return {
     PanGestureHandler: ({onGestureEvent, children}) => (
       <View
-        onResponderStart={onGestureEvent.onStart} 
-        onResponderEnd={onGestureEvent.onFinish} 
-        onResponderMove={onGestureEvent.onActive}
+        onResponderStart={( ...args ) => onGestureEvent.onStart?.( ...args )} 
+        onResponderEnd={( ...args ) => onGestureEvent.onFinish?.( ...args )} 
+        onResponderMove={( ...args ) => onGestureEvent.onActive?.( ...args )}
+        testID="gestureContainer"
+      >
+        {children}
+      </View>
+    ),
+    Gesture: {
+      Pan: () => createGesture(),
+    },
+    GestureDetector: ({ gesture, children }) => (
+      <View
+        onResponderStart={( ...args ) => gesture?._onStart?.( ...args )}
+        onResponderMove={( ...args ) => gesture?._onUpdate?.( ...args )}
+        onResponderEnd={( ...args ) => gesture?._onFinalize?.( ...args )}
         testID="gestureContainer"
       >
         {children}
       </View>
     ),
+    GestureHandlerRootView: ({ children, ...props }) => <View {...props}>{children}</View>,
     gestureHandlerRootHOC: (Component) => Component,
   };
 

src/components/Content/index.tsx

@@ -26,13 +26,11 @@ const StoryContent: FC<StoryContentProps> = ( { stories, active, activeStory } )
   useAnimatedReaction(
     () => active.value,
     ( res, prev ) => res !== prev && onChange(),
-    [ active.value, onChange ],
   );
 
   useAnimatedReaction(
     () => activeStory.value,
     ( res, prev ) => res !== prev && onChange(),
-    [ activeStory.value, onChange ],
   );
 
   const content = useMemo( () => stories[storyIndex]?.renderContent?.(), [ storyIndex ] );

src/components/Footer/index.tsx

@@ -26,13 +26,11 @@ const StoryFooter: FC<StoryContentProps> = ( { stories, active, activeStory } )
   useAnimatedReaction(
     () => active.value,
     ( res, prev ) => res !== prev && onChange(),
-    [ active.value, onChange ],
   );
 
   useAnimatedReaction(
     () => activeStory.value,
     ( res, prev ) => res !== prev && onChange(),
-    [ activeStory.value, onChange ],
   );
 
   const footer = useMemo( () => stories[storyIndex]?.renderFooter?.(), [ storyIndex ] );

src/components/Image/index.tsx

@@ -77,13 +77,11 @@ const StoryImage: FC<StoryImageProps> = ( {
   useAnimatedReaction(
     () => isActive.value,
     ( res, prev ) => res !== prev && res && runOnJS( onImageChange )(),
-    [ isActive.value, onImageChange ],
   );
 
   useAnimatedReaction(
     () => activeStory.value,
     ( res, prev ) => res !== prev && runOnJS( onImageChange )(),
-    [ activeStory.value, onImageChange ],
   );
 
   const onContentLoad = ( newDuration?: number ) => {

src/components/Image/video.tsx

@@ -17,7 +17,7 @@ const StoryVideo: FC<StoryVideoProps> = ( {
 
     const ref = useRef<any>( null );
 
-    const [ pausedValue, setPausedValue ] = useState( paused.value );
+    const [ pausedValue, setPausedValue ] = useState( true );
 
     const start = () => {
 
@@ -29,13 +29,11 @@ const StoryVideo: FC<StoryVideoProps> = ( {
     useAnimatedReaction(
       () => paused.value,
       ( res, prev ) => res !== prev && runOnJS( setPausedValue )( res ),
-      [ paused.value ],
     );
 
     useAnimatedReaction(
       () => isActive.value,
       ( res ) => res && runOnJS( start )(),
-      [ isActive.value ],
     );
 
     return (

src/components/List/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, memo } from 'react';
+import React, { FC, memo, useState } from 'react';
 import Animated, {
-  useAnimatedStyle, useDerivedValue, useSharedValue, withTiming,
+  runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming,
 } from 'react-native-reanimated';
 import StoryAnimation from '../Animation';
 import ListStyles from './List.styles';
@@ -37,10 +37,21 @@ const StoryList: FC<StoryListProps> = ( {
 
   };
 
-  const lastSeenIndex = stories.findIndex(
-    ( item ) => item.id === seenStories.value[id],
+  const [ lastSeenId, setLastSeenId ] = useState<string | undefined>( undefined );
+
+  useAnimatedReaction(
+    () => seenStories.value[id],
+    ( res, prev ) => {
+      if ( res !== prev ) {
+        runOnJS( setLastSeenId )( res );
+      }
+    },
   );
 
+  const lastSeenIndex = lastSeenId !== undefined
+    ? stories.findIndex( ( item ) => item.id === lastSeenId )
+    : -1;
+
   return (
     <StoryAnimation x={x} index={index}>
       <Animated.View style={[ animatedStyles, ListStyles.container ]}>

src/components/Loader/index.tsx

@@ -9,7 +9,7 @@ import {
   Circle, Defs, LinearGradient, Stop, Svg,
 } from 'react-native-svg';
 import {
-  AVATAR_SIZE, LOADER_ID, LOADER_URL, STROKE_WIDTH,
+  AVATAR_SIZE, LOADER_COLORS, LOADER_ID, LOADER_URL, STROKE_WIDTH,
 } from '../../core/constants';
 import { StoryLoaderProps } from '../../core/dto/componentsDTO';
 
@@ -23,7 +23,7 @@ const Loader: FC<StoryLoaderProps> = ( {
   const RADIUS = useMemo( () => ( size - STROKE_WIDTH ) / 2, [ size ] );
   const CIRCUMFERENCE = useMemo( () => RADIUS * 2 * Math.PI, [ RADIUS ] );
 
-  const [ colors, setColors ] = useState<string[]>( color.value );
+  const [ colors, setColors ] = useState<string[]>( LOADER_COLORS );
 
   const rotation = useSharedValue( 0 );
   const progress = useSharedValue( 0 );
@@ -77,12 +77,10 @@ const Loader: FC<StoryLoaderProps> = ( {
   useAnimatedReaction(
     () => loading.value,
     ( res ) => ( res ? startAnimation() : stopAnimation() ),
-    [ loading.value ],
   );
   useAnimatedReaction(
     () => color.value,
     ( res ) => onColorChange( res ),
-    [ color.value ],
   );
 
   return (