feat: implemented custom scroller instead of scroll view

Author: Petr Konecny

example/app.json

@@ -17,7 +17,8 @@
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "edgeToEdgeEnabled": true
+      "edgeToEdgeEnabled": true,
+      "package": "com.petrkonecny2.example"
     },
     "web": {
       "bundler": "metro",

example/app/_layout.tsx

@@ -3,7 +3,7 @@ import { useFonts } from 'expo-font'
 import { Stack } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
 import 'react-native-reanimated'
-
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { useColorScheme } from '@/hooks/useColorScheme'
 
 export default function RootLayout() {
@@ -18,12 +18,14 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="+not-found" />
+        </Stack>
+        <StatusBar style="auto" />
+      </ThemeProvider>
+    </GestureHandlerRootView>
   )
 }

package.json

@@ -42,6 +42,7 @@
     "jest": "^29.7.0",
     "lint-staged": "^16.0.0",
     "prettier": "^3.5.3",
+    "react-native-gesture-handler": "^2.24.0",
     "typescript": "^5.0.0"
   },
   "files": [

pnpm-lock.yaml

@@ -0,0 +1,50 @@
+import { AnimatedPagedScrollView } from './index'
+import Animated, {
+  scrollTo,
+  SharedValue,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+} from 'react-native-reanimated'
+import { customRound } from '../../utils/round'
+import { ROUNDING_PRECISION } from '../../components/AutoCarousel/index.preset'
+import { useCarouselContext } from '../../context/CarouselContext'
+
+type Props = {
+  onScroll: (value: number) => void
+  children: React.ReactNode
+  offset: SharedValue<{ value: number }>
+}
+
+export const AutoCarouselAdapter = ({ onScroll, children, offset }: Props) => {
+  const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
+  const { slideWidth, setUserInteracted } = useCarouselContext()
+
+  useAnimatedReaction(
+    () => offset.value.value,
+    (value) => {
+      scrollTo(scrollViewRef, value, 0, false)
+    },
+  )
+
+  const scrollHandler = useAnimatedScrollHandler(
+    (event) => {
+      const activeIndex = customRound(event.contentOffset.x / slideWidth, ROUNDING_PRECISION)
+      if (event.contentOffset.x === 0) return
+      onScroll(activeIndex)
+    },
+    [slideWidth],
+  )
+
+  return (
+    <AnimatedPagedScrollView
+      ref={scrollViewRef}
+      onScroll={scrollHandler}
+      onScrollBeginDrag={() => {
+        setUserInteracted(true)
+      }}
+    >
+      {children}
+    </AnimatedPagedScrollView>
+  )
+}

src/components/AnimatedPagedScrollView/Adapter.tsx

@@ -14,12 +14,15 @@ export const AnimatedPagedScrollView = forwardRef(
           pagingEnabled
           scrollToOverflowEnabled
           showsHorizontalScrollIndicator={false}
-          scrollEventThrottle={16}
           {...props}
         />
       </View>
     )
   },
 )
 
+export type AnimatedPagedScrollViewRef = {
+  scrollTo: (value: number) => void
+}
+
 AnimatedPagedScrollView.displayName = 'AnimatedPagedScrollView'

src/components/AnimatedPagedScrollView/index.tsx

@@ -5,4 +5,8 @@ export const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
   },
+  contentContainer: {
+    flexDirection: 'row',
+    flex: 1,
+  },
 })

src/components/AnimatedPagedScrollView/styles.ts

@@ -0,0 +1,43 @@
+import { SharedValue, useAnimatedReaction } from 'react-native-reanimated'
+import { useRef } from 'react'
+import { AnimatedPagedScrollViewRef, AnimatedPagedView } from './index'
+import { customRound } from '../../utils/round'
+import { ROUNDING_PRECISION } from '../../components/AutoCarousel/index.preset'
+import { useCarouselContext } from '../../context/CarouselContext'
+
+type Props = {
+  onScroll: (value: number) => void
+  offset: SharedValue<{ value: number }>
+  children: React.ReactNode
+}
+
+export const AutoCarouselAdapter = ({ offset, onScroll, children }: Props) => {
+  const scrollViewRef = useRef<AnimatedPagedScrollViewRef | null>(null)
+  const { slideWidth, setUserInteracted } = useCarouselContext()
+
+  useAnimatedReaction(
+    () => offset.value.value,
+    (value) => {
+      scrollViewRef.current?.scrollTo(value)
+    },
+  )
+
+  const handleScroll = (value: number) => {
+    'worklet'
+    const activeIndex = customRound(value / slideWidth, ROUNDING_PRECISION)
+    if (value === 0) return
+    onScroll(activeIndex)
+  }
+
+  return (
+    <AnimatedPagedView
+      ref={scrollViewRef}
+      onScrollBeginDrag={() => {
+        setUserInteracted(true)
+      }}
+      onScroll={handleScroll}
+    >
+      {children}
+    </AnimatedPagedView>
+  )
+}

src/components/AnimatedPagedView/Adapter.tsx

@@ -0,0 +1,85 @@
+import { forwardRef, useImperativeHandle, type ForwardedRef } from 'react'
+import { Dimensions } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  useAnimatedReaction,
+  runOnJS,
+  withTiming,
+} from 'react-native-reanimated'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+
+import { styles } from './styles'
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window')
+
+export type AnimatedPagedScrollViewRef = {
+  scrollTo: (value: number) => void
+}
+
+export const AnimatedPagedView = forwardRef(
+  (
+    props: {
+      onScroll: (value: number) => void
+      onScrollBeginDrag: () => void
+      children: React.ReactNode
+    },
+    ref: ForwardedRef<AnimatedPagedScrollViewRef>,
+  ) => {
+    const translateX = useSharedValue(0)
+    const context = useSharedValue({ x: 0 })
+
+    const gesture = Gesture.Pan()
+      .onStart(() => {
+        context.value = { x: translateX.value }
+        runOnJS(props.onScrollBeginDrag)()
+      })
+      .onUpdate((event) => {
+        translateX.value = context.value.x - event.translationX
+      })
+      .onEnd((event) => {
+        const velocity = event.velocityX
+        const currentPage = Math.round(translateX.value / SCREEN_WIDTH)
+        const targetPage =
+          velocity > 500 ? currentPage - 1 : velocity < -500 ? currentPage + 1 : currentPage
+        // in case the gesture overshoots, snap to the nearest page
+        if (Math.abs(context.value.x - translateX.value) > SCREEN_WIDTH / 2) {
+          translateX.value = withTiming(currentPage * SCREEN_WIDTH)
+        } else {
+          translateX.value = withTiming(targetPage * SCREEN_WIDTH)
+        }
+      })
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ translateX: -translateX.value }],
+      }
+    }, [])
+
+    useAnimatedReaction(
+      () => translateX.value,
+      (value) => {
+        props.onScroll?.(value)
+      },
+    )
+
+    useImperativeHandle(ref, () => ({
+      scrollTo: (value: number) => {
+        'worklet'
+        translateX.value = value
+      },
+    }))
+
+    return (
+      <GestureDetector gesture={gesture}>
+        <Animated.View style={[styles.container]}>
+          <Animated.View style={[styles.contentContainer, animatedStyle]}>
+            {props.children}
+          </Animated.View>
+        </Animated.View>
+      </GestureDetector>
+    )
+  },
+)
+
+AnimatedPagedView.displayName = 'AnimatedPagedView'

src/components/AnimatedPagedView/index.tsx

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native'
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    flex: 1,
+  },
+})