fix: next item function overscolling with overscrollEnabled is false

.changeset/stale-grapes-cry.md

@@ -0,0 +1,5 @@
+---
+"react-native-reanimated-carousel": patch
+---
+
+fix: next item function overscolling with overscrollEnabled is false

.github/workflows/ci.yml

@@ -95,11 +95,12 @@ jobs:
         run: yarn prepare
 
       - name: Run tests
-        run: yarn test
+        run: yarn test:ci
 
       - name: Upload coverage reports
-        uses: codecov/codecov-action@v3
-        if: always()
+        uses: codecov/codecov-action@v5
         with:
+          fail_ci_if_error: true
+          files: ./coverage/lcov.info
           token: ${{ secrets.CODECOV_TOKEN }}
-          fail_ci_if_error: false
+          verbose: true

.gitignore

@@ -72,4 +72,7 @@ lib/
 .cursorignore
 
 # Add Biome cache
-.biome/
+.biome/
+
+# Jest
+coverage/

example/app/.gitignore

@@ -7,6 +7,8 @@ node_modules/
 .expo/
 dist/
 web-build/
+ios/
+android/
 
 # Native
 *.orig.*
@@ -46,4 +48,4 @@ expo-env.d.ts
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

example/app/app.json

@@ -5,7 +5,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
+    "scheme": "rnrc-example-app",
     "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/images/splash.png",

example/app/app/_layout.tsx

@@ -1,5 +1,7 @@
+import "expo-dev-client";
+
 import { useEffect, useState } from "react";
-import { I18nManager, Text, View } from "react-native";
+import { I18nManager, Text } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { TamaguiProvider, XStack, YStack } from "tamagui";
 import { tamaguiConfig } from "../tamagui.config";

example/app/app/demos/custom-animations/multiple/index.tsx

@@ -1,72 +1,55 @@
 import * as React from "react";
 import { View } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 
+import { CarouselAdvancedSettingsPanel } from "@/components/CarouselAdvancedSettingsPanel";
+import { defaultDataWith6Colors } from "@/components/CarouselBasicSettingsPanel";
 import { SBItem } from "@/components/SBItem";
-import SButton from "@/components/SButton";
-import { ElementsText, window } from "@/constants/sizes";
+import { window } from "@/constants/sizes";
+import { useAdvancedSettings } from "@/hooks/useSettings";
 import { CaptureWrapper } from "@/store/CaptureProvider";
 
 const PAGE_WIDTH = window.width;
 
-const COUNT = 6;
+const COUNT = 4;
 
 function Index() {
-  const [isVertical, setIsVertical] = React.useState(false);
-  const [isFast, setIsFast] = React.useState(false);
-  const [isAutoPlay, setIsAutoPlay] = React.useState(false);
-
-  const baseOptions = isVertical
-    ? ({
-        vertical: true,
-        width: PAGE_WIDTH,
-        height: PAGE_WIDTH / 2 / COUNT,
-        style: {
-          height: PAGE_WIDTH / 2,
-        },
-      } as const)
-    : ({
-        vertical: false,
-        width: PAGE_WIDTH / COUNT,
-        height: PAGE_WIDTH / 2,
-        style: {
-          width: PAGE_WIDTH,
-        },
-      } as const);
+  const ref = React.useRef<ICarouselInstance>(null);
+  const { advancedSettings, onAdvancedSettingsChange } = useAdvancedSettings({
+    // These values will be passed in the Carousel Component as default props
+    defaultSettings: {
+      autoPlay: false,
+      autoPlayInterval: 2000,
+      autoPlayReverse: false,
+      data: defaultDataWith6Colors,
+      height: 258,
+      loop: true,
+      pagingEnabled: true,
+      snapEnabled: true,
+      vertical: false,
+      width: PAGE_WIDTH / COUNT,
+    },
+  });
 
   return (
     <View style={{ flex: 1 }}>
       <CaptureWrapper>
         <Carousel
-          {...baseOptions}
-          loop
-          autoPlay={isAutoPlay}
-          autoPlayInterval={isFast ? 100 : 2000}
-          data={[...new Array(12).keys()]}
+          ref={ref}
+          {...advancedSettings}
+          loop={false}
+          overscrollEnabled={false}
+          style={{ width: PAGE_WIDTH }}
+          data={[...new Array(6).keys()]}
           renderItem={({ index }) => <SBItem key={index} index={index} />}
         />
       </CaptureWrapper>
-      <SButton
-        onPress={() => {
-          setIsVertical(!isVertical);
-        }}
-      >
-        {isVertical ? "Set horizontal" : "Set Vertical"}
-      </SButton>
-      <SButton
-        onPress={() => {
-          setIsFast(!isFast);
-        }}
-      >
-        {isFast ? "NORMAL" : "FAST"}
-      </SButton>
-      <SButton
-        onPress={() => {
-          setIsAutoPlay(!isAutoPlay);
-        }}
-      >
-        {ElementsText.AUTOPLAY}:{`${isAutoPlay}`}
-      </SButton>
+
+      <CarouselAdvancedSettingsPanel
+        carouselRef={ref}
+        advancedSettings={advancedSettings}
+        onAdvancedSettingsChange={onAdvancedSettingsChange}
+      />
     </View>
   );
 }

example/app/package.json

