fix: fixed pagingEnabled prop error

Author: dohooo

exampleExpo/src/circular/index.tsx

@@ -93,6 +93,7 @@ function Index() {
                             }}
                         >
                             <SBImageItem
+                                showIndex={false}
                                 style={{
                                     position: 'absolute',
                                     width: '100%',

exampleExpo/src/components/SBImageItem.tsx

@@ -13,9 +13,14 @@ import {
 interface Props {
     style?: StyleProp<ViewStyle>;
     index?: number;
+    showIndex?: boolean;
 }
 
-export const SBImageItem: React.FC<Props> = ({ style, index: _index }) => {
+export const SBImageItem: React.FC<Props> = ({
+    style,
+    index: _index,
+    showIndex = true,
+}) => {
     const index = (_index || 0) + 1;
     const source = React.useRef<ImageURISource>({
         uri: `https://picsum.photos/id/${index}/400/300`,
@@ -37,7 +42,7 @@ export const SBImageItem: React.FC<Props> = ({ style, index: _index }) => {
                     paddingTop: 2,
                 }}
             >
-                {index}
+                {showIndex ? index : ''}
             </Text>
         </View>
     );

exampleExpo/src/fold/index.tsx

@@ -3,11 +3,7 @@ import Carousel from 'react-native-reanimated-carousel';
 import SButton from '../components/SButton';
 import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
 import { ElementsText, window } from '../constants';
-import Animated, {
-    Extrapolate,
-    interpolate,
-    useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolate, interpolate } from 'react-native-reanimated';
 import { SBImageItem } from '../components/SBImageItem';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import { StyleSheet, Text, View } from 'react-native';
@@ -121,19 +117,7 @@ function Index() {
 const Item: React.FC<{
     index: number;
     animationValue: Animated.SharedValue<number>;
-}> = ({ index, animationValue }) => {
-    const maskStyle = useAnimatedStyle(() => {
-        // const backgroundColor = interpolateColor(
-        //     animationValue.value,
-        //     [-1, 0, 1],
-        //     ['#000000dd', 'transparent', '#000000dd']
-        // );
-
-        return {
-            // backgroundColor,
-        };
-    }, [animationValue]);
-
+}> = ({ index }) => {
     return (
         <TouchableWithoutFeedback
             onPress={() => {
@@ -151,7 +135,12 @@ const Item: React.FC<{
                     alignItems: 'center',
                 }}
             >
-                <SBImageItem key={index} style={styles.image} index={index} />
+                <SBImageItem
+                    showIndex={false}
+                    key={index}
+                    style={styles.image}
+                    index={index}
+                />
                 <Text
                     style={{
                         color: 'white',
@@ -163,20 +152,6 @@ const Item: React.FC<{
                 >
                     {faker.name.findName().slice(0, 2).toUpperCase()}
                 </Text>
-
-                <Animated.View
-                    pointerEvents="none"
-                    style={[
-                        {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                        },
-                        maskStyle,
-                    ]}
-                />
             </View>
         </TouchableWithoutFeedback>
     );

exampleExpo/src/normal/index.tsx

@@ -12,6 +12,7 @@ function Index() {
     const [isVertical, setIsVertical] = React.useState(false);
     const [isFast, setIsFast] = React.useState(false);
     const [isAutoPlay, setIsAutoPlay] = React.useState(false);
+    const [isPagingEnabled, setIsPagingEnabled] = React.useState(true);
     const ref = React.useRef<ICarouselInstance>(null);
 
     const baseOptions = isVertical
@@ -35,6 +36,7 @@ function Index() {
                 autoPlay={isAutoPlay}
                 autoPlayInterval={isFast ? 100 : 2000}
                 data={data}
+                pagingEnabled={isPagingEnabled}
                 onSnapToItem={(index) => console.log('current index:', index)}
                 renderItem={({ index }) => <SBItem key={index} index={index} />}
             />
@@ -52,6 +54,13 @@ function Index() {
             >
                 {isFast ? 'NORMAL' : 'FAST'}
             </SButton>
+            <SButton
+                onPress={() => {
+                    setIsPagingEnabled(!isPagingEnabled);
+                }}
+            >
+                PagingEnabled:{isPagingEnabled.toString()}
+            </SButton>
             <SButton
                 onPress={() => {
                     setIsAutoPlay(!isAutoPlay);

src/ScrollViewGesture.tsx

@@ -95,9 +95,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             const origin = translation.value;
             const velocity = scrollEndVelocity.value;
             if (!pagingEnabled) {
+                /**
+                 * If enabled, releasing the touch will scroll to the nearest item.
+                 * valid when pagingEnabled=false
+                 */
                 if (snapEnabled) {
                     const nextPage =
                         Math.round((origin + velocity * 0.4) / size) * size;
+
                     translation.value = _withSpring(nextPage, onFinished);
                     return;
                 }
@@ -107,29 +112,30 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 });
                 return;
             }
-            const page = Math.round(-translation.value / size);
-            const velocityPage = Math.round(
-                -(translation.value + scrollEndVelocity.value) / size
-            );
-            let finalPage = Math.min(
-                page + 1,
-                Math.max(page - 1, velocityPage)
-            );
+
+            const direction =
+                -scrollEndTranslation.value /
+                Math.abs(scrollEndTranslation.value);
+            const computed = direction < 0 ? Math.ceil : Math.floor;
+            const page = computed(-translation.value / size);
+            let finalPage = page + direction;
+
             if (!infinite) {
                 finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));
             }
 
             translation.value = _withSpring(-finalPage * size, onFinished);
         },
         [
-            infinite,
-            _withSpring,
             translation,
-            scrollEndVelocity,
-            size,
-            maxPage,
+            scrollEndVelocity.value,
             pagingEnabled,
+            size,
+            scrollEndTranslation.value,
+            infinite,
+            _withSpring,
             snapEnabled,
+            maxPage,
         ]
     );