software-mansion · piaskowyk · Jul 16, 2024 · Jun 24, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git 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
@@ -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
@@ -0,0 +1,66 @@
+---
+id: ReducedMotionConfig
+title: ReducedMotionConfig
+sidebar_label: ReducedMotionConfig
+sidebar_position: 1
+---
+
+The `ReducedMotionConfig` component determines the default animation behavior in response to the device's reduced motion accessibility setting. It affects your application globally. The default behavior disables all animation if reduced motion is enabled on a device. You can utilize this component to override that behavior. If you wish to fine-tune it for your specific case, learn more about [Accessibility](../guides/accessibility) and [`useReducedMotion`](../device/useReducedMotion) in Reanimated.
+
+## Reference
+
+```javascript
+import { ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
+
+function App() {
+  return (
+    // ...
+    // highlight-next-line
+    <ReducedMotionConfig mode={ReduceMotion.Never} />
+    // ...
+  );
+}
+```
+
+<details>
+<summary>Type definitions</summary>
+
+```typescript
+interface ReducedMotionConfigProps {
+  mode: ReduceMotion;
+}
+
+enum ReduceMotion {
+  System = 'system',
+  Always = 'always',
+  Never = 'never',
+}
+```
+
+</details>
+
+### Arguments
+
+#### `mode`
+
+A parameter that determines what should be the default animation responds to the device's reduced motion accessibility setting.
+
+## Example
+
+import ReducedMotionConfig from '@site/src/examples/ReducedMotionConfig';
+import ReducedMotionConfigSrc from '!!raw-loader!@site/src/examples/ReducedMotionConfig';
+
+<InteractiveExample
+  src={ReducedMotionConfigSrc}
+  component={ReducedMotionConfig}
+/>
+
+## Platform compatibility
+
+<div className="platform-compatibility">
+
+| Android | iOS | Web |
+| ------- | --- | --- |
+| ✅      | ✅  | ✅  |
+
+</div>
diff --git a/packages/docs-reanimated/docs/components/_category_.json 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,73 @@
+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<number>(0);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${sv.value}deg` }],
+  }));
+
+  useEffect(() => {
+    sv.value = 0;
+    sv.value = withRepeat(withTiming(360, { duration: 2000 }), -1, true);
+  });
+
+  const textColor =
+    colorScheme === 'light' ? styles.darkText : styles.lightText;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <Text style={[styles.text, textColor]}>Disable reduced motion</Text>
+        <Switch
+          value={isReduceMotionDisabled}
+          onValueChange={setIsReduceMotionDisabled}
+        />
+      </View>
+      <ReducedMotionConfig
+        mode={isReduceMotionDisabled ? ReduceMotion.Never : ReduceMotion.System}
+      />
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </View>
+  );
+}
+
+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',
+    color: 'var(--swm-navy-light-100)',
+    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
@@ -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"