feat: automatically handle reduce motion device settings (#1937)

Author: matkoson

docs/pages/2.theming.md

@@ -69,9 +69,15 @@ A theme usually contains the following properties:
   - `medium`
   - `light`
   - `thin`
+- `animation` (`object`)
+  - `scale` - scale for all animations
 
 When creating a custom theme, you will need to provide all of these properties.
 
+If you don't use custom theme, Paper will automatically turn animations on/off, depending on device settings.
+
+Otherwise, your custom theme will need to handle it manually, using React Native's [AccessibilityInfo API](https://reactnative.dev/docs/0.54/accessibilityinfo);
+
 ## Applying a theme to a paper component
 
 If you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `Provider`.

package.json

@@ -60,7 +60,7 @@
     "@types/jest": "^24.0.13",
     "@types/node": "^13.1.0",
     "@types/react-dom": "^16.8.4",
-    "@types/react-native": "^0.57.61",
+    "@types/react-native": "^0.61.4",
     "@types/react-native-vector-icons": "^6.4.1",
     "@typescript-eslint/eslint-plugin": "^2.12.0",
     "@typescript-eslint/parser": "^2.12.0",

src/components/Appbar/AppbarHeader.tsx

@@ -119,6 +119,7 @@ class AppbarHeader extends React.Component<Props> {
         }
       >
         <Appbar
+          //@ts-ignore
           style={[
             //@ts-ignore
             { height, backgroundColor, marginTop: statusBarHeight },

src/components/Chip.tsx

@@ -209,16 +209,16 @@ class Chip extends React.Component<Props, State> {
       : selectedBackgroundColor;
 
     const accessibilityTraits: AccessibilityTrait[] = ['button'];
-    const accessibilityStates: AccessibilityState[] = [];
+    const accessibilityState: AccessibilityState = {};
 
     if (selected) {
       accessibilityTraits.push('selected');
-      accessibilityStates.push('selected');
+      accessibilityState.selected = true;
     }
 
     if (disabled) {
       accessibilityTraits.push('disabled');
-      accessibilityStates.push('disabled');
+      accessibilityState.disabled = true;
     }
 
     return (
@@ -253,7 +253,7 @@ class Chip extends React.Component<Props, State> {
           accessibilityTraits={accessibilityTraits}
           accessibilityComponentType="button"
           accessibilityRole="button"
-          accessibilityStates={accessibilityStates}
+          accessibilityState={accessibilityState}
           testID={testID}
         >
           <View style={styles.content}>

src/components/__tests__/__snapshots__/Chip.test.js.snap

@@ -15,7 +15,7 @@ exports[`renders chip with close button 1`] = `
 >
   <View
     accessibilityRole="button"
-    accessibilityStates={Array []}
+    accessibilityState={Object {}}
     accessible={true}
     focusable={false}
     isTVSelectable={true}
@@ -193,7 +193,7 @@ exports[`renders chip with icon 1`] = `
 >
   <View
     accessibilityRole="button"
-    accessibilityStates={Array []}
+    accessibilityState={Object {}}
     accessible={true}
     focusable={false}
     isTVSelectable={true}
@@ -320,7 +320,7 @@ exports[`renders chip with onPress 1`] = `
 >
   <View
     accessibilityRole="button"
-    accessibilityStates={Array []}
+    accessibilityState={Object {}}
     accessible={true}
     focusable={true}
     isTVSelectable={true}
@@ -402,10 +402,10 @@ exports[`renders outlined disabled chip 1`] = `
 >
   <View
     accessibilityRole="button"
-    accessibilityStates={
-      Array [
-        "disabled",
-      ]
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
     }
     accessible={true}
     focusable={false}
@@ -488,10 +488,10 @@ exports[`renders selected chip 1`] = `
 >
   <View
     accessibilityRole="button"
-    accessibilityStates={
-      Array [
-        "selected",
-      ]
+    accessibilityState={
+      Object {
+        "selected": true,
+      }
     }
     accessible={true}
     focusable={false}

src/components/__tests__/__snapshots__/ListItem.test.js.snap

@@ -96,7 +96,7 @@ exports[`renders list item with custom description 1`] = `
           >
             <View
               accessibilityRole="button"
-              accessibilityStates={Array []}
+              accessibilityState={Object {}}
               accessible={true}
               focusable={true}
               isTVSelectable={true}

src/core/Provider.tsx

@@ -1,26 +1,62 @@
 import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
 import { ThemeProvider } from './theming';
 import { Provider as SettingsProvider, Settings } from './settings';
 import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
 import PortalHost from '../components/Portal/PortalHost';
 import { Theme } from '../types';
+import DefaultTheme from '../styles/DefaultTheme';
 
 type Props = {
   children: React.ReactNode;
   theme?: Theme;
   settings?: Settings;
 };
-
 export default class Provider extends React.Component<Props> {
+  state = {
+    reduceMotionEnabled: false,
+  };
+
+  async componentDidMount() {
+    AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      this.updateReduceMotionSettingsInfo
+    );
+    this.updateReduceMotionSettingsInfo();
+  }
+
+  componentWillUnmount() {
+    AccessibilityInfo.removeEventListener(
+      'reduceMotionChanged',
+      this.updateReduceMotionSettingsInfo
+    );
+  }
+
+  private updateReduceMotionSettingsInfo = async () => {
+    try {
+      const reduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();
+
+      this.setState({ reduceMotionEnabled });
+    } catch (err) {
+      console.warn(err);
+    }
+  };
+
   render() {
+    const { children, settings, theme: providedTheme } = this.props;
+    const { reduceMotionEnabled } = this.state;
+    const theme = !providedTheme
+      ? Object.assign(DefaultTheme, {
+          animation: {
+            scale: reduceMotionEnabled ? 0 : 1,
+          },
+        })
+      : providedTheme;
+
     return (
       <PortalHost>
-        <SettingsProvider
-          value={this.props.settings || { icon: MaterialCommunityIcon }}
-        >
-          <ThemeProvider theme={this.props.theme}>
-            {this.props.children}
-          </ThemeProvider>
+        <SettingsProvider value={settings || { icon: MaterialCommunityIcon }}>
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
         </SettingsProvider>
       </PortalHost>
     );

yarn.lock

@@ -2566,12 +2566,11 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react-native@^0.57.61":
-  version "0.57.65"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.65.tgz#9da4773aaa95924bce42a54a5c19cfd8ffd5022b"
-  integrity sha512-7P5ulTb+/cnwbABWaAjzKmSYkRWeK7UCTfUwHhDpnwxdiL2X/KbdN1sPgo0B2E4zxfYE3MEoHv7FhB8Acfvf8A==
+"@types/react-native@^0.61.4":
+  version "0.61.23"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.23.tgz#bff4e0311c229a5203eb37aacd4febf59f3e2980"
+  integrity sha512-upHmySsrVBDBokWWhYIKkKnpvadsHdioSjbBTu4xl7fjN0yb94KR5ngUOBXsyqAYqQzF+hP6qpvobG9M7Jr6hw==
   dependencies:
-    "@types/prop-types" "*"
     "@types/react" "*"
 
 "@types/react@*":