@@ -5,8 +5,8 @@
   "main": "expo-router/entry",
   "scripts": {
     "start": "expo start -c",
-    "android": "expo start --android -c",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web -p 8002",
     "build:web": "expo export --platform web",
     "test": "jest --watchAll",
@@ -23,6 +23,7 @@
     "@tamagui/lucide-icons": "^1.111.13",
     "expo": "~51.0.28",
     "expo-blur": "~13.0.2",
+    "expo-dev-client": "~4.0.29",
     "expo-font": "~12.0.10",
     "expo-haptics": "~13.0.1",
     "expo-image": "~1.12.15",

example/app/yarn.lock

@@ -4694,6 +4694,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv@npm:8.11.0":
+  version: 8.11.0
+  resolution: "ajv@npm:8.11.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+    uri-js: "npm:^4.2.2"
+  checksum: aa0dfd6cebdedde8e77747e84e7b7c55921930974b8547f54b4156164ff70445819398face32dafda4bd4c61bbc7513d308d4c2bf769f8ea6cb9c8449f9faf54
+  languageName: node
+  linkType: hard
+
 "ajv@npm:^8.0.0, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
@@ -4824,6 +4836,7 @@ __metadata:
     babel-plugin-module-resolver: "npm:^5.0.2"
     expo: "npm:~51.0.28"
     expo-blur: "npm:~13.0.2"
+    expo-dev-client: "npm:~4.0.29"
     expo-font: "npm:~12.0.10"
     expo-haptics: "npm:~13.0.1"
     expo-image: "npm:~1.12.15"
@@ -6867,6 +6880,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-dev-client@npm:~4.0.29":
+  version: 4.0.29
+  resolution: "expo-dev-client@npm:4.0.29"
+  dependencies:
+    expo-dev-launcher: "npm:4.0.29"
+    expo-dev-menu: "npm:5.0.23"
+    expo-dev-menu-interface: "npm:1.8.4"
+    expo-manifests: "npm:~0.14.0"
+    expo-updates-interface: "npm:~0.16.2"
+  peerDependencies:
+    expo: "*"
+  checksum: 015dd84168e33521446857b4dd428daa1cea3b12ba773d6f56e2d699d462fedf746092057c3c4c71c51b26d28adc8d7a0f5ad09b10c20d767bc9ae33bc0d970d
+  languageName: node
+  linkType: hard
+
+"expo-dev-launcher@npm:4.0.29":
+  version: 4.0.29
+  resolution: "expo-dev-launcher@npm:4.0.29"
+  dependencies:
+    ajv: "npm:8.11.0"
+    expo-dev-menu: "npm:5.0.23"
+    expo-manifests: "npm:~0.14.0"
+    resolve-from: "npm:^5.0.0"
+    semver: "npm:^7.6.0"
+  peerDependencies:
+    expo: "*"
+  checksum: 6ed78fb211109b36b5e1f888d367b2a24256357e908b26afabeab127a32231faab2402ddd3939a1d25e9b3f651ce51d93a442b5ae49afddc9a0d840d3ac288d3
+  languageName: node
+  linkType: hard
+
+"expo-dev-menu-interface@npm:1.8.4":
+  version: 1.8.4
+  resolution: "expo-dev-menu-interface@npm:1.8.4"
+  peerDependencies:
+    expo: "*"
+  checksum: 205e2470435a3ca9f59e35c2b982123675b9c0c5480ecb6eaf36931742ea6a91e359e3ad5cee81e3d14710b209afcbbff5525ae0c328d5a98c63af91fa81a753
+  languageName: node
+  linkType: hard
+
+"expo-dev-menu@npm:5.0.23":
+  version: 5.0.23
+  resolution: "expo-dev-menu@npm:5.0.23"
+  dependencies:
+    expo-dev-menu-interface: "npm:1.8.4"
+    semver: "npm:^7.5.4"
+  peerDependencies:
+    expo: "*"
+  checksum: 0d4910905a37144a2ee4b3f21588870257020c4895c39798a65721ccfccd0451ccb32a78eae5cc003150b9dd996f5c7c9d78890bd5d4fad007902858bae351a1
+  languageName: node
+  linkType: hard
+
 "expo-eas-client@npm:~0.12.0":
   version: 0.12.0
   resolution: "expo-eas-client@npm:0.12.0"
@@ -7141,7 +7205,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-deep-equal@npm:^3.1.3":
+"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
   checksum: e21a9d8d84f53493b6aa15efc9cfd53dd5b714a1f23f67fb5dc8f574af80df889b3bce25dc081887c6d25457cce704e636395333abad896ccdec03abaf1f3f9d
@@ -11107,7 +11171,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.1":
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
   checksum: febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
@@ -13358,6 +13422,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uri-js@npm:^4.2.2":
+  version: 4.4.1
+  resolution: "uri-js@npm:4.4.1"
+  dependencies:
+    punycode: "npm:^2.1.0"
+  checksum: b271ca7e3d46b7160222e3afa3e531505161c9a4e097febae9664e4b59912f4cbe94861361a4175edac3a03fee99d91e44b6a58c17a634bc5a664b19fc76fbcb
+  languageName: node
+  linkType: hard
+
 "url-join@npm:4.0.0":
   version: 4.0.0
   resolution: "url-join@npm:4.0.0"

jest.config.js

@@ -3,7 +3,22 @@ module.exports = {
   modulePathIgnorePatterns: ["example", "docs", "assets", ".yarn", "lib"],
   setupFiles: ["./test/jest-setup.js", "./node_modules/react-native-gesture-handler/jestSetup.js"],
   setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
+  coverageReporters: ["text", "lcov", "cobertura"],
+  collectCoverageFrom: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.d.ts",
+    "!src/**/*.test.{ts,tsx}",
+    "!src/**/types.ts",
+    "!src/index.tsx",
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 50,
+      functions: 70,
+      lines: 70,
+      statements: 70,
+    },
+  },
   testEnvironment: "node",
   transformIgnorePatterns: [],
-  reporters: ["./test/reporter.js"],
 };