Add ReduceMotionConfig docs (#6165)

## Summary

Documentation for component `ReduceMotionConfig` added in
#6164


![image](https://github.com/software-mansion/react-native-reanimated/assets/36106620/16098702-202a-48b8-8589-fe739a6f5d53)

#6164 -
needs to be merged before


https://github.com/user-attachments/assets/bc6e467b-5ab3-4e77-94b6-7d792541643f

packages/docs-reanimated/docs/advanced/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Advanced APIs",
-  "position": 9,
+  "position": 110,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/animations/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Animations",
-  "position": 2,
+  "position": 20,
   "link": {
     "type": "generated-index"
   }

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
+    <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 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';
+
+<InteractiveExample
+  src={ReducedMotionConfigSrc}
+  component={ReducedMotionConfig}
+/>
+
+## Platform compatibility
+
+<div className="platform-compatibility">
+
+| Android | iOS | Web |
+| ------- | --- | --- |
+| ✅      | ✅  | ✅  |
+
+</div>

packages/docs-reanimated/docs/components/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Components",
+  "position": 60,
+  "link": {
+    "type": "generated-index"
+  }
+}

packages/docs-reanimated/docs/core/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Core",
-  "position": 3,
+  "position": 30,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/device/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Device",
-  "position": 5,
+  "position": 50,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/fundamentals/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Fundamentals",
-  "position": 1,
+  "position": 10,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/guides/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Guides",
-  "position": 10,
+  "position": 120,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/layout-animations/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Layout Animations",
-  "position": 5,
+  "position": 70,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/scroll/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Scroll",
-  "position": 4,
+  "position": 40,
   "link": {
     "type": "generated-index"
   }

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"
   }

packages/docs-reanimated/docs/threading/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Threading",
-  "position": 7,
+  "position": 90,
   "link": {
     "type": "generated-index"
   }

packages/docs-reanimated/docs/utilities/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Utilities",
-  "position": 8,
+  "position": 100,
   "link": {
     "type": "generated-index"
   }

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",

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<number>(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 (
+    <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',
+    fontSize: 16,
+  },
+  lightText: {
+    color: 'var(--swm-off-white)',
+  },
+  darkText: {
+    color: 'var(--swm-navy-light-100)',
+  },
+});

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"