Skip to content

Commit

Permalink
feat: Add support for "Prefer Cross-Fade Transitions" into Accessibil…
Browse files Browse the repository at this point in the history
…ityInfo (#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
  • Loading branch information
gabrieldonadel authored and kelset committed Oct 3, 2022
1 parent 73e5533 commit 75d5679
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 0 deletions.
10 changes: 10 additions & 0 deletions Libraries/Components/AccessibilityInfo/AccessibilityInfo.flow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
28 changes: 28 additions & 0 deletions Libraries/Components/AccessibilityInfo/AccessibilityInfo.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions React/CoreModules/RCTAccessibilityManager.h
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
11 changes: 11 additions & 0 deletions React/CoreModules/RCTAccessibilityManager.mm
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 1 addition & 0 deletions jest/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
removeEventListener: jest.fn(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1114,6 +1114,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}
Expand Down

0 comments on commit 75d5679

Please sign in to comment.