Merge pull request #507 from dohooo/develop

Develop

.changeset/bright-socks-change.md

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

.changeset/brown-onions-wave.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+remove postinstall script.

.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,153 @@
+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 { getImages } from "../../utils/get-images";
+import { TAnimationStyle } from "../../../../../src/components/BaseLayout";
+
+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,
+        [0, 1, 2, 3, 4],
+        [0, 1, 2, 3, 4].map((v) => (data.length - v) * 10),
+        Extrapolate.CLAMP
+      )
+
+      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/package.json

@@ -28,7 +28,10 @@
   },
   "devDependencies": {
     "@types/node": "18.11.10",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
     "react-native-web": "~0.19.6",
+    "tailwindcss": "^3.3.6",
     "typescript": "^4.9.3"
   }
 }

example/website/pages/Examples/normal.mdx

@@ -49,10 +49,14 @@ import { SafeAreaView } from "react-native-safe-area-context";
 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;
 
 function Index() {
+  const windowWidth = useWindowDimensions().width;
+
   const [data, setData] = React.useState([...new Array(4).keys()]);
   const [isVertical, setIsVertical] = React.useState(false);
   const [isFast, setIsFast] = React.useState(false);
@@ -63,26 +67,31 @@ function Index() {
   const baseOptions = isVertical
     ? ({
       vertical: true,
-      width: PAGE_WIDTH,
+      width: windowWidth,
       height: PAGE_WIDTH / 2,
     } as const)
     : ({
       vertical: false,
-      width: PAGE_WIDTH,
+      width: windowWidth,
       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(false)}
         pagingEnabled={isPagingEnabled}
         onSnapToItem={index => console.log("current index:", index)}
         renderItem={({ index }) => <SBItem key={index} index={index} />}
@@ -121,7 +130,7 @@ function Index() {
             setIsPagingEnabled(!isPagingEnabled);
           }}
         >
-                PagingEnabled:{isPagingEnabled.toString()}
+          PagingEnabled:{isPagingEnabled.toString()}
         </SButton>
         <SButton
           onPress={() => {
@@ -135,7 +144,7 @@ function Index() {
             console.log(ref.current?.getCurrentIndex());
           }}
         >
-                Log current index
+          Log current index
         </SButton>
         <SButton
           onPress={() => {
@@ -146,21 +155,21 @@ function Index() {
             );
           }}
         >
-                Change data length to:{data.length === 6 ? 8 : 6}
+          Change data length to:{data.length === 6 ? 8 : 6}
         </SButton>
         <SButton
           onPress={() => {
             ref.current?.scrollTo({ count: -1, animated: true });
           }}
         >
-                prev
+          prev
         </SButton>
         <SButton
           onPress={() => {
             ref.current?.scrollTo({ count: 1, animated: true });
           }}
         >
-                next
+          next
         </SButton>
       </ScrollView>
     </SafeAreaView>

example/website/pages/Examples/parallax.mdx

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