Merge pull request #528 from dohooo/develop

dohooo · web-flow · commit 764f286eb7a5 · 2024-01-13T23:46:40.000Z
Develop
diff --git a/.changeset/proud-bobcats-tan.md b/.changeset/proud-bobcats-tan.md
@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Exported TAnimationStyle types.
diff --git a/.changeset/slow-donkeys-rest.md b/.changeset/slow-donkeys-rest.md
@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Replaced 'onScrollBegin' with 'onScrollStart' to better match gesture callback.
diff --git a/example/app/src/pages/advanced-parallax/index.tsx b/example/app/src/pages/advanced-parallax/index.tsx
@@ -5,9 +5,8 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
diff --git a/example/app/src/pages/circular/index.tsx b/example/app/src/pages/circular/index.tsx
@@ -2,11 +2,10 @@ import * as React from "react";
 import { Text, View } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBImageItem } from "../../components/SBImageItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
@@ -30,9 +29,9 @@ function Index() {
       );
 
       const translateX
-                = interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize])
-                + centerOffset
-                - itemGap;
+        = interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize])
+        + centerOffset
+        - itemGap;
 
       const translateY = interpolate(
         value,
@@ -109,8 +108,8 @@ function Index() {
                   fontSize: 40,
                 }}
               >
