feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo (#34406)

Summary:
This PR adds `prefersCrossFadeTransitions()` to AccessibilityInfo in order to add support for "Prefer Cross-Fade Transitions", exposing the iOS settings option as proposed here react-native-community/discussions-and-proposals#452.
I believe this would be especially helpful for solving #31484

#### TODO
- [ ]  Submit react-native-web PR updating AccessibilityInfo documentation.

## Changelog

[iOS] [Added] - Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo

Pull Request resolved: #34406

Test Plan:
**On iOS 14+**

1.  Access Settings > "General" > "Accessibility" > "Reduce Motion", enable "Reduce Motion" then enable "Prefer Cross-Fade Transitions".
2. Open the RNTester app and navigate to the Accessibility page

https://user-images.githubusercontent.com/11707729/154588402-7d050858-3c2d-4d86-9585-928b8c66941b.mov

Reviewed By: cipolleschi

Differential Revision: D38711316

Pulled By: makovkastar

fbshipit-source-id: b9965cd4285f1aa0f1fa927080370a22329c2f62

Author: gabrieldonadel

Libraries/Components/AccessibilityInfo/AccessibilityInfo.flow.js

@@ -85,6 +85,16 @@ export interface AccessibilityInfo {
    */
   isReduceMotionEnabled: () => Promise<boolean>;
 
+  /**
+   * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#prefersCrossFadeTransitions
+   */
+  prefersCrossFadeTransitions: () => Promise<boolean>;
+
   /**
    * Query whether reduced transparency is currently enabled.
    *

Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -179,6 +179,34 @@ const AccessibilityInfo: AccessibilityInfoType = {
     });
   },
 
+  /**
+   * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when  prefer cross-fade transitions is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#prefersCrossFadeTransitions
+   */
+  prefersCrossFadeTransitions(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        return Promise.resolve(false);
+      } else {
+        if (
+          NativeAccessibilityManagerIOS?.getCurrentPrefersCrossFadeTransitionsState !=
+          null
+        ) {
+          NativeAccessibilityManagerIOS.getCurrentPrefersCrossFadeTransitionsState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
   /**
    * Query whether reduced transparency is currently enabled.
    *

Libraries/Components/AccessibilityInfo/NativeAccessibilityManager.js

@@ -28,6 +28,10 @@ export interface Spec extends TurboModule {
     onSuccess: (isReduceMotionEnabled: boolean) => void,
     onError: (error: Object) => void,
   ) => void;
+  +getCurrentPrefersCrossFadeTransitionsState?: (
+    onSuccess: (prefersCrossFadeTransitions: boolean) => void,
+    onError: (error: Object) => void,
+  ) => void;
   +getCurrentReduceTransparencyState: (
     onSuccess: (isReduceTransparencyEnabled: boolean) => void,
     onError: (error: Object) => void,

React/CoreModules/RCTAccessibilityManager.h

@@ -23,6 +23,7 @@ extern NSString *const RCTAccessibilityManagerDidUpdateMultiplierNotification; /
 @property (nonatomic, assign) BOOL isGrayscaleEnabled;
 @property (nonatomic, assign) BOOL isInvertColorsEnabled;
 @property (nonatomic, assign) BOOL isReduceMotionEnabled;
+@property (nonatomic, assign) BOOL prefersCrossFadeTransitions;
 @property (nonatomic, assign) BOOL isReduceTransparencyEnabled;
 @property (nonatomic, assign) BOOL isVoiceOverEnabled;
 

React/CoreModules/RCTAccessibilityManager.mm

@@ -358,6 +358,17 @@ static void setMultipliers(
   onSuccess(@[ @(_isReduceMotionEnabled) ]);
 }
 
+RCT_EXPORT_METHOD(getCurrentPrefersCrossFadeTransitionsState
+                  : (RCTResponseSenderBlock)onSuccess onError
+                  : (__unused RCTResponseSenderBlock)onError)
+{
+  if (@available(iOS 14.0, *)) {
+    onSuccess(@[ @(UIAccessibilityPrefersCrossFadeTransitions()) ]);
+  } else {
+    onSuccess(@[ @(false) ]);
+  }
+}
+
 RCT_EXPORT_METHOD(getCurrentReduceTransparencyState
                   : (RCTResponseSenderBlock)onSuccess onError
                   : (__unused RCTResponseSenderBlock)onError)

jest/setup.js

@@ -128,6 +128,7 @@ jest
       isGrayscaleEnabled: jest.fn(),
       isInvertColorsEnabled: jest.fn(),
       isReduceMotionEnabled: jest.fn(),
+      prefersCrossFadeTransitions: jest.fn(),
       isReduceTransparencyEnabled: jest.fn(),
       isScreenReaderEnabled: jest.fn(() => Promise.resolve(false)),
       setAccessibilityFocus: jest.fn(),

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -1183,6 +1183,11 @@ class DisplayOptionsStatusExample extends React.Component<{}> {
           optionChecker={AccessibilityInfo.isReduceMotionEnabled}
           notification={'reduceMotionChanged'}
         />
+        <DisplayOptionStatusExample
+          optionName={'Prefer Cross-Fade Transitions'}
+          optionChecker={AccessibilityInfo.prefersCrossFadeTransitions}
+          notification={'prefersCrossFadeTransitionsChanged'}
+        />
         <DisplayOptionStatusExample
           optionName={'Screen Reader'}
           optionChecker={AccessibilityInfo.isScreenReaderEnabled}