From ff3b32eec87c44d792786c30d3c1f281c8b9132a Mon Sep 17 00:00:00 2001 From: Caspian Zhao Date: Sat, 5 Oct 2024 13:38:30 +0800 Subject: [PATCH] doc: Add tips for reduce motion enabled. (#698) * doc: Add tips for reduce motion enabled. * doc: Add tips for reduce motion enabled. --- example/app/app/+html.tsx | 5 ++ example/app/app/_layout.tsx | 43 +++++++++++ .../demos/basic-layouts/left-align/demo.tsx | 5 +- .../app/demos/basic-layouts/normal/demo.tsx | 7 +- .../app/demos/basic-layouts/parallax/demo.tsx | 5 +- .../app/demos/basic-layouts/stack/demo.tsx | 5 +- .../advanced-parallax/demo.tsx | 5 +- .../custom-animations/anim-tab-bar/demo.tsx | 6 +- .../custom-animations/blur-parallax/demo.tsx | 5 +- .../custom-animations/blur-rotate/demo.tsx | 5 +- .../demos/custom-animations/circular/demo.tsx | 5 +- .../demos/custom-animations/cube-3d/demo.tsx | 1 + .../demos/custom-animations/curve/demo.tsx | 1 + .../app/demos/custom-animations/flow/demo.tsx | 5 +- .../app/demos/custom-animations/fold/demo.tsx | 5 +- .../demos/custom-animations/multiple/demo.tsx | 5 +- .../custom-animations/press-swipe/demo.tsx | 5 +- .../custom-animations/quick-swipe/demo.tsx | 6 +- .../rotate-fade-in-out/demo.tsx | 5 +- .../custom-animations/rotate-in-out/demo.tsx | 5 +- .../scale-fade-in-out/demo.tsx | 5 +- .../demos/custom-animations/tinder/demo.tsx | 5 +- .../app/app/demos/utils/pagination/demo.tsx | 6 +- example/app/types/global.d.ts | 9 +++ example/website/components/Demo.tsx | 72 ++++++++++++++++--- .../Examples/basic-layouts/left-align.mdx | 9 ++- .../pages/Examples/basic-layouts/normal.mdx | 11 +-- .../pages/Examples/basic-layouts/parallax.mdx | 9 ++- .../pages/Examples/basic-layouts/stack.mdx | 9 ++- .../custom-animations/advanced-parallax.mdx | 13 ++-- .../custom-animations/anim-tab-bar.mdx | 16 +++-- .../custom-animations/blur-parallax.mdx | 11 +-- .../custom-animations/blur-rotate.mdx | 11 +-- .../Examples/custom-animations/circular.mdx | 17 +++-- .../Examples/custom-animations/cube-3d.mdx | 19 ++--- .../Examples/custom-animations/curve.mdx | 13 ++-- .../pages/Examples/custom-animations/flow.mdx | 15 ++-- .../pages/Examples/custom-animations/fold.mdx | 15 ++-- .../Examples/custom-animations/multiple.mdx | 9 ++- .../custom-animations/press-swipe.mdx | 11 +-- .../custom-animations/quick-swipe.mdx | 24 ++++--- .../custom-animations/rotate-fade-in-out.mdx | 11 +-- .../custom-animations/rotate-in-out.mdx | 11 +-- .../custom-animations/scale-fade-in-out.mdx | 9 ++- .../Examples/custom-animations/tinder.mdx | 15 ++-- .../pages/Examples/utils/pagination.mdx | 14 ++-- .../website/scripts/gen-pages-template.mjs | 4 +- 47 files changed, 370 insertions(+), 137 deletions(-) create mode 100644 example/app/types/global.d.ts diff --git a/example/app/app/+html.tsx b/example/app/app/+html.tsx index cb8750cf..b7e3ad34 100644 --- a/example/app/app/+html.tsx +++ b/example/app/app/+html.tsx @@ -42,11 +42,16 @@ export default function Root({ children }: { children: React.ReactNode }) { } const carouselComponent = document.getElementById("carousel-component"); + if (carouselComponent) { + const kind = carouselComponent.getAttribute("data-kind"); + const name = carouselComponent.getAttribute("data-name"); window.parent.postMessage( { type: "carouselHeight", height: carouselComponent.offsetHeight, + kind, + name, }, "*", ); diff --git a/example/app/app/_layout.tsx b/example/app/app/_layout.tsx index 4ca1a769..fadf3ea3 100644 --- a/example/app/app/_layout.tsx +++ b/example/app/app/_layout.tsx @@ -17,6 +17,8 @@ import { routes } from "./routes"; import { useInDoc } from "@/hooks/useInDoc"; import { IS_WEB } from "@/constants/platform"; import { MAX_WIDTH } from "@/constants/sizes"; +import { Link } from "expo-router"; +import { useReducedMotion } from "react-native-reanimated"; export { // Catch any errors thrown by the Layout component. @@ -61,6 +63,23 @@ function RootLayoutNav() { ? tamaguiConfig.themes.dark.background.val : tamaguiConfig.themes.light.background.val; + const reduceMotion = useReducedMotion(); + + // post message to parent doc + useEffect(() => { + if (!inDoc) { + return; + } + + window.parent.postMessage( + { + type: "reduceMotion", + reduceMotion, + }, + "*", + ); + }, [reduceMotion]); + return ( + {IS_WEB && !inDoc && reduceMotion && ( + + + It looks like reduced motion is turned on in your system + preferences. Some of the animations may be skipped.{" "} + + Learn more + + + + )} + (0); return ( - + console.log("current index:", index)} - renderItem={renderItem()} + renderItem={renderItem({ rounded: true })} /> ); diff --git a/example/app/app/demos/basic-layouts/parallax/demo.tsx b/example/app/app/demos/basic-layouts/parallax/demo.tsx index 2d9f97e6..4136ffe2 100644 --- a/example/app/app/demos/basic-layouts/parallax/demo.tsx +++ b/example/app/app/demos/basic-layouts/parallax/demo.tsx @@ -17,7 +17,10 @@ function Index() { const progress = useSharedValue(0); return ( - + (null); return ( - + + + + + + {Array.from({ length: count * 3, diff --git a/example/app/app/demos/custom-animations/curve/demo.tsx b/example/app/app/demos/custom-animations/curve/demo.tsx index f2941c77..3b8b255d 100644 --- a/example/app/app/demos/custom-animations/curve/demo.tsx +++ b/example/app/app/demos/custom-animations/curve/demo.tsx @@ -30,6 +30,7 @@ function Index() { alignItems: "center", }} id="carousel-component" + dataSet={{ kind: "custom-animations", name: "curve" }} > + + + + + + + + + + = ({ pagePath }) => { +const IS_DEV = process.env.NODE_ENV === "development"; + +const ResizableIframe: React.FC = ({ kind, name }) => { const [carouselHeight, setCarouselHeight] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [reduceMotion, setReduceMotion] = useState(false); + const pagePath = `/demos/${kind}/${name}`; const handleIframeLoad = () => { - // get carousel-component height by postmessage window.addEventListener("message", (event) => { - if (event.data.type === "carouselHeight") { - setCarouselHeight(event.data.height); - setIsLoading(false); - } + if ( + event.data.type !== "carouselHeight" || + event.data.kind !== kind || + event.data.name !== name + ) + return; + + setCarouselHeight(event.data.height); + setIsLoading(false); }); }; + useEffect(() => { + window.addEventListener("message", (event) => { + if (event.data.type === "reduceMotion") + setReduceMotion(event.data.reduceMotion); + }); + }, []); + return (
- {isLoading &&
Loading...
} + {isLoading && ( +
+ Loading... +
+ {IS_DEV && ( +

+ (Please make sure you have started the example app with + 'yarn web' and running on 8002 port) +

+ )} +
+ )}
+ {reduceMotion && ( + + It looks like reduced motion is turned on in your system preferences. + Some of the animations may be skipped.{" "} + + Learn more + + + )}
); }; diff --git a/example/website/pages/Examples/basic-layouts/left-align.mdx b/example/website/pages/Examples/basic-layouts/left-align.mdx index 3f828fc9..7c51eb7b 100644 --- a/example/website/pages/Examples/basic-layouts/left-align.mdx +++ b/example/website/pages/Examples/basic-layouts/left-align.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `left-align` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/left-align/index.tsx) - + ```tsx copy import * as React from "react"; @@ -61,7 +61,10 @@ const defaultDataWith6Colors = [ function Index() { return ( - + Check out the `normal` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/normal/index.tsx) - + ```tsx copy import * as React from "react"; @@ -64,7 +64,10 @@ function Index() { const scrollOffsetValue = useSharedValue(0); return ( - + console.log("current index:", index)} - renderItem={renderItem()} + renderItem={renderItem({ rounded: true })} /> ); diff --git a/example/website/pages/Examples/basic-layouts/parallax.mdx b/example/website/pages/Examples/basic-layouts/parallax.mdx index d73df7a5..7f081e27 100644 --- a/example/website/pages/Examples/basic-layouts/parallax.mdx +++ b/example/website/pages/Examples/basic-layouts/parallax.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `parallax` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/parallax/index.tsx) - + ```tsx copy import * as React from "react"; @@ -64,7 +64,10 @@ function Index() { const progress = useSharedValue(0); return ( - + Check out the `stack` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/stack/index.tsx) - + ```tsx copy import * as React from "react"; @@ -64,7 +64,10 @@ function Index() { const ref = React.useRef(null); return ( - + Check out the `advanced-parallax` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/advanced-parallax/index.tsx) - + ```tsx copy import * as React from "react"; @@ -69,7 +69,7 @@ const CustomItem: React.FC = ({ index, animationValue }) => { const backgroundColor = interpolateColor( animationValue.value, [-1, 0, 1], - ["#000000dd", "transparent", "#000000dd"] + ["#000000dd", "transparent", "#000000dd"], ); return { @@ -109,7 +109,7 @@ function Index() { const translateX = interpolate( value, [-2, 0, 1], - [-PAGE_WIDTH, 0, PAGE_WIDTH] + [-PAGE_WIDTH, 0, PAGE_WIDTH], ); return { @@ -119,7 +119,10 @@ function Index() { }, []); return ( - + Check out the `anim-tab-bar` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/anim-tab-bar/index.tsx) - + ```tsx copy import * as React from "react"; @@ -72,7 +72,11 @@ function Index() { }); return ( - + = (props) => { animationValue.value, [-1, 0, 1], [0.5, 1, 0.5], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); return { @@ -138,13 +142,13 @@ const Item: React.FC = (props) => { animationValue.value, [-1, 0, 1], [1, 1.25, 1], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); const color = interpolateColor( animationValue.value, [-1, 0, 1], - ["#ffffff", "#002a57", "#ffffff"] + ["#ffffff", "#002a57", "#ffffff"], ); return { diff --git a/example/website/pages/Examples/custom-animations/blur-parallax.mdx b/example/website/pages/Examples/custom-animations/blur-parallax.mdx index dc54cb3b..160e6a8e 100644 --- a/example/website/pages/Examples/custom-animations/blur-parallax.mdx +++ b/example/website/pages/Examples/custom-animations/blur-parallax.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `blur-parallax` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/blur-parallax/index.tsx) - + ```tsx copy import * as React from "react"; @@ -70,7 +70,10 @@ const PAGE_WIDTH = window.width / 2; function Index() { return ( - + diff --git a/example/website/pages/Examples/custom-animations/blur-rotate.mdx b/example/website/pages/Examples/custom-animations/blur-rotate.mdx index 95eaf011..ab405555 100644 --- a/example/website/pages/Examples/custom-animations/blur-rotate.mdx +++ b/example/website/pages/Examples/custom-animations/blur-rotate.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `blur-rotate` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/blur-rotate/index.tsx) - + ```tsx copy import * as React from "react"; @@ -74,7 +74,10 @@ function Index() { const ITEM_WIDTH = PAGE_WIDTH * 0.8; return ( - + = ({ index, animationValue }) => { const opacity = interpolate( animationValue.value, [-0.5, 0, 1, 1.5], - [1, 0, 0, 1] + [1, 0, 0, 1], ); return { diff --git a/example/website/pages/Examples/custom-animations/circular.mdx b/example/website/pages/Examples/custom-animations/circular.mdx index df3bf08a..2d99e46b 100644 --- a/example/website/pages/Examples/custom-animations/circular.mdx +++ b/example/website/pages/Examples/custom-animations/circular.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `circular` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/circular/index.tsx) - + ```tsx copy import * as React from "react"; @@ -68,7 +68,7 @@ function Index() { const itemGap = interpolate( value, [-3, -2, -1, 0, 1, 2, 3], - [-30, -15, 0, 0, 0, 15, 30] + [-30, -15, 0, 0, 0, 15, 30], ); const translateX = @@ -79,13 +79,13 @@ function Index() { const translateY = interpolate( value, [-1, -0.5, 0, 0.5, 1], - [60, 45, 40, 45, 60] + [60, 45, 40, 45, 60], ); const scale = interpolate( value, [-1, -0.5, 0, 0.5, 1], - [0.8, 0.85, 1.1, 0.85, 0.8] + [0.8, 0.85, 1.1, 0.85, 0.8], ); return { @@ -100,11 +100,14 @@ function Index() { ], }; }, - [centerOffset] + [centerOffset], ); return ( - + Check out the `cube-3d` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/cube-3d/index.tsx) - + ```tsx copy import * as React from "react"; @@ -68,6 +68,7 @@ function Index() { {Array.from({ length: count * 3, @@ -94,28 +95,28 @@ function CubeItem() { value, [-1, 0, 1], [-PAGE_WIDTH, 0, PAGE_WIDTH], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); const scale = interpolate( value, [-1, 0, 1], [0.49, 1, 0.49], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); const perspective = interpolate( value, [-1, 0, 1], [PAGE_WIDTH * 0.89, PAGE_WIDTH * 1.5, PAGE_WIDTH * 0.89], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); const rotateY = `${interpolate( value, [-1, 0, 1], [-90, 0, 90], - Extrapolation.CLAMP + Extrapolation.CLAMP, )}deg`; const transform = { @@ -126,12 +127,12 @@ function CubeItem() { ...withAnchorPoint( transform, { x: 0.5, y: 0.5 }, - { width: PAGE_WIDTH, height: PAGE_HEIGHT } + { width: PAGE_WIDTH, height: PAGE_HEIGHT }, ), zIndex, }; }, - [PAGE_HEIGHT, PAGE_WIDTH] + [PAGE_HEIGHT, PAGE_WIDTH], ); return ( @@ -175,7 +176,7 @@ const CustomItem: React.FC = ({ index, animationValue }) => { const backgroundColor = interpolateColor( animationValue.value, [-1, 0, 1], - ["#000000dd", "transparent", "#000000dd"] + ["#000000dd", "transparent", "#000000dd"], ); return { diff --git a/example/website/pages/Examples/custom-animations/curve.mdx b/example/website/pages/Examples/custom-animations/curve.mdx index 57d56c9f..071469e2 100644 --- a/example/website/pages/Examples/custom-animations/curve.mdx +++ b/example/website/pages/Examples/custom-animations/curve.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `curve` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/curve/index.tsx) - + ```tsx copy import * as React from "react"; @@ -77,6 +77,7 @@ function Index() { alignItems: "center", }} id="carousel-component" + dataSet={{ kind: "custom-animations", name: "curve" }} > Check out the `flow` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/flow/index.tsx) - + ```tsx copy import * as React from "react"; @@ -74,23 +74,26 @@ function Index() { const translateY = interpolate( value, [-1, 0, 1], - [-ITEM_HEIGHT, 0, ITEM_HEIGHT] + [-ITEM_HEIGHT, 0, ITEM_HEIGHT], ); const right = interpolate( value, [-1, -0.2, 1], - [RIGHT_OFFSET / 2, RIGHT_OFFSET, RIGHT_OFFSET / 3] + [RIGHT_OFFSET / 2, RIGHT_OFFSET, RIGHT_OFFSET / 3], ); return { transform: [{ translateY }], right, }; }, - [RIGHT_OFFSET] + [RIGHT_OFFSET], ); return ( - + Check out the `fold` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/fold/index.tsx) - + ```tsx copy import * as React from "react"; @@ -86,7 +86,7 @@ function Index() { return (itemSize - sideItemWidth) * (Math.abs(item) - 1); } return 0; - }) as number[] + }) as number[], ); const translate = @@ -98,7 +98,7 @@ function Index() { value, [-1, 0, 1], [sideItemWidth, itemSize, sideItemWidth], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); return { @@ -111,11 +111,14 @@ function Index() { overflow: "hidden", }; }, - [centerOffset, itemSize, sideItemWidth, sideItemCount] + [centerOffset, itemSize, sideItemWidth, sideItemCount], ); return ( - + Check out the `multiple` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/multiple/index.tsx) - + ```tsx copy import * as React from "react"; @@ -59,7 +59,10 @@ const COUNT = 6; function Index() { return ( - + Check out the `press-swipe` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/press-swipe/index.tsx) - + ```tsx copy import * as React from "react"; @@ -70,7 +70,7 @@ function Index() { const translateX = interpolate( value, [-1, 0, 1], - [-PAGE_WIDTH, 0, PAGE_WIDTH] + [-PAGE_WIDTH, 0, PAGE_WIDTH], ); return { @@ -80,7 +80,10 @@ function Index() { }, []); return ( - + Check out the `quick-swipe` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/quick-swipe/index.tsx) - + ```tsx copy import * as React from "react"; @@ -87,7 +87,11 @@ function Index() { } as const; return ( - + { swipeProgress.value = Math.min(Math.max(event.x, 0), containerWidth); }), - [activeWidth, inactiveWidth, containerWidth] + [activeWidth, inactiveWidth, containerWidth], ); const animStyles = useAnimatedStyle(() => { @@ -180,7 +184,7 @@ const ThumbnailPagination: React.FC<{ swipeProgress.value, [0, containerWidth], [0, totalWidth - containerWidth], - Extrapolation.CLAMP + Extrapolation.CLAMP, ), }, ], @@ -190,7 +194,7 @@ const ThumbnailPagination: React.FC<{ useAnimatedReaction( () => activeIndex.value, (activeIndex) => onIndexChange && runOnJS(onIndexChange)(activeIndex), - [onIndexChange] + [onIndexChange], ); return ( @@ -275,7 +279,7 @@ const ThumbnailPaginationItem: React.FC<{ (swipeProgress.value / containerWidth) * totalWidth, inputRange, [0, 1, 1, 0], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); }, (_isActiveAnimVal) => { @@ -289,7 +293,7 @@ const ThumbnailPaginationItem: React.FC<{ activeWidth, inactiveWidth, itemGap, - ] + ], ); useAnimatedReaction( @@ -301,7 +305,7 @@ const ThumbnailPaginationItem: React.FC<{ activeIndex.value = index; } }, - [] + [], ); const animStyles = useAnimatedStyle(() => { @@ -309,7 +313,7 @@ const ThumbnailPaginationItem: React.FC<{ isActive.value, [0, 1, 1, 0], [inactiveWidth, activeWidth, activeWidth, inactiveWidth], - Extrapolation.CLAMP + Extrapolation.CLAMP, ); return { diff --git a/example/website/pages/Examples/custom-animations/rotate-fade-in-out.mdx b/example/website/pages/Examples/custom-animations/rotate-fade-in-out.mdx index 3ff588e7..7e8b1340 100644 --- a/example/website/pages/Examples/custom-animations/rotate-fade-in-out.mdx +++ b/example/website/pages/Examples/custom-animations/rotate-fade-in-out.mdx @@ -36,13 +36,13 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually import { Tabs } from 'nextra/components' import { Callout } from 'nextra/components' -import Demo from '../../../components/Demo' +import Demo from '@/components/Demo' Check out the `rotate-fade-in-out` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/rotate-fade-in-out/index.tsx) - + ```tsx copy import * as React from "react"; @@ -67,7 +67,7 @@ function Index() { const translateX = interpolate( value, [-1, 0, 1], - [-PAGE_WIDTH, 0, PAGE_WIDTH] + [-PAGE_WIDTH, 0, PAGE_WIDTH], ); const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]); @@ -79,7 +79,10 @@ function Index() { }, []); return ( - + Check out the `rotate-in-out` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/rotate-in-out/index.tsx) - + ```tsx copy import * as React from "react"; @@ -72,7 +72,7 @@ function Index() { const translateX = interpolate( value, [-1, 0, 1], - [-window.width, 0, window.width] + [-window.width, 0, window.width], ); return { @@ -82,7 +82,10 @@ function Index() { }, []); return ( - + Check out the `scale-fade-in-out` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/scale-fade-in-out/index.tsx) - + ```tsx copy import * as React from "react"; @@ -71,7 +71,10 @@ function Index() { }, []); return ( - + Check out the `tinder` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/tinder/index.tsx) - + ```tsx copy import * as React from "react"; @@ -85,7 +85,7 @@ function Index() { value, [0, 1, 2, 3, 4], [0, 1, 2, 3, 4].map((v) => (data.length - v) * 10), - Extrapolation.CLAMP + Extrapolation.CLAMP, ); const scale = interpolate(value, [0, 1], [1, 0.95]); @@ -94,7 +94,7 @@ function Index() { value, [-1, -0.8, 0, 1], [0, 0.9, 1, 0.85], - Extrapolation.EXTEND + Extrapolation.EXTEND, ); return { @@ -108,11 +108,14 @@ function Index() { opacity, }; }, - [PAGE_HEIGHT, PAGE_WIDTH] + [PAGE_HEIGHT, PAGE_WIDTH], ); return ( - + Check out the `pagination` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/utils/pagination/index.tsx) - + ```tsx copy import * as React from "react"; @@ -92,7 +92,11 @@ function Index() { }; return ( - + Check out the \`${page}\` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/${kind}/${page}/index.tsx) - + \`\`\`tsx copy ${content}