feat: add new props, fixedDirection

.changeset/bright-socks-change.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': minor
+---
+
+Support to fix the scroll direction through new API, fixedDirection.

.eslintrc

@@ -1,6 +1,9 @@
 {
     "extends": "@dohooo",
     "rules": {
-        "@typescript-eslint/no-use-before-define": "off",
-    }
+        "@typescript-eslint/no-use-before-define": "off"
+    },
+    "plugins": [
+        "jest"
+    ]
 }

example/app/src/Home.tsx

@@ -15,6 +15,7 @@ import AdvancedParallaxComponent from "./pages/advanced-parallax";
 import AnimTabBarComponent from "./pages/anim-tab-bar";
 import BlurParallax from "./pages/blur-parallax";
 import BlurRotate from "./pages/blur-rotate";
+import Tinder from "./pages/tinder";
 import Circular from "./pages/circular";
 import ComplexComponent from "./pages/complex";
 import Cube3D from "./pages/cube-3d";
@@ -60,6 +61,10 @@ export const LayoutsPage = [
 ];
 
 export const CustomAnimations = [
+  {
+    name: 'tinder',
+    page: Tinder,
+  },
   {
     name: 'blur-rotate',
     page: BlurRotate,

example/app/src/pages/normal/index.tsx

@@ -8,6 +8,7 @@ import { SBItem } from "../../components/SBItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
 import { useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
 
 const PAGE_WIDTH = window.width;
 
@@ -33,19 +34,22 @@ function Index() {
       height: PAGE_WIDTH / 2,
     } as const);
 
+  const a = useSharedValue<number>(0);
+
   return (
     <SafeAreaView edges={["bottom"]} style={{ flex: 1 }}>
       <Carousel
         {...baseOptions}
         loop
         enabled // Default is true, just for demo
         ref={ref}
+        defaultScrollOffsetValue={a}
         testID={"xxx"}
         style={{ width: "100%" }}
         autoPlay={isAutoPlay}
         autoPlayInterval={isFast ? 100 : 2000}
         data={data}
-        onConfigurePanGesture={g => g.enabled(true)} // Default is true, just for demo
+        onConfigurePanGesture={g => g.enabled(false)}
         pagingEnabled={isPagingEnabled}
         onSnapToItem={index => console.log("current index:", index)}
         renderItem={({ index }) => <SBItem key={index} index={index} />}

example/app/src/pages/parallax/index.tsx

@@ -49,7 +49,7 @@ function Index() {
       <Carousel
         {...baseOptions}
         style={{
-           width: PAGE_WIDTH * 0.86,
+           width: PAGE_WIDTH,
         }}
         loop
         pagingEnabled={pagingEnabled}

example/app/src/pages/tinder/index.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+import { Image, ImageSourcePropType, View } from "react-native";
+import Animated, {
+  Extrapolate,
+  FadeInDown,
+  interpolate,
+  useSharedValue,
+} from "react-native-reanimated";
+import Carousel from "react-native-reanimated-carousel";
+
+import { window } from "../../constants";
+import { TAnimationStyle } from "../../../../../src/layouts/BaseLayout";
+import { getImages } from "../../utils/get-images";
+
+const data = getImages()
+
+function Index() {
+  const headerHeight = 100;
+  const PAGE_WIDTH = window.width;
+  const PAGE_HEIGHT = window.height - headerHeight;
+
+  const directionAnimVal = useSharedValue(0);
+
+  const animationStyle: TAnimationStyle = React.useCallback(
+    (value: number) => {
+      "worklet";
+      const translateY = interpolate(
+        value,
+        [0, 1],
+        [0, -18],
+      );
+
+      const translateX = interpolate(
+        value,
+        [-1, 0],
+        [PAGE_WIDTH, 0],
+        Extrapolate.CLAMP
+      ) * directionAnimVal.value;
+
+      const rotateZ = interpolate(
+        value,
+        [-1, 0],
+        [15, 0],
+        Extrapolate.CLAMP
+      ) * directionAnimVal.value;
+
+      const zIndex = interpolate(
+        value,
+        [-1, 0],
+        [100, 0]
+      )
+
+      const scale = interpolate(
+        value,
+        [0, 1],
+        [1, 0.95]
+      );
+
+      const opacity = interpolate(
+        value,
+        [-1, -0.8, 0, 1],
+        [0, 0.9, 1, 0.85],
+        Extrapolate.EXTEND
+      );
+
+      return {
+        transform: [
+          { translateY },
+          { translateX },
+          { rotateZ: `${rotateZ}deg` },
+          { scale },
+        ],
+        zIndex,
+        opacity,
+      };
+    },
+    [PAGE_HEIGHT, PAGE_WIDTH],
+  );
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Carousel
+        loop={false}
+        style={{
+          width: PAGE_WIDTH,
+          height: PAGE_HEIGHT,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "white",
+        }}
+        defaultIndex={0}
+        vertical={false}
+        width={PAGE_WIDTH}
+        height={PAGE_HEIGHT}
+        data={data}
+        onConfigurePanGesture={g => {
+          g.onChange(e => {
+            directionAnimVal.value = Math.sign(e.translationX)
+          })
+        }}
+        fixedDirection="negative"
+        renderItem={({ index, item }) => (
+          <Item
+            key={index}
+            img={item}
+          />
+        )}
+        customAnimation={animationStyle}
+        windowSize={5}
+      />
+    </View>
+  );
+}
+
+const Item: React.FC<{ img: ImageSourcePropType }> = ({ img }) => {
+  const width = window.width * 0.7;
+  const height = window.height * 0.5;
+
+  return (
+    <Animated.View entering={FadeInDown.duration(300)} style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <View
+        style={{
+          width,
+          height,
+          borderWidth: 1,
+          borderColor: "black",
+          borderRadius: 20,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "white",
+
+          shadowColor: "#000000d1",
+          shadowOffset: {
+            width: 0,
+            height: 10,
+          },
+          shadowOpacity: 0.51,
+          shadowRadius: 13.16,
+          elevation: 20,
+        }}
+      >
+        <Image source={img} style={{
+          width,
+          height,
+          borderRadius: 20,
+        }} />
+      </View>
+    </Animated.View>
+  );
+};
+
+export default Index;

example/app/src/types/index.d.ts

@@ -1,2 +1,6 @@
 declare module "react-native-safe-area-context";
 
+declare module "*.jpg" {
+    const value: any;
+    export default value;
+}

example/app/src/utils/get-images.ts

@@ -0,0 +1,24 @@
+import { ImageSourcePropType } from "react-native"
+
+const img_0 = require('../../assets/bg-images/0.jpg')
+const img_1 = require('../../assets/bg-images/1.jpg')
+const img_2 = require('../../assets/bg-images/2.jpg')
+const img_3 = require('../../assets/bg-images/3.jpg')
+const img_4 = require('../../assets/bg-images/4.jpg')
+const img_5 = require('../../assets/bg-images/5.jpg')
+const img_6 = require('../../assets/bg-images/6.jpg')
+const img_7 = require('../../assets/bg-images/7.jpg')
+const img_8 = require('../../assets/bg-images/8.jpg')
+const img_9 = require('../../assets/bg-images/9.jpg')
+
+export function getImages(length: number = 10): ImageSourcePropType[] {
+    if (length > 10) {
+        length = 10
+    }
+
+    if (length < 1) {
+        length = 1
+    }
+
+    return [img_0, img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8, img_9].slice(0, length - 1)
+}

example/website/pages/props.mdx

@@ -263,6 +263,14 @@ when false, Carousel will not respond to any gestures
 | ------ | ------- | -------- |
 | boolean | true     | ❌      |
 
+### `fixedDirection`
+
+If positive, the carousel will scroll to the positive direction and vice versa.
+
+| type   | default | required |
+| ------ | ------- | -------- |
+| 'positive' \| 'negative | -     | ❌      |
+
 ### `customConfig`
 
 Custom carousel config

jest.config.js

@@ -8,7 +8,10 @@ module.exports = {
     "lib",
     ".eslintrc",
   ],
-  setupFiles: ["./jest-setup.js"],
+  setupFiles: [
+    "./jest-setup.js",
+    "./node_modules/react-native-gesture-handler/jestSetup.js",
+  ],
   setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
   testEnvironment: "node",
   transformIgnorePatterns: [],

package.json

@@ -63,6 +63,7 @@
         "del-cli": "^5.0.0",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^7.0.0",
+        "eslint-plugin-jest": "^27.6.0",
         "eslint-plugin-prettier": "^3.1.3",
         "gifify": "^2.4.3",
         "husky": "^4.2.5",

src/components/Carousel.tsx

@@ -158,6 +158,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       viewSize: size,
       translation: handlerOffset,
       windowSize,
+      loop,
     });
 
     const layoutConfig = useLayoutConfig({ ...props, size });