fix: a quick call to the page number switch method causes an offset e…

…rror fix #30
dohooo · Nov 27, 2021 · 0c93b86 · 0c93b86
1 parent 42e4616
commit 0c93b86
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import { Dimensions, Image, ImageSourcePropType, View } from 'react-native';
+import {
+    Button,
+    Dimensions,
+    Image,
+    ImageSourcePropType,
+    View,
+} from 'react-native';
 import Carousel from '../../src/index';
 import type { ICarouselInstance } from '../../src/Carousel';
 import Animated, {
@@ -10,7 +16,7 @@ import Animated, {
     useSharedValue,
 } from 'react-native-reanimated';
 
-const { width } = Dimensions.get('window');
+const window = Dimensions.get('window');
 
 const data: ImageSourcePropType[] = [
     require('../assets/carousel-0.jpg'),
@@ -30,11 +36,11 @@ export default function App() {
                 paddingTop: 100,
             }}
         >
-            <View style={{ height: 300 }}>
+            <View style={{ height: 240 }}>
                 <Carousel<ImageSourcePropType>
                     defaultIndex={1}
                     ref={r}
-                    width={width}
+                    width={window.width}
                     data={data}
                     parallaxScrollingScale={0.8}
                     renderItem={(source) => (
@@ -50,13 +56,13 @@ export default function App() {
                     )}
                 />
             </View>
-            <View style={{ height: 300 }}>
+            <View style={{ height: 240 }}>
                 <Carousel<ImageSourcePropType>
                     onProgressChange={(_, absoluteProgress) => {
                         progressValue.value = absoluteProgress;
                     }}
                     mode="parallax"
-                    width={width}
+                    width={window.width}
                     data={data}
                     parallaxScrollingScale={0.8}
                     renderItem={(source) => (
@@ -92,6 +98,16 @@ export default function App() {
                         })}
                     </View>
                 )}
+                <View
+                    style={{
+                        marginTop: 24,
+                        flexDirection: 'row',
+                        justifyContent: 'space-evenly',
+                    }}
+                >
+                    <Button title="Prev" onPress={() => r.current?.prev()} />
+                    <Button title="Next" onPress={() => r.current?.next()} />
+                </View>
             </View>
         </View>
     );

diff --git a/src/hooks/useCarouselController.tsx b/src/hooks/useCarouselController.tsx
@@ -54,8 +54,10 @@ export function useCarouselController(opts: IOpts): ICarouselController {
 
         onScrollBegin?.();
 
+        const currentPage = Math.round(handlerOffsetX.value / width);
+
         handlerOffsetX.value = withTiming(
-            handlerOffsetX.value - width,
+            (currentPage - 1) * width,
             defaultTimingConfig,
             (isFinished: boolean) => {
                 if (isFinished) {
@@ -79,8 +81,10 @@ export function useCarouselController(opts: IOpts): ICarouselController {
 
         onScrollBegin?.();
 
+        const currentPage = Math.round(handlerOffsetX.value / width);
+
         handlerOffsetX.value = withTiming(
-            handlerOffsetX.value + width,
+            (currentPage + 1) * width,
             defaultTimingConfig,
             (isFinished: boolean) => {
                 if (isFinished) {