From 43a4c0869425aca043c041e0a1a8d085e4374354 Mon Sep 17 00:00:00 2001 From: Caspian Zhao Date: Sun, 21 Sep 2025 21:56:15 +0800 Subject: [PATCH 1/8] chore: update .gitignore to exclude local agent documentation files --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index a88b26fe..307cddfe 100644 --- a/.gitignore +++ b/.gitignore @@ -79,3 +79,6 @@ coverage/ # Issue tasks .issue-tasks/ + +# Agents Docs +*.local.md \ No newline at end of file From 587cf74172c06f8be36465dc0d3eb94260632504 Mon Sep 17 00:00:00 2001 From: Caspian Zhao Date: Mon, 22 Sep 2025 23:35:39 +0800 Subject: [PATCH 2/8] chore: update Babel configuration and clean up project structure --- .babelrc | 4 - babel.config.js | 9 +- example/app/app.json | 2 +- example/app/app/_layout.tsx | 2 +- .../advanced-parallax/demo.tsx | 3 +- .../advanced-parallax/index.tsx | 3 +- .../custom-animations/anim-tab-bar/demo.tsx | 3 +- .../custom-animations/anim-tab-bar/index.tsx | 3 +- .../custom-animations/blur-parallax/demo.tsx | 12 +- .../custom-animations/blur-parallax/index.tsx | 8 +- .../custom-animations/blur-rotate/demo.tsx | 14 +- .../custom-animations/blur-rotate/index.tsx | 10 +- .../demos/custom-animations/cube-3d/demo.tsx | 5 +- .../demos/custom-animations/cube-3d/index.tsx | 5 +- .../demos/custom-animations/curve/index.tsx | 3 +- .../app/demos/custom-animations/fold/demo.tsx | 4 +- .../demos/custom-animations/fold/index.tsx | 6 +- .../parallax-layers/index.tsx | 3 +- .../pause-advanced-parallax/index.tsx | 4 +- .../custom-animations/press-swipe/demo.tsx | 3 +- .../custom-animations/press-swipe/index.tsx | 4 +- .../custom-animations/quick-swipe/demo.tsx | 7 +- .../quick-swipe/images/index.ts | 141 - .../custom-animations/quick-swipe/index.tsx | 7 +- .../custom-animations/stack-cards/index.tsx | 7 +- example/app/app/index.tsx | 2 +- example/app/components/ActionItems.tsx | 25 +- .../CarouselAdvancedSettingsPanel.tsx | 2 +- example/app/components/HeaderRight.tsx | 23 +- example/app/components/SBItem.tsx | 5 +- .../StackCardsArrow.tsx} | 3 +- .../blur-parallax/parallax.ts | 0 .../custom-animations/blur-rotate/parallax.ts | 0 .../custom-animations/curve/parallax.ts | 0 .../custom-animations/quick-swipe/images.ts | 141 + example/app/metro.config.js | 7 +- example/app/package.json | 137 +- example/app/utils/anchor-point.ts | 59 +- example/app/{app => utils}/routes.ts | 0 example/app/yarn.lock | 7276 +++++----- jest.config.js | 8 +- package.json | 268 +- src/components/Carousel.test.tsx | 105 +- src/components/Carousel.tsx | 8 +- src/components/ItemLayout.tsx | 2 +- src/components/LazyView.test.tsx | 4 +- .../Pagination/Basic/PaginationItem.tsx | 3 +- .../Pagination/Custom/PaginationItem.tsx | 16 +- src/components/Pagination/Custom/index.tsx | 8 +- src/components/ScrollViewGesture.tsx | 3 +- src/components/rnr-demo.test.tsx | 75 +- src/constants/index.ts | 4 +- src/hooks/useAutoPlay.ts | 12 +- src/hooks/useCommonVariables.ts | 4 +- src/hooks/useOffsetX.ts | 4 +- src/hooks/useOnProgressChange.ts | 4 +- src/hooks/useVisibleRanges.tsx | 18 +- src/store/index.test.tsx | 34 +- src/types.ts | 3 +- test/jest-setup.js | 1 + yarn.lock | 11955 ++++++++++++---- 61 files changed, 13455 insertions(+), 7036 deletions(-) delete mode 100644 .babelrc delete mode 100644 example/app/app/demos/custom-animations/quick-swipe/images/index.ts rename example/app/{app/demos/custom-animations/stack-cards/Arrow.tsx => components/StackCardsArrow.tsx} (96%) rename example/app/{app/demos => features}/custom-animations/blur-parallax/parallax.ts (100%) rename example/app/{app/demos => features}/custom-animations/blur-rotate/parallax.ts (100%) rename example/app/{app/demos => features}/custom-animations/curve/parallax.ts (100%) create mode 100644 example/app/features/custom-animations/quick-swipe/images.ts rename example/app/{app => utils}/routes.ts (100%) diff --git a/.babelrc b/.babelrc deleted file mode 100644 index b856055e..00000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["module:metro-react-native-babel-preset"], - "plugins": ["react-native-reanimated/plugin"] -} diff --git a/babel.config.js b/babel.config.js index 460feb88..b8ca6668 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,9 +1,4 @@ module.exports = { - presets: ["module:metro-react-native-babel-preset"], - plugins: [ - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-private-methods", - "react-native-reanimated/plugin", - "@babel/plugin-syntax-dynamic-import", - ], + presets: ["@react-native/babel-preset"], + plugins: ["react-native-worklets/plugin", "@babel/plugin-syntax-dynamic-import"], }; diff --git a/example/app/app.json b/example/app/app.json index 0de61292..289db83b 100644 --- a/example/app/app.json +++ b/example/app/app.json @@ -27,7 +27,7 @@ "output": "static", "favicon": "./assets/images/favicon.png" }, - "plugins": ["expo-router", "expo-font"], + "plugins": ["expo-router", "expo-font", "expo-web-browser"], "experiments": { "typedRoutes": true } diff --git a/example/app/app/_layout.tsx b/example/app/app/_layout.tsx index 924d7d3a..015a28f6 100644 --- a/example/app/app/_layout.tsx +++ b/example/app/app/_layout.tsx @@ -17,10 +17,10 @@ import { MAX_WIDTH } from "@/constants/sizes"; import { useInDoc } from "@/hooks/useInDoc"; import { CaptureProvider } from "@/store/CaptureProvider"; import { useWebContext } from "@/store/WebProvider"; +import { routes } from "@/utils/routes"; import { Link } from "expo-router"; import Stack from "expo-router/stack"; import { useReducedMotion } from "react-native-reanimated"; -import { routes } from "./routes"; export { // Catch any errors thrown by the Layout component. diff --git a/example/app/app/demos/custom-animations/advanced-parallax/demo.tsx b/example/app/app/demos/custom-animations/advanced-parallax/demo.tsx index 9d2eb27f..71e6f734 100644 --- a/example/app/app/demos/custom-animations/advanced-parallax/demo.tsx +++ b/example/app/app/demos/custom-animations/advanced-parallax/demo.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { View } from "react-native"; import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; @@ -11,7 +12,7 @@ const PAGE_WIDTH = window.width; interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/advanced-parallax/index.tsx b/example/app/app/demos/custom-animations/advanced-parallax/index.tsx index e6b2e7b7..d5e88fe8 100644 --- a/example/app/app/demos/custom-animations/advanced-parallax/index.tsx +++ b/example/app/app/demos/custom-animations/advanced-parallax/index.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { View } from "react-native"; import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; @@ -12,7 +13,7 @@ const PAGE_WIDTH = window.width; interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/anim-tab-bar/demo.tsx b/example/app/app/demos/custom-animations/anim-tab-bar/demo.tsx index 5aaacf73..a8ea864c 100644 --- a/example/app/app/demos/custom-animations/anim-tab-bar/demo.tsx +++ b/example/app/app/demos/custom-animations/anim-tab-bar/demo.tsx @@ -10,6 +10,7 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import type { ICarouselInstance } from "react-native-reanimated-carousel"; import Carousel from "react-native-reanimated-carousel"; @@ -67,7 +68,7 @@ function Index() { export default Index; interface Props { - animationValue: Animated.SharedValue; + animationValue: SharedValue; label: string; onPress?: () => void; } diff --git a/example/app/app/demos/custom-animations/anim-tab-bar/index.tsx b/example/app/app/demos/custom-animations/anim-tab-bar/index.tsx index 7bb572f5..b9083dcc 100644 --- a/example/app/app/demos/custom-animations/anim-tab-bar/index.tsx +++ b/example/app/app/demos/custom-animations/anim-tab-bar/index.tsx @@ -8,6 +8,7 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import type { ICarouselInstance } from "react-native-reanimated-carousel"; import Carousel from "react-native-reanimated-carousel"; @@ -84,7 +85,7 @@ function Index() { export default Index; interface Props { - animationValue: Animated.SharedValue; + animationValue: SharedValue; label: string; onPress?: () => void; } diff --git a/example/app/app/demos/custom-animations/blur-parallax/demo.tsx b/example/app/app/demos/custom-animations/blur-parallax/demo.tsx index f4c7bb37..e3e7a211 100644 --- a/example/app/app/demos/custom-animations/blur-parallax/demo.tsx +++ b/example/app/app/demos/custom-animations/blur-parallax/demo.tsx @@ -1,17 +1,15 @@ import * as React from "react"; -import type { ImageSourcePropType } from "react-native"; -import { Image, StyleSheet, View } from "react-native"; +import { StyleSheet, View } from "react-native"; import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel from "react-native-reanimated-carousel"; import { BlurView as _BlurView } from "expo-blur"; -import { parallaxLayout } from "./parallax"; +import { parallaxLayout } from "@/features/custom-animations/blur-parallax/parallax"; -import SButton from "@/components/SButton"; import { SlideItem } from "@/components/SlideItem"; -import { ElementsText, window } from "@/constants/sizes"; -import { CaptureWrapper } from "@/store/CaptureProvider"; +import { window } from "@/constants/sizes"; import { fruitItems } from "@/utils/items"; const BlurView = Animated.createAnimatedComponent(_BlurView); @@ -53,7 +51,7 @@ function Index() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/blur-parallax/index.tsx b/example/app/app/demos/custom-animations/blur-parallax/index.tsx index 9b4a07c9..17b26323 100644 --- a/example/app/app/demos/custom-animations/blur-parallax/index.tsx +++ b/example/app/app/demos/custom-animations/blur-parallax/index.tsx @@ -1,12 +1,12 @@ import * as React from "react"; -import type { ImageSourcePropType } from "react-native"; -import { Image, StyleSheet, View } from "react-native"; +import { StyleSheet, View } from "react-native"; import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel from "react-native-reanimated-carousel"; import { BlurView as _BlurView } from "expo-blur"; -import { parallaxLayout } from "./parallax"; +import { parallaxLayout } from "@/features/custom-animations/blur-parallax/parallax"; import SButton from "@/components/SButton"; import { SlideItem } from "@/components/SlideItem"; @@ -65,7 +65,7 @@ function Index() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/blur-rotate/demo.tsx b/example/app/app/demos/custom-animations/blur-rotate/demo.tsx index 9d4b9733..50b0140a 100644 --- a/example/app/app/demos/custom-animations/blur-rotate/demo.tsx +++ b/example/app/app/demos/custom-animations/blur-rotate/demo.tsx @@ -1,20 +1,16 @@ import * as React from "react"; -import type { ImageSourcePropType } from "react-native"; -import { Image, StyleSheet, View } from "react-native"; +import { StyleSheet, View } from "react-native"; import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel from "react-native-reanimated-carousel"; import { BlurView as _BlurView } from "expo-blur"; -import { parallaxLayout } from "./parallax"; +import { parallaxLayout } from "@/features/custom-animations/blur-rotate/parallax"; -import { SBItem } from "@/components/SBItem"; -import SButton from "@/components/SButton"; import { SlideItem } from "@/components/SlideItem"; import { PURPLE_IMAGES } from "@/constants/purple-images"; -import { ElementsText, HEADER_HEIGHT, window } from "@/constants/sizes"; -import { CaptureWrapper } from "@/store/CaptureProvider"; -import { fruitItems } from "@/utils/items"; +import { HEADER_HEIGHT, window } from "@/constants/sizes"; const BlurView = Animated.createAnimatedComponent(_BlurView); @@ -52,7 +48,7 @@ function Index() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/blur-rotate/index.tsx b/example/app/app/demos/custom-animations/blur-rotate/index.tsx index 98249131..6820d5c7 100644 --- a/example/app/app/demos/custom-animations/blur-rotate/index.tsx +++ b/example/app/app/demos/custom-animations/blur-rotate/index.tsx @@ -1,20 +1,18 @@ import * as React from "react"; -import type { ImageSourcePropType } from "react-native"; -import { Image, StyleSheet, View } from "react-native"; +import { StyleSheet, View } from "react-native"; import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel from "react-native-reanimated-carousel"; import { BlurView as _BlurView } from "expo-blur"; -import { parallaxLayout } from "./parallax"; +import { parallaxLayout } from "@/features/custom-animations/blur-rotate/parallax"; -import { SBItem } from "@/components/SBItem"; import SButton from "@/components/SButton"; import { SlideItem } from "@/components/SlideItem"; import { PURPLE_IMAGES } from "@/constants/purple-images"; import { ElementsText, HEADER_HEIGHT, window } from "@/constants/sizes"; import { CaptureWrapper } from "@/store/CaptureProvider"; -import { fruitItems } from "@/utils/items"; const BlurView = Animated.createAnimatedComponent(_BlurView); @@ -63,7 +61,7 @@ function Index() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/cube-3d/demo.tsx b/example/app/app/demos/custom-animations/cube-3d/demo.tsx index e84927cd..11866d2b 100644 --- a/example/app/app/demos/custom-animations/cube-3d/demo.tsx +++ b/example/app/app/demos/custom-animations/cube-3d/demo.tsx @@ -1,11 +1,12 @@ import * as React from "react"; -import { View, ViewStyle } from "react-native"; +import { View } from "react-native"; import Animated, { Extrapolation, interpolate, interpolateColor, useAnimatedStyle, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; @@ -106,7 +107,7 @@ function CubeItem() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/cube-3d/index.tsx b/example/app/app/demos/custom-animations/cube-3d/index.tsx index 778892a7..1e210cf9 100644 --- a/example/app/app/demos/custom-animations/cube-3d/index.tsx +++ b/example/app/app/demos/custom-animations/cube-3d/index.tsx @@ -1,11 +1,12 @@ import * as React from "react"; -import { View, ViewStyle } from "react-native"; +import { View } from "react-native"; import Animated, { Extrapolation, interpolate, interpolateColor, useAnimatedStyle, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; @@ -105,7 +106,7 @@ function CubeItem() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/curve/index.tsx b/example/app/app/demos/custom-animations/curve/index.tsx index 70a66bd7..910b7ac7 100644 --- a/example/app/app/demos/custom-animations/curve/index.tsx +++ b/example/app/app/demos/custom-animations/curve/index.tsx @@ -6,6 +6,7 @@ import Animated, { useAnimatedStyle, useSharedValue, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; @@ -135,7 +136,7 @@ const PaginationItem: React.FC<{ index: number; backgroundColor: string; length: number; - animValue: Animated.SharedValue; + animValue: SharedValue; isRotate?: boolean; }> = (props) => { const { animValue, index, length, backgroundColor, isRotate } = props; diff --git a/example/app/app/demos/custom-animations/fold/demo.tsx b/example/app/app/demos/custom-animations/fold/demo.tsx index 8857db01..d2bc1bc2 100644 --- a/example/app/app/demos/custom-animations/fold/demo.tsx +++ b/example/app/app/demos/custom-animations/fold/demo.tsx @@ -1,8 +1,8 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; import { TouchableWithoutFeedback } from "react-native-gesture-handler"; -import type Animated from "react-native-reanimated"; import { Extrapolation, interpolate } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SlideItem } from "@/components/SlideItem"; @@ -94,7 +94,7 @@ function Index() { const Item: React.FC<{ index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; }> = ({ index }) => { return ( ; + animationValue: SharedValue; }> = ({ index }) => { return ( ; + animationValue: SharedValue; }> = ({ index, animationValue }) => { const WIDTH = PAGE_WIDTH / 1.5; const HEIGHT = PAGE_HEIGHT / 1.5; diff --git a/example/app/app/demos/custom-animations/pause-advanced-parallax/index.tsx b/example/app/app/demos/custom-animations/pause-advanced-parallax/index.tsx index 259426e8..72563aff 100644 --- a/example/app/app/demos/custom-animations/pause-advanced-parallax/index.tsx +++ b/example/app/app/demos/custom-animations/pause-advanced-parallax/index.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import { View } from "react-native"; import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; import SButton from "@/components/SButton"; import { ElementsText, window } from "@/constants/sizes"; -import { CaptureWrapper } from "@/store/CaptureProvider"; const PAGE_WIDTH = window.width; @@ -51,7 +51,7 @@ function Index() { interface ItemProps { index: number; - animationValue: Animated.SharedValue; + animationValue: SharedValue; } const CustomItem: React.FC = ({ index, animationValue }) => { const maskStyle = useAnimatedStyle(() => { diff --git a/example/app/app/demos/custom-animations/press-swipe/demo.tsx b/example/app/app/demos/custom-animations/press-swipe/demo.tsx index 5deb6213..d90a2970 100644 --- a/example/app/app/demos/custom-animations/press-swipe/demo.tsx +++ b/example/app/app/demos/custom-animations/press-swipe/demo.tsx @@ -6,6 +6,7 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import { SlideItem } from "@/components/SlideItem"; @@ -52,7 +53,7 @@ function Index() { } interface ItemProps { - pressAnim: Animated.SharedValue; + pressAnim: SharedValue; index: number; } diff --git a/example/app/app/demos/custom-animations/press-swipe/index.tsx b/example/app/app/demos/custom-animations/press-swipe/index.tsx index b57f082b..8730f31b 100644 --- a/example/app/app/demos/custom-animations/press-swipe/index.tsx +++ b/example/app/app/demos/custom-animations/press-swipe/index.tsx @@ -1,5 +1,4 @@ import * as React from "react"; -import type { ImageSourcePropType } from "react-native"; import { View } from "react-native"; import Animated, { interpolate, @@ -7,6 +6,7 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; import SButton from "@/components/SButton"; @@ -66,7 +66,7 @@ function Index() { } interface ItemProps { - pressAnim: Animated.SharedValue; + pressAnim: SharedValue; index: number; } diff --git a/example/app/app/demos/custom-animations/quick-swipe/demo.tsx b/example/app/app/demos/custom-animations/quick-swipe/demo.tsx index d2be742d..da21c129 100644 --- a/example/app/app/demos/custom-animations/quick-swipe/demo.tsx +++ b/example/app/app/demos/custom-animations/quick-swipe/demo.tsx @@ -5,6 +5,7 @@ import Carousel from "react-native-reanimated-carousel"; import { SBItem } from "@/components/SBItem"; import { IS_WEB } from "@/constants/platform"; import { window } from "@/constants/sizes"; +import { getImages } from "@/features/custom-animations/quick-swipe/images"; import * as Haptics from "expo-haptics"; import { Image, ImageSourcePropType, View, ViewStyle } from "react-native"; import { Gesture, GestureDetector } from "react-native-gesture-handler"; @@ -18,7 +19,7 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; -import { getImages } from "./images"; +import type { SharedValue } from "react-native-reanimated"; const data = getImages().slice(0, 68); @@ -179,8 +180,8 @@ const ThumbnailPaginationItem: React.FC<{ source: ImageSourcePropType; containerWidth: number; totalItems: number; - activeIndex: Animated.SharedValue; - swipeProgress: Animated.SharedValue; + activeIndex: SharedValue; + swipeProgress: SharedValue; activeWidth: number; totalWidth: number; inactiveWidth: number; diff --git a/example/app/app/demos/custom-animations/quick-swipe/images/index.ts b/example/app/app/demos/custom-animations/quick-swipe/images/index.ts deleted file mode 100644 index 70f01daf..00000000 --- a/example/app/app/demos/custom-animations/quick-swipe/images/index.ts +++ /dev/null @@ -1,141 +0,0 @@ -const img_1 = require("./frame_0001.jpg"); -const img_2 = require("./frame_0002.jpg"); -const img_3 = require("./frame_0003.jpg"); -const img_4 = require("./frame_0004.jpg"); -const img_5 = require("./frame_0005.jpg"); -const img_6 = require("./frame_0006.jpg"); -const img_7 = require("./frame_0007.jpg"); -const img_8 = require("./frame_0008.jpg"); -const img_9 = require("./frame_0009.jpg"); -const img_10 = require("./frame_0010.jpg"); -const img_11 = require("./frame_0011.jpg"); -const img_12 = require("./frame_0012.jpg"); -const img_13 = require("./frame_0013.jpg"); -const img_14 = require("./frame_0014.jpg"); -const img_15 = require("./frame_0015.jpg"); -const img_16 = require("./frame_0016.jpg"); -const img_17 = require("./frame_0017.jpg"); -const img_18 = require("./frame_0018.jpg"); -const img_19 = require("./frame_0019.jpg"); -const img_20 = require("./frame_0020.jpg"); -const img_21 = require("./frame_0021.jpg"); -const img_22 = require("./frame_0022.jpg"); -const img_23 = require("./frame_0023.jpg"); -const img_24 = require("./frame_0024.jpg"); -const img_25 = require("./frame_0025.jpg"); -const img_26 = require("./frame_0026.jpg"); -const img_27 = require("./frame_0027.jpg"); -const img_28 = require("./frame_0028.jpg"); -const img_29 = require("./frame_0029.jpg"); -const img_30 = require("./frame_0030.jpg"); -const img_31 = require("./frame_0031.jpg"); -const img_32 = require("./frame_0032.jpg"); -const img_33 = require("./frame_0033.jpg"); -const img_34 = require("./frame_0034.jpg"); -const img_35 = require("./frame_0035.jpg"); -const img_36 = require("./frame_0036.jpg"); -const img_37 = require("./frame_0037.jpg"); -const img_38 = require("./frame_0038.jpg"); -const img_39 = require("./frame_0039.jpg"); -const img_40 = require("./frame_0040.jpg"); -const img_41 = require("./frame_0041.jpg"); -const img_42 = require("./frame_0042.jpg"); -const img_43 = require("./frame_0043.jpg"); -const img_44 = require("./frame_0044.jpg"); -const img_45 = require("./frame_0045.jpg"); -const img_46 = require("./frame_0046.jpg"); -const img_47 = require("./frame_0047.jpg"); -const img_48 = require("./frame_0048.jpg"); -const img_49 = require("./frame_0049.jpg"); -const img_50 = require("./frame_0050.jpg"); -const img_51 = require("./frame_0051.jpg"); -const img_52 = require("./frame_0052.jpg"); -const img_53 = require("./frame_0053.jpg"); -const img_54 = require("./frame_0054.jpg"); -const img_55 = require("./frame_0055.jpg"); -const img_56 = require("./frame_0056.jpg"); -const img_57 = require("./frame_0057.jpg"); -const img_58 = require("./frame_0058.jpg"); -const img_59 = require("./frame_0059.jpg"); -const img_60 = require("./frame_0060.jpg"); -const img_61 = require("./frame_0061.jpg"); -const img_62 = require("./frame_0062.jpg"); -const img_63 = require("./frame_0063.jpg"); -const img_64 = require("./frame_0064.jpg"); -const img_65 = require("./frame_0065.jpg"); -const img_66 = require("./frame_0066.jpg"); -const img_67 = require("./frame_0067.jpg"); -const img_68 = require("./frame_0068.jpg"); - -export function getImages() { - return [ - img_1, - img_2, - img_3, - img_4, - img_5, - img_6, - img_7, - img_8, - img_9, - img_10, - img_11, - img_12, - img_13, - img_14, - img_15, - img_16, - img_17, - img_18, - img_19, - img_20, - img_21, - img_22, - img_23, - img_24, - img_25, - img_26, - img_27, - img_28, - img_29, - img_30, - img_31, - img_32, - img_33, - img_34, - img_35, - img_36, - img_37, - img_38, - img_39, - img_40, - img_41, - img_42, - img_43, - img_44, - img_45, - img_46, - img_47, - img_48, - img_49, - img_50, - img_51, - img_52, - img_53, - img_54, - img_55, - img_56, - img_57, - img_58, - img_59, - img_60, - img_61, - img_62, - img_63, - img_64, - img_65, - img_66, - img_67, - img_68, - ]; -} diff --git a/example/app/app/demos/custom-animations/quick-swipe/index.tsx b/example/app/app/demos/custom-animations/quick-swipe/index.tsx index dcd91507..e078513f 100644 --- a/example/app/app/demos/custom-animations/quick-swipe/index.tsx +++ b/example/app/app/demos/custom-animations/quick-swipe/index.tsx @@ -6,6 +6,7 @@ import { SafeAreaView } from "react-native-safe-area-context"; import { SBItem } from "@/components/SBItem"; import { IS_WEB } from "@/constants/platform"; import { window } from "@/constants/sizes"; +import { getImages } from "@/features/custom-animations/quick-swipe/images"; import { CaptureWrapper } from "@/store/CaptureProvider"; import * as Haptics from "expo-haptics"; import { Image, ImageSourcePropType, ViewStyle } from "react-native"; @@ -20,7 +21,7 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; -import { getImages } from "./images"; +import type { SharedValue } from "react-native-reanimated"; const data = getImages().slice(0, 68); @@ -186,8 +187,8 @@ const ThumbnailPaginationItem: React.FC<{ source: ImageSourcePropType; containerWidth: number; totalItems: number; - activeIndex: Animated.SharedValue; - swipeProgress: Animated.SharedValue; + activeIndex: SharedValue; + swipeProgress: SharedValue; activeWidth: number; totalWidth: number; inactiveWidth: number; diff --git a/example/app/app/demos/custom-animations/stack-cards/index.tsx b/example/app/app/demos/custom-animations/stack-cards/index.tsx index fe612be4..5434a713 100644 --- a/example/app/app/demos/custom-animations/stack-cards/index.tsx +++ b/example/app/app/demos/custom-animations/stack-cards/index.tsx @@ -8,9 +8,10 @@ import Animated, { useAnimatedStyle, useSharedValue, } from "react-native-reanimated"; +import type { SharedValue } from "react-native-reanimated"; import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel"; -import { Arrow, ArrowDirection } from "./Arrow"; +import { Arrow, ArrowDirection } from "@/components/StackCardsArrow"; import { window } from "@/constants/sizes"; @@ -86,8 +87,8 @@ function Index() { const Item: React.FC<{ index: number; - animationValue: Animated.SharedValue; - directionAnim: Animated.SharedValue; + animationValue: SharedValue; + directionAnim: SharedValue; }> = ({ animationValue, directionAnim }) => { const maskStyle = useAnimatedStyle(() => { const zIndex = interpolate(animationValue.value, [-1, 0, 1], [300, 0, -300]); diff --git a/example/app/app/index.tsx b/example/app/app/index.tsx index 93074e1d..19f7cbe8 100644 --- a/example/app/app/index.tsx +++ b/example/app/app/index.tsx @@ -4,8 +4,8 @@ import { ScrollView, TouchableOpacity } from "react-native-gesture-handler"; import { useRouter } from "expo-router"; import { useColor } from "@/hooks/useColor"; +import { routes } from "@/utils/routes"; import { Stack, Text } from "tamagui"; -import { routes } from "./routes"; import { IS_DEV } from "@/constants/env"; import { IS_WEB } from "@/constants/platform"; diff --git a/example/app/components/ActionItems.tsx b/example/app/components/ActionItems.tsx index 90b1702f..d2c7d1a3 100644 --- a/example/app/components/ActionItems.tsx +++ b/example/app/components/ActionItems.tsx @@ -1,6 +1,21 @@ -import { Check, Check as CheckIcon, ChevronDown, ChevronUp } from "@tamagui/lucide-icons"; +import { + Check, + Check as CheckIconRaw, + ChevronDown as ChevronDownRaw, + ChevronUp as ChevronUpRaw, +} from "@tamagui/lucide-icons"; import * as React from "react"; import { Adapt, Button, Checkbox, Label, Select, Sheet, Switch, XStack, YStack } from "tamagui"; + +type IconProps = { + size?: number; + color?: string; +}; + +const ChevronDownIcon = ChevronDownRaw as React.ComponentType; +const ChevronUpIcon = ChevronUpRaw as React.ComponentType; +const CheckIcon = CheckIconRaw as React.ComponentType; +const CheckIconMinimal = Check as React.ComponentType; import { LinearGradient } from "tamagui/linear-gradient"; interface SwitchActionItemProps { @@ -77,7 +92,7 @@ export const CustomSelectActionItem: React.FC = ({