Develop

.changeset/proud-bobcats-tan.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Exported TAnimationStyle types.

.changeset/slow-donkeys-rest.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Replaced 'onScrollBegin' with 'onScrollStart' to better match gesture callback.

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";

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>

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";

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() {

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>

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)}

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";

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={() => {

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";

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";

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";
 

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() {

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";

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()
 

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";

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>

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";

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() {

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>

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";

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={() => {

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";

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";

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";
 

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() {