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}