Summary

This PR adds isReduceMotionEnabled() to AccessibilityInfo in other to add support for "reduce motion", exposing the Operational System's settings option. Additionally, it adds a new event, reduceMotionChanged, in order to listen for this flag's update.

With this feature, developers will be able to disable or reduce animations, something that will be required as soon as WCAG 2.1 draft got approved. See WCAG 2.1 — 2.3.3 Animations from Interaction criteria

Changelog

It's exposed by UIAccessibility' isReduceMotionEnabled on iOS and Settings.Global.TRANSITION_ANIMATION_SCALE on Android.

Up until now, AccessibilityInfo only exposes screen reader flag. By adding this second accessibility option, it's a good opportunity to rename fetch method to an appropriate name, isScreenReaderEnabled, as well as rename change event to screenReaderChanged, which will make it clearer and more specific.

(In case it's approved, a follow-up PR could exposes more iOS acessibility flags, such as isShakeToUndoEnabled, isReduceTransparencyEnabled, isGrayscaleEnabled, isInvertColorsEnabled)

(iOS code inspired by phonegap-mobile-accessibility. And Android by Flutter)

Test Plan

For iOS:
"General" > "Accessibility" > "Reduce Motion" in Settings, then make sure the toggle next to "Reduce Motion" is enabled.

For Android:
Reduce motion is only an option from Android 9 via "Accessibility" > "Reduce Motion" in Settings. For other versions, it can be enabled via "Transition Animation Scale" in "Developer options" selecting "Animation off"

The api applied:

componentDidMount() {
  AccessibilityInfo.isReduceMotionEnabled().done(isReduceMotionEnabled => {
    this.setState({ isReduceMotionEnabled });
  });

  AccessibilityInfo.addEventListener(
    "reduceMotionChanged",
    this._handleReduceMotionToggled
  );
}

_handleReduceMotionToggled = isReduceMotionEnabled => {
  this.setState({ isReduceMotionEnabled });
};

TODO:

• Submit react-native-web PR updating AccessibilityInfo documentation.