-                {faker.name
-                  .findName()
+                {faker.person.
+                  fullName()
                   .slice(0, 2)
                   .toUpperCase()}
               </Text>
diff --git a/example/app/src/pages/cube-3d/index.tsx b/example/app/src/pages/cube-3d/index.tsx
@@ -6,9 +6,8 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { window } from "../../constants";
 import { withAnchorPoint } from "../../utils/anchor-point";
diff --git a/example/app/src/pages/flow/index.tsx b/example/app/src/pages/flow/index.tsx
@@ -1,12 +1,11 @@
 import * as React from "react";
 import { Text, View, Image } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 import { BlurView } from "expo-blur";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { window } from "../../constants";
 
 function Index() {
diff --git a/example/app/src/pages/fold/index.tsx b/example/app/src/pages/fold/index.tsx
@@ -3,11 +3,10 @@ import { StyleSheet, Text, View } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import type Animated from "react-native-reanimated";
 import { Extrapolate, interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBImageItem } from "../../components/SBImageItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
@@ -154,7 +153,7 @@ const Item: React.FC<{
             textAlign: "center",
           }}
         >
-          {faker.name.findName().slice(0, 2).toUpperCase()}
+          {faker.name.fullName().slice(0, 2).toUpperCase()}
         </Text>
       </View>
     </TouchableWithoutFeedback>
diff --git a/example/app/src/pages/normal/index.tsx b/example/app/src/pages/normal/index.tsx
@@ -47,6 +47,9 @@ function Index() {
         autoPlay={isAutoPlay}
         autoPlayInterval={isFast ? 100 : 2000}
         data={data}
+        onScrollStart={()=>{console.log('===1')}}
+        onScrollEnd={()=>{console.log('===2')}}
+
         onConfigurePanGesture={g => g.enabled(false)}
         pagingEnabled={isPagingEnabled}
         onSnapToItem={index => console.log("current index:", index)}
diff --git a/example/app/src/pages/pause-advanced-parallax/index.tsx b/example/app/src/pages/pause-advanced-parallax/index.tsx
@@ -5,9 +5,8 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
diff --git a/example/app/src/pages/press-swipe/index.tsx b/example/app/src/pages/press-swipe/index.tsx
@@ -7,9 +7,8 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
 import { ImageItems } from "../../utils/items";
@@ -46,7 +45,7 @@ function Index() {
         style={{ width: PAGE_WIDTH, height: 240 }}
         width={PAGE_WIDTH}
         data={[...ImageItems, ...ImageItems]}
-        onScrollBegin={() => {
+        onScrollStart={() => {
           pressAnim.value = withTiming(1);
         }}
         onScrollEnd={() => {
diff --git a/example/app/src/pages/rotate-in-out/index.tsx b/example/app/src/pages/rotate-in-out/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { View } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { ElementsText, window } from "../../constants";
 import { useToggleButton } from "../../hooks/useToggleButton";
diff --git a/example/app/src/pages/rotate-scale-fade-in-out/index.tsx b/example/app/src/pages/rotate-scale-fade-in-out/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { View } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { ElementsText, window } from "../../constants";
 import { useToggleButton } from "../../hooks/useToggleButton";
diff --git a/example/app/src/pages/scale-fade-in-out/index.tsx b/example/app/src/pages/scale-fade-in-out/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { View } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { window } from "../../constants";
 
diff --git a/example/app/src/pages/stack-cards/index.tsx b/example/app/src/pages/stack-cards/index.tsx
@@ -8,11 +8,10 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { Arrow, ArrowDirection } from "./Arrow";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { window } from "../../constants";
 
 function Index() {
diff --git a/example/app/src/pages/tear/index.tsx b/example/app/src/pages/tear/index.tsx
@@ -6,9 +6,8 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
 import { ImageItems } from "../../utils/items";
diff --git a/example/app/src/pages/tinder/index.tsx b/example/app/src/pages/tinder/index.tsx
@@ -6,11 +6,10 @@ import Animated, {
   interpolate,
   useSharedValue,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { window } from "../../constants";
 import { getImages } from "../../utils/get-images";
-import { TAnimationStyle } from "../../../../../src/components/BaseLayout";
 
 const data = getImages()
 
diff --git a/example/website/pages/Examples/advanced-parallax.mdx b/example/website/pages/Examples/advanced-parallax.mdx
@@ -47,9 +47,8 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
diff --git a/example/website/pages/Examples/circular.mdx b/example/website/pages/Examples/circular.mdx
@@ -44,11 +44,10 @@ import * as React from "react";
 import { Text, View } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBImageItem } from "../../components/SBImageItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
@@ -72,9 +71,9 @@ function Index() {
       );
 
       const translateX
-                = interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize])
-                + centerOffset
-                - itemGap;
+        = interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize])
+        + centerOffset
+        - itemGap;
 
       const translateY = interpolate(
         value,
@@ -151,8 +150,8 @@ function Index() {
                   fontSize: 40,
                 }}
               >
-                {faker.name
-                  .findName()
+                {faker.person.
+                  fullName()
                   .slice(0, 2)
                   .toUpperCase()}
               </Text>
diff --git a/example/website/pages/Examples/cube-3d.mdx b/example/website/pages/Examples/cube-3d.mdx
@@ -48,9 +48,8 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { window } from "../../constants";
 import { withAnchorPoint } from "../../utils/anchor-point";
diff --git a/example/website/pages/Examples/flow.mdx b/example/website/pages/Examples/flow.mdx
@@ -43,12 +43,11 @@ import Page from '../../components/Page'
 import * as React from "react";
 import { Text, View, Image } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 import { BlurView } from "expo-blur";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { window } from "../../constants";
 
 function Index() {
diff --git a/example/website/pages/Examples/fold.mdx b/example/website/pages/Examples/fold.mdx
@@ -45,11 +45,10 @@ import { StyleSheet, Text, View } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import type Animated from "react-native-reanimated";
 import { Extrapolate, interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBImageItem } from "../../components/SBImageItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
@@ -196,7 +195,7 @@ const Item: React.FC<{
             textAlign: "center",
           }}
         >
-          {faker.name.findName().slice(0, 2).toUpperCase()}
+          {faker.name.fullName().slice(0, 2).toUpperCase()}
         </Text>
       </View>
     </TouchableWithoutFeedback>
diff --git a/example/website/pages/Examples/pause-advanced-parallax.mdx b/example/website/pages/Examples/pause-advanced-parallax.mdx
@@ -47,9 +47,8 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
diff --git a/example/website/pages/Examples/press-swipe.mdx b/example/website/pages/Examples/press-swipe.mdx
@@ -49,9 +49,8 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
 import { ImageItems } from "../../utils/items";
@@ -88,7 +87,7 @@ function Index() {
         style={{ width: PAGE_WIDTH, height: 240 }}
         width={PAGE_WIDTH}
         data={[...ImageItems, ...ImageItems]}
-        onScrollBegin={() => {
+        onScrollStart={() => {
           pressAnim.value = withTiming(1);
         }}
         onScrollEnd={() => {
diff --git a/example/website/pages/Examples/rotate-in-out.mdx b/example/website/pages/Examples/rotate-in-out.mdx
@@ -43,9 +43,8 @@ import Page from '../../components/Page'
 import * as React from "react";
 import { View } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { ElementsText, window } from "../../constants";
 import { useToggleButton } from "../../hooks/useToggleButton";
diff --git a/example/website/pages/Examples/rotate-scale-fade-in-out.mdx b/example/website/pages/Examples/rotate-scale-fade-in-out.mdx
@@ -43,9 +43,8 @@ import Page from '../../components/Page'
 import * as React from "react";
 import { View } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { ElementsText, window } from "../../constants";
 import { useToggleButton } from "../../hooks/useToggleButton";
diff --git a/example/website/pages/Examples/scale-fade-in-out.mdx b/example/website/pages/Examples/scale-fade-in-out.mdx
@@ -43,9 +43,8 @@ import Page from '../../components/Page'
 import * as React from "react";
 import { View } from "react-native";
 import { interpolate } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { SBItem } from "../../components/SBItem";
 import { window } from "../../constants";
 
diff --git a/example/website/pages/Examples/stack-cards.mdx b/example/website/pages/Examples/stack-cards.mdx
@@ -50,11 +50,10 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { Arrow, ArrowDirection } from "./Arrow";
 
-import type { TAnimationStyle } from "../../../../src/layouts/BaseLayout";
 import { window } from "../../constants";
 
 function Index() {
diff --git a/example/website/pages/Examples/tear.mdx b/example/website/pages/Examples/tear.mdx
diff --git a/example/website/pages/Examples/tinder.mdx b/example/website/pages/Examples/tinder.mdx
diff --git a/example/website/pages/props.mdx b/example/website/pages/props.mdx
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
diff --git a/src/components/ScrollViewGesture.tsx b/src/components/ScrollViewGesture.tsx
diff --git a/src/hooks/useCarouselController.tsx b/src/hooks/useCarouselController.tsx
diff --git a/src/hooks/usePanGestureProxy.test.tsx b/src/hooks/usePanGestureProxy.test.tsx
diff --git a/src/hooks/usePanGestureProxy.ts b/src/hooks/usePanGestureProxy.ts
diff --git a/src/index.tsx b/src/index.tsx
diff --git a/src/types.ts b/src/types.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'react-native-reanimated-carousel': patch
 +---
++
 +Exported TAnimationStyle types.