doc: Add tips for reduce motion enabled. (#698)

* doc: Add tips for reduce motion enabled. * doc: Add tips for reduce motion enabled.
dohooo · Oct 5, 2024 · ff3b32e · ff3b32e
1 parent 3d156a9
commit ff3b32e
Show file tree

Hide file tree

Showing 47 changed files with 370 additions and 137 deletions.
diff --git 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
@@ -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 (
     <TamaguiProvider
       config={tamaguiConfig}
@@ -73,6 +92,30 @@ function RootLayoutNav() {
           backgroundColor={backgroundColor}
         >
           <YStack minWidth={IS_WEB ? MAX_WIDTH : "100%"} height={"100%"}>
+            {IS_WEB && !inDoc && reduceMotion && (
+              <XStack paddingHorizontal={"$2"} width={MAX_WIDTH}>
+                <Text
+                  style={{
+                    color: "red",
+                    textAlign: "center",
+                    opacity: 0.75,
+                    fontSize: 12,
+                  }}
+                >
+                  It looks like reduced motion is turned on in your system
+                  preferences. Some of the animations may be skipped.{" "}
+                  <Link
+                    target="_blank"
+                    style={{ textDecorationLine: "underline" }}
+                    href={
+                      "https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility/#reduced-motion-in-animations"
+                    }
+                  >
+                    Learn more
+                  </Link>
+                </Text>
+              </XStack>
+            )}
             <Stack
               initialRouteName="/"
               screenOptions={{

diff --git a/example/app/app/demos/basic-layouts/left-align/demo.tsx b/example/app/app/demos/basic-layouts/left-align/demo.tsx
@@ -14,7 +14,10 @@ const defaultDataWith6Colors = [
 
 function Index() {
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "basic-layouts", name: "left-align" }}
+    >
       <Carousel
         loop={true}
         width={430}

diff --git a/example/app/app/demos/basic-layouts/normal/demo.tsx b/example/app/app/demos/basic-layouts/normal/demo.tsx
@@ -17,7 +17,10 @@ function Index() {
   const scrollOffsetValue = useSharedValue<number>(0);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "basic-layouts", name: "normal" }}
+    >
       <Carousel
         testID={"xxx"}
         loop={true}
@@ -40,7 +43,7 @@ function Index() {
           g.enabled(false);
         }}
         onSnapToItem={(index: number) => console.log("current index:", index)}
-        renderItem={renderItem()}
+        renderItem={renderItem({ rounded: true })}
       />
     </View>
   );

diff --git 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<number>(0);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "basic-layouts", name: "parallax" }}
+    >
       <Carousel
         autoPlayInterval={2000}
         data={defaultDataWith6Colors}

diff --git a/example/app/app/demos/basic-layouts/stack/demo.tsx b/example/app/app/demos/basic-layouts/stack/demo.tsx
@@ -17,7 +17,10 @@ function Index() {
   const ref = React.useRef<ICarouselInstance>(null);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "basic-layouts", name: "stack" }}
+    >
       <Carousel
         ref={ref}
         autoPlayInterval={2000}

diff --git a/example/app/app/demos/custom-animations/advanced-parallax/demo.tsx b/example/app/app/demos/custom-animations/advanced-parallax/demo.tsx
@@ -72,7 +72,10 @@ function Index() {
   }, []);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "advanced-parallax" }}
+    >
       <CaptureWrapper>
         <Carousel
           loop={true}

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
@@ -25,7 +25,11 @@ function Index() {
   });
 
   return (
-    <View style={{ paddingVertical: 100 }} id="carousel-component">
+    <View
+      style={{ paddingVertical: 100 }}
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "anim-tab-bar" }}
+    >
       <Carousel
         ref={r}
         loop

diff --git a/example/app/app/demos/custom-animations/blur-parallax/demo.tsx b/example/app/app/demos/custom-animations/blur-parallax/demo.tsx
@@ -23,7 +23,10 @@ const PAGE_WIDTH = window.width / 2;
 
 function Index() {
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "blur-parallax" }}
+    >
       <Carousel
         loop={true}
         style={{

diff --git a/example/app/app/demos/custom-animations/blur-rotate/demo.tsx b/example/app/app/demos/custom-animations/blur-rotate/demo.tsx
@@ -27,7 +27,10 @@ function Index() {
   const ITEM_WIDTH = PAGE_WIDTH * 0.8;
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "blur-rotate" }}
+    >
       <Carousel
         vertical
         loop={false}

diff --git a/example/app/app/demos/custom-animations/circular/demo.tsx b/example/app/app/demos/custom-animations/circular/demo.tsx
@@ -57,7 +57,10 @@ function Index() {
   );
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "circular" }}
+    >
       <Carousel
         width={itemSize}
         height={itemSize}

