fix: update docs

Author: dohooo

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

@@ -9,8 +9,8 @@ import Animated, {
 import Carousel from "react-native-reanimated-carousel";
 
 import { window } from "../../constants";
-import { TAnimationStyle } from "../../../../../src/layouts/BaseLayout";
 import { getImages } from "../../utils/get-images";
+import { TAnimationStyle } from "../../../../../src/components/BaseLayout";
 
 const data = getImages()
 
@@ -46,8 +46,9 @@ function Index() {
 
       const zIndex = interpolate(
         value,
-        [-1, 0],
-        [100, 0]
+        [0, 1, 2, 3, 4],
+        [0, 1, 2, 3, 4].map((v) => (data.length - v) * 10),
+        Extrapolate.CLAMP
       )
 
       const scale = interpolate(

example/app/src/pages/tinder/preview.gif

@@ -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/normal.mdx

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

example/website/pages/Examples/parallax.mdx

@@ -312,4 +312,16 @@ import { Cards } from 'nextra/components'
     <div style={{ maxHeight: 200 }}>![tear](../../../app/src/pages/tear/preview.gif)</div>
   </Cards.Card>
 
+
+  <Cards.Card
+    image
+    arrow
+    title="tinder"
+    id="summary-item"
+    href="/Examples/tinder"
+    style={{ maxHeight: 240 }}
+  >
+    <div style={{ maxHeight: 200 }}>![tinder](../../../app/src/pages/tinder/preview.gif)</div>
+  </Cards.Card>
+  
 </Cards>

example/website/pages/Examples/summary.mdx

@@ -0,0 +1,196 @@
+---
+id: tinder
+title: Tinder
+sidebar_label: Tinder
+description: Tinder animation
+keywords:
+  - tinder
+  - carousel animation
+  - carousel animation tinder
+  - react-native-reanimated-carousel
+  - reanimated-carousel
+  - reanimated carousel
+  - react-native
+  - snap-carousel
+  - react native
+  - snap carousel
+  - ios
+  - android
+  - carousel
+  - snap
+  - reanimated
+image:
+slug: /examples/tinder
+---
+
+{/* 
+
+=========================================================================
+=========================================================================
+This page generated by /scripts/gen-pages.mjs, Don't update it manually 
+=========================================================================
+=========================================================================
+
+*/}
+
+Here is a `tinder` animation example. You can see the source code of this page [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/src/pages/tinder/index.tsx).
+
+import Page from '../../components/Page'
+
+<Page page='tinder' />
+
+```tsx copy
+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;
+
+```