Incubator.Dialog - support reduce motion (accessibility) (#3755)

* Incubator.Dialog - support reduce motion (accessibility)

* Fix tests

Author: M-i-k-e-l

src/commons/Constants.ts

@@ -67,19 +67,24 @@ export function updateConstants(dimensions: any) {
 }
 
 const accessibility = {
+  isReduceMotionEnabled: false,
   isScreenReaderEnabled: false
 };
 
+function handleReduceMotionChanged(isReduceMotionEnabled: AccessibilityChangeEvent) {
+  accessibility.isReduceMotionEnabled = isReduceMotionEnabled as boolean;
+}
+
 function handleScreenReaderChanged(isScreenReaderEnabled: AccessibilityChangeEvent) {
   accessibility.isScreenReaderEnabled = isScreenReaderEnabled as boolean;
 }
 
+AccessibilityInfo.addEventListener('reduceMotionChanged', handleReduceMotionChanged);
 AccessibilityInfo.addEventListener('screenReaderChanged', handleScreenReaderChanged);
 
-function setAccessibility() {
-  AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-    accessibility.isScreenReaderEnabled = isScreenReaderEnabled;
-  });
+async function setAccessibility() {
+  accessibility.isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();
+  accessibility.isScreenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
 }
 
 setAccessibility();

src/incubator/dialog/index.tsx

@@ -212,7 +212,14 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
 
   const renderDialog = () => (
     <GestureDetector gesture={panGesture}>
-      <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
+      <View
+        {...containerProps}
+        reanimated={!Constants.accessibility.isReduceMotionEnabled}
+        style={style}
+        onLayout={onLayout}
+        ref={setRef}
+        testID={testID}
+      >
         {renderDialogContent()}
       </View>
     </GestureDetector>