fix: fixed reanimated console warnings

Author: Petr Konecny

src/components/AnimatedPagedView/Adapter.tsx

@@ -7,7 +7,7 @@ import { useCarouselContext } from '../../context/CarouselContext'
 import { AutoCarouselAdapterProps } from '../../components/AutoCarousel/types'
 
 export const AutoCarouselAdapter = ({ offset, onScroll, children }: AutoCarouselAdapterProps) => {
-  const scrollViewRef = useRef<AnimatedPagedScrollViewRef | null>(null)
+  const scrollViewRef = useRef<AnimatedPagedScrollViewRef>(null)
   const { slideWidth, setUserInteracted } = useCarouselContext()
 
   useAnimatedReaction(

src/components/AnimatedPagedView/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, type ForwardedRef } from 'react'
+import React, { forwardRef, useImperativeHandle, type ForwardedRef } from 'react'
 import { Dimensions } from 'react-native'
 import Animated, {
   useSharedValue,
@@ -17,15 +17,14 @@ export type AnimatedPagedScrollViewRef = {
   scrollTo: (value: number) => void
 }
 
-export const AnimatedPagedView = forwardRef(
-  (
-    props: {
-      onScroll: (value: number) => void
-      onScrollBeginDrag: () => void
-      children: React.ReactNode
-    },
-    ref: ForwardedRef<AnimatedPagedScrollViewRef>,
-  ) => {
+type AnimatedPagedViewProps = {
+  onScroll: (value: number) => void
+  onScrollBeginDrag: () => void
+  children: React.ReactNode
+}
+
+export const AnimatedPagedView = forwardRef<AnimatedPagedScrollViewRef, AnimatedPagedViewProps>(
+  (props, ref) => {
     const translateX = useSharedValue(0)
     const context = useSharedValue({ x: 0 })
 
@@ -61,14 +60,19 @@ export const AnimatedPagedView = forwardRef(
       (value) => {
         props.onScroll?.(value)
       },
+      [props.onScroll],
     )
 
-    useImperativeHandle(ref, () => ({
-      scrollTo: (value: number) => {
-        'worklet'
-        translateX.value = value
-      },
-    }))
+    useImperativeHandle(
+      ref,
+      () => ({
+        scrollTo: (value: number) => {
+          'worklet'
+          translateX.value = value
+        },
+      }),
+      [translateX],
+    )
 
     return (
       <GestureDetector gesture={gesture}>

src/components/AutoCarousel/index.tsx

@@ -1,11 +1,5 @@
 import React, { useRef, useEffect, useCallback } from 'react'
-import {
-  runOnJS,
-  useAnimatedScrollHandler,
-  useSharedValue,
-  withTiming,
-  useAnimatedReaction,
-} from 'react-native-reanimated'
+import { runOnJS, useSharedValue, withTiming, useAnimatedReaction } from 'react-native-reanimated'
 
 import { DEFAULT_INTERVAL, ROUNDING_PRECISION, TRANSITION_DURATION } from './index.preset'
 import { CarouselContextProvider, useCarouselContext } from '../../context/CarouselContext'
@@ -78,7 +72,7 @@ export const AutoCarouselWithoutProvider = ({
       if (!autoScrollEnabled) return
       runOnJS(handleAutoScroll)()
     },
-    [scrollValue.value, slideWidth, autoScrollEnabled],
+    [scrollValue, slideWidth, autoScrollEnabled],
   )
 
   // This handles the infinite scrolling
@@ -93,20 +87,12 @@ export const AutoCarouselWithoutProvider = ({
       }
       // if we are at the first index we need to switch to the next to last one without animation
       // next to last one because the last one is a clone of the first one
+      console.log('activeIndex', activeIndex)
       if (activeIndex < 0.01 && activeIndex > -0.01) {
         goToPage(paddedChildrenArray.length - 2, 0)
       }
     },
-    [childrenArray.length, goToPage, paddedChildrenArray.length, slideWidth, scrollValue.value],
-  )
-
-  const scrollHandler = useAnimatedScrollHandler(
-    (event) => {
-      const activeIndex = customRound(event.contentOffset.x / slideWidth, ROUNDING_PRECISION)
-      if (event.contentOffset.x === 0) return
-      scrollValue.value = activeIndex
-    },
-    [slideWidth, autoScrollEnabled],
+    [childrenArray.length, goToPage, paddedChildrenArray.length, slideWidth, scrollValue],
   )
 
   return (

src/context/CarouselContext/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useMemo, useState } from 'react'
 import { useSharedValue, type SharedValue } from 'react-native-reanimated'
 
 import { Dimensions } from 'react-native'
@@ -34,7 +34,10 @@ export const CarouselContextProvider = ({
 
   return (
     <CarouselContext.Provider
-      value={{ scrollValue, userInteracted, setUserInteracted, slideWidth }}
+      value={useMemo(
+        () => ({ scrollValue, userInteracted, setUserInteracted, slideWidth }),
+        [scrollValue, userInteracted, setUserInteracted, slideWidth],
+      )}
     >
       {children}
     </CarouselContext.Provider>