diff --git a/example/app/app/demos/custom-animations/cube-3d/demo.tsx b/example/app/app/demos/custom-animations/cube-3d/demo.tsx
@@ -21,6 +21,7 @@ function Index() {
     <View
       style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}
       id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "cube-3d" }}
     >
       {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
@@ -30,6 +30,7 @@ function Index() {
         alignItems: "center",
       }}
       id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "curve" }}
     >
       <Carousel
         {...baseOptions}

diff --git a/example/app/app/demos/custom-animations/flow/demo.tsx b/example/app/app/demos/custom-animations/flow/demo.tsx
@@ -43,7 +43,10 @@ function Index() {
   );
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "flow" }}
+    >
       <Carousel
         loop
         vertical

diff --git a/example/app/app/demos/custom-animations/fold/demo.tsx b/example/app/app/demos/custom-animations/fold/demo.tsx
@@ -68,7 +68,10 @@ function Index() {
   );
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "fold" }}
+    >
       <Carousel
         width={itemSize}
         height={PAGE_WIDTH / 2}

diff --git a/example/app/app/demos/custom-animations/multiple/demo.tsx b/example/app/app/demos/custom-animations/multiple/demo.tsx
@@ -12,7 +12,10 @@ const COUNT = 6;
 
 function Index() {
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "multiple" }}
+    >
       <Carousel
         loop
         autoPlay

diff --git a/example/app/app/demos/custom-animations/press-swipe/demo.tsx b/example/app/app/demos/custom-animations/press-swipe/demo.tsx
@@ -33,7 +33,10 @@ function Index() {
   }, []);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "press-swipe" }}
+    >
       <Carousel
         loop={true}
         style={{ width: PAGE_WIDTH, height: 240 }}

diff --git a/example/app/app/demos/custom-animations/quick-swipe/demo.tsx b/example/app/app/demos/custom-animations/quick-swipe/demo.tsx
@@ -40,7 +40,11 @@ function Index() {
   } as const;
 
   return (
-    <View id="carousel-component" style={{ paddingVertical: 20 }}>
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "quick-swipe" }}
+      style={{ paddingVertical: 20 }}
+    >
       <Carousel
         {...baseOptions}
         loop={false}

diff --git a/example/app/app/demos/custom-animations/rotate-fade-in-out/demo.tsx b/example/app/app/demos/custom-animations/rotate-fade-in-out/demo.tsx
@@ -32,7 +32,10 @@ function Index() {
   }, []);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "rotate-fade-in-out" }}
+    >
       <Carousel
         loop
         style={{

diff --git a/example/app/app/demos/custom-animations/rotate-in-out/demo.tsx b/example/app/app/demos/custom-animations/rotate-in-out/demo.tsx
@@ -35,7 +35,10 @@ function Index() {
   }, []);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "rotate-in-out" }}
+    >
       <Carousel
         loop
         style={{

diff --git a/example/app/app/demos/custom-animations/scale-fade-in-out/demo.tsx b/example/app/app/demos/custom-animations/scale-fade-in-out/demo.tsx
@@ -24,7 +24,10 @@ function Index() {
   }, []);
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "scale-fade-in-out" }}
+    >
       <Carousel
         loop
         style={{

diff --git a/example/app/app/demos/custom-animations/tinder/demo.tsx b/example/app/app/demos/custom-animations/tinder/demo.tsx
@@ -65,7 +65,10 @@ function Index() {
   );
 
   return (
-    <View id="carousel-component">
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "custom-animations", name: "tinder" }}
+    >
       <Carousel
         loop={false}
         style={{

diff --git a/example/app/app/demos/utils/pagination/demo.tsx b/example/app/app/demos/utils/pagination/demo.tsx
@@ -45,7 +45,11 @@ function Index() {
   };
 
   return (
-    <View id="carousel-component" style={{ gap: 10 }}>
+    <View
+      id="carousel-component"
+      dataSet={{ kind: "utils", name: "pagination" }}
+      style={{ gap: 10 }}
+    >
       <View style={{ marginBottom: 10 }}>
         <Carousel
           ref={ref}

diff --git a/example/app/types/global.d.ts b/example/app/types/global.d.ts
@@ -0,0 +1,9 @@
+import "react-native";
+
+declare module "react-native" {
+  interface ViewProps {
+    dataSet?: {
+      [key: string]: string;
+    };
+  }
+}