From 36a372e1db1917b2f360af4c1a5915bec3308b6d Mon Sep 17 00:00:00 2001 From: Krzysztof Piaskowy Date: Tue, 16 Jul 2024 19:12:51 +0200 Subject: [PATCH] Add `ReduceMotionConfig` docs (#6165) ## Summary Documentation for component `ReduceMotionConfig` added in https://github.com/software-mansion/react-native-reanimated/pull/6164 ![image](https://github.com/software-mansion/react-native-reanimated/assets/36106620/16098702-202a-48b8-8589-fe739a6f5d53) https://github.com/software-mansion/react-native-reanimated/pull/6164 - needs to be merged before https://github.com/user-attachments/assets/bc6e467b-5ab3-4e77-94b6-7d792541643f --- .../docs/advanced/_category_.json | 2 +- .../docs/animations/_category_.json | 2 +- .../docs/components/ReducedMotionConfig.mdx | 70 ++++++++++++++++++ .../docs/components/_category_.json | 7 ++ .../docs-reanimated/docs/core/_category_.json | 2 +- .../docs/device/_category_.json | 2 +- .../docs/fundamentals/_category_.json | 2 +- .../docs/guides/_category_.json | 2 +- .../docs/layout-animations/_category_.json | 2 +- .../docs/scroll/_category_.json | 2 +- .../_category_.json | 2 +- .../docs/threading/_category_.json | 2 +- .../docs/utilities/_category_.json | 2 +- packages/docs-reanimated/package.json | 2 +- .../src/examples/ReducedMotionConfig.tsx | 72 +++++++++++++++++++ packages/docs-reanimated/yarn.lock | 8 +-- 16 files changed, 165 insertions(+), 16 deletions(-) create mode 100644 packages/docs-reanimated/docs/components/ReducedMotionConfig.mdx create mode 100644 packages/docs-reanimated/docs/components/_category_.json create mode 100644 packages/docs-reanimated/src/examples/ReducedMotionConfig.tsx diff --git a/packages/docs-reanimated/docs/advanced/_category_.json b/packages/docs-reanimated/docs/advanced/_category_.json index a0271c6ad23..d300730b9ce 100644 --- a/packages/docs-reanimated/docs/advanced/_category_.json +++ b/packages/docs-reanimated/docs/advanced/_category_.json @@ -1,6 +1,6 @@ { "label": "Advanced APIs", - "position": 9, + "position": 110, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/animations/_category_.json b/packages/docs-reanimated/docs/animations/_category_.json index 361e853cd60..0ad407f671b 100644 --- a/packages/docs-reanimated/docs/animations/_category_.json +++ b/packages/docs-reanimated/docs/animations/_category_.json @@ -1,6 +1,6 @@ { "label": "Animations", - "position": 2, + "position": 20, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/components/ReducedMotionConfig.mdx b/packages/docs-reanimated/docs/components/ReducedMotionConfig.mdx new file mode 100644 index 00000000000..4878631e456 --- /dev/null +++ b/packages/docs-reanimated/docs/components/ReducedMotionConfig.mdx @@ -0,0 +1,70 @@ +--- +id: ReducedMotionConfig +title: ReducedMotionConfig +sidebar_label: ReducedMotionConfig +sidebar_position: 1 +--- + +`ReducedMotionConfig` component let's you change behavior in response to the device's reduced motion accessibility setting. By default it disables all animation when the reduced motion is enabled on a device. You can adjust it for your specific use case. You can learn more about [Accessibility](/docs/guides/accessibility) and [`useReducedMotion`](/docs/device/useReducedMotion) in Reanimated. + +## Reference + +```javascript +import { ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated'; + +function App() { + return ( + // ... + // highlight-next-line + + // ... + ); +} +``` + +
+Type definitions + +```typescript +interface ReducedMotionConfigProps { + mode: ReduceMotion; +} + +enum ReduceMotion { + System = 'system', + Always = 'always', + Never = 'never', +} +``` + +
+ +### Arguments + +#### `mode` + +A parameter that determines how animations should behave in response to the device's reduce motion accessibility setting. + +- `ReduceMotion.System` - This value adjusts the animation behavior based on whether the reduced motion accessibility setting is activated on the device. When enabled, the animation is disabled; otherwise, it remains active. +- `ReduceMotion.Always` - With this setting, the animation is consistently disabled, regardless of the device's accessibility configuration. +- `ReduceMotion.Never` - This option ensures that the animation remains enabled at all times. + +## Example + +import ReducedMotionConfig from '@site/src/examples/ReducedMotionConfig'; +import ReducedMotionConfigSrc from '!!raw-loader!@site/src/examples/ReducedMotionConfig'; + + + +## Platform compatibility + +
+ +| Android | iOS | Web | +| ------- | --- | --- | +| ✅ | ✅ | ✅ | + +
diff --git a/packages/docs-reanimated/docs/components/_category_.json b/packages/docs-reanimated/docs/components/_category_.json new file mode 100644 index 00000000000..e45ff2d2d55 --- /dev/null +++ b/packages/docs-reanimated/docs/components/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Components", + "position": 60, + "link": { + "type": "generated-index" + } +} diff --git a/packages/docs-reanimated/docs/core/_category_.json b/packages/docs-reanimated/docs/core/_category_.json index 1b358f81e70..9a4f49d9d3a 100644 --- a/packages/docs-reanimated/docs/core/_category_.json +++ b/packages/docs-reanimated/docs/core/_category_.json @@ -1,6 +1,6 @@ { "label": "Core", - "position": 3, + "position": 30, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/device/_category_.json b/packages/docs-reanimated/docs/device/_category_.json index d846bc095f5..7bdd97aad9d 100644 --- a/packages/docs-reanimated/docs/device/_category_.json +++ b/packages/docs-reanimated/docs/device/_category_.json @@ -1,6 +1,6 @@ { "label": "Device", - "position": 5, + "position": 50, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/fundamentals/_category_.json b/packages/docs-reanimated/docs/fundamentals/_category_.json index ea8044f5314..61e8f6f9a1b 100644 --- a/packages/docs-reanimated/docs/fundamentals/_category_.json +++ b/packages/docs-reanimated/docs/fundamentals/_category_.json @@ -1,6 +1,6 @@ { "label": "Fundamentals", - "position": 1, + "position": 10, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/guides/_category_.json b/packages/docs-reanimated/docs/guides/_category_.json index c938f0436e0..43470939396 100644 --- a/packages/docs-reanimated/docs/guides/_category_.json +++ b/packages/docs-reanimated/docs/guides/_category_.json @@ -1,6 +1,6 @@ { "label": "Guides", - "position": 10, + "position": 120, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/layout-animations/_category_.json b/packages/docs-reanimated/docs/layout-animations/_category_.json index 0c4af38d2e9..270a086a380 100644 --- a/packages/docs-reanimated/docs/layout-animations/_category_.json +++ b/packages/docs-reanimated/docs/layout-animations/_category_.json @@ -1,6 +1,6 @@ { "label": "Layout Animations", - "position": 5, + "position": 70, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/scroll/_category_.json b/packages/docs-reanimated/docs/scroll/_category_.json index 6a34afba697..cbfe6ed8a19 100644 --- a/packages/docs-reanimated/docs/scroll/_category_.json +++ b/packages/docs-reanimated/docs/scroll/_category_.json @@ -1,6 +1,6 @@ { "label": "Scroll", - "position": 4, + "position": 40, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/shared-element-transitions/_category_.json b/packages/docs-reanimated/docs/shared-element-transitions/_category_.json index 6e3913f5502..f1278ad58e0 100644 --- a/packages/docs-reanimated/docs/shared-element-transitions/_category_.json +++ b/packages/docs-reanimated/docs/shared-element-transitions/_category_.json @@ -1,6 +1,6 @@ { "label": "Shared Element Transitions", - "position": 7, + "position": 80, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/threading/_category_.json b/packages/docs-reanimated/docs/threading/_category_.json index b8fa00079a6..c6e865ec311 100644 --- a/packages/docs-reanimated/docs/threading/_category_.json +++ b/packages/docs-reanimated/docs/threading/_category_.json @@ -1,6 +1,6 @@ { "label": "Threading", - "position": 7, + "position": 90, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/docs/utilities/_category_.json b/packages/docs-reanimated/docs/utilities/_category_.json index 422fc22c175..d48c003eb25 100644 --- a/packages/docs-reanimated/docs/utilities/_category_.json +++ b/packages/docs-reanimated/docs/utilities/_category_.json @@ -1,6 +1,6 @@ { "label": "Utilities", - "position": 8, + "position": 100, "link": { "type": "generated-index" } diff --git a/packages/docs-reanimated/package.json b/packages/docs-reanimated/package.json index d6609a4ad4e..e110c1e3406 100644 --- a/packages/docs-reanimated/package.json +++ b/packages/docs-reanimated/package.json @@ -43,7 +43,7 @@ "react-draggable": "^4.4.5", "react-native": "^0.71.4", "react-native-gesture-handler": "^2.16.2", - "react-native-reanimated": "^3.9.0-nightly-20240320-d6dab8f65", + "react-native-reanimated": "^3.15.0-nightly-20240715-16047317c", "react-native-svg": "^13.14.0", "react-native-web": "^0.18.12", "source-map": "^0.7.4", diff --git a/packages/docs-reanimated/src/examples/ReducedMotionConfig.tsx b/packages/docs-reanimated/src/examples/ReducedMotionConfig.tsx new file mode 100644 index 00000000000..18cbcac4fb2 --- /dev/null +++ b/packages/docs-reanimated/src/examples/ReducedMotionConfig.tsx @@ -0,0 +1,72 @@ +import { useColorScheme } from '@mui/material'; +import React, { useEffect, useState } from 'react'; +import { StyleSheet, Switch, View, Text } from 'react-native'; +import Animated, { + useAnimatedStyle, + useSharedValue, + withRepeat, + withTiming, + ReducedMotionConfig, + ReduceMotion, +} from 'react-native-reanimated'; + +export default function App() { + const { colorScheme } = useColorScheme(); + const [isReduceMotionDisabled, setIsReduceMotionDisabled] = useState(false); + const sv = useSharedValue(0); + const animatedStyle = useAnimatedStyle(() => ({ + transform: [{ rotate: `${sv.value}deg` }], + })); + + useEffect(() => { + sv.value = 0; + sv.value = withRepeat(withTiming(360, { duration: 2000 }), -1, true); + }, [colorScheme, isReduceMotionDisabled]); + + const textColor = + colorScheme === 'light' ? styles.darkText : styles.lightText; + + return ( + + + Disable reduced motion + + + + + + ); +} + +const styles = StyleSheet.create({ + box: { + height: 100, + width: 100, + backgroundColor: '#b58df1', + borderRadius: 20, + }, + container: { + flex: 1, + alignItems: 'center', + }, + row: { + flexDirection: 'row', + marginBottom: 20, + }, + text: { + marginRight: 10, + fontFamily: 'Aeonik', + fontSize: 16, + }, + lightText: { + color: 'var(--swm-off-white)', + }, + darkText: { + color: 'var(--swm-navy-light-100)', + }, +}); diff --git a/packages/docs-reanimated/yarn.lock b/packages/docs-reanimated/yarn.lock index 608eae52a08..15d3c23d13a 100644 --- a/packages/docs-reanimated/yarn.lock +++ b/packages/docs-reanimated/yarn.lock @@ -11625,10 +11625,10 @@ react-native-gradle-plugin@^0.71.16: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.16.tgz#822bb0c680e03b5df5aa65f2e5ffc2bc2930854a" integrity sha512-H2BjG2zk7B7Wii9sXvd9qhCVRQYDAHSWdMw9tscmZBqSP62DkIWEQSk4/B2GhQ4aK9ydVXgtqR6tBeg3yy8TSA== -react-native-reanimated@^3.9.0-nightly-20240320-d6dab8f65: - version "3.9.0-nightly-20240320-d6dab8f65" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.9.0-nightly-20240320-d6dab8f65.tgz#a716e2c7b35b35b312fa557aa279fbf98ba509ad" - integrity sha512-3fStNbt4Hja58uQL/ZAkIexxroQSh56+mXMke2yJKCYTCMctT2Z0GsuJWrXeH+1T+XBwUG1NTVBUzQRRFm2kSQ== +react-native-reanimated@^3.15.0-nightly-20240715-16047317c: + version "3.15.0-nightly-20240715-16047317c" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.15.0-nightly-20240715-16047317c.tgz#df977280dfe8720a2bb9ce73609b9908cd523b99" + integrity sha512-5mv76QF5X/dNwzxcRfL3q6opqwin/G4epEgMqQVrG0BY3PU9qx9fMpR43ZB6d2Ux4Kaca0/2q3llYZsOQzpPgA== dependencies: "@babel/plugin-transform-arrow-functions" "^7.0.0-0" "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0"