feat(toast): use react-spring for animation

Author: minheq

package.json

@@ -43,6 +43,7 @@
     "focus-trap": "5.0.0",
     "react-icons": "3.6.1",
     "react-native-web": "0.11.2",
+    "react-spring": "9.0.0-beta.1",
     "ts-essentials": "2.0.5"
   },
   "devDependencies": {

src/components/Toast/Toast.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Animated } from 'react-native';
+import { View } from 'react-native';
+import { animated, useSpring } from 'react-spring/native';
 import { Omit } from 'ts-essentials';
 
-import { Theme, withTheme } from '../../theme';
 import { Alert, AlertProps } from '../Alert';
 
-// Animation taken from https://medium.com/@norbajunior/react-native-facebook-and-instagram-like-top-bar-notifications-with-animated-api-43c48d0443dd
+const AnimatedView = animated(View);
+
 export type ToastId = string;
 
 export interface ToastSettings extends Omit<AlertProps, 'onClose'> {
@@ -22,66 +23,35 @@ export interface ToastInstance extends ToastSettings {
   onRemove: () => void;
 }
 
-export interface ToastProps extends ToastInstance {
-  theme: Theme;
-}
-
-export interface ToastState {
-  value: Animated.Value;
-}
-
-const DEFAULT_VALUE = 500;
-
-class ToastBase extends React.Component<ToastProps, ToastState> {
-  public closeTimer: number | null = null;
-
-  constructor(props: ToastProps) {
-    super(props);
-
-    this.state = {
-      value: new Animated.Value(-DEFAULT_VALUE),
-    };
-  }
-
-  public componentDidMount() {
-    const { onRemove, duration = 3000, offset = 16 } = this.props;
-    const { value } = this.state;
-
-    Animated.sequence([
-      Animated.spring(value, {
-        bounciness: 8,
-        speed: 25,
-        toValue: offset,
-      }),
-      Animated.delay(duration),
-      Animated.spring(value, {
-        bounciness: 8,
-        speed: 25,
-        toValue: -DEFAULT_VALUE,
-      }),
-    ]).start(() => onRemove());
-  }
-
-  public render() {
-    const {
-      component,
-      offset,
-      duration,
-      id,
-      onRemove,
-      ...toastSettings
-    } = this.props;
-
-    return (
-      <Animated.View
-        style={{
-          transform: [{ translateY: this.state.value }],
-        }}
-      >
-        {component || <Alert {...toastSettings} onClose={onRemove} />}
-      </Animated.View>
-    );
-  }
-}
-
-export const Toast = withTheme(ToastBase);
+// tslint:disable-next-line
+export interface ToastProps extends ToastInstance {}
+
+export const Toast = (props: ToastProps) => {
+  const {
+    component,
+    id,
+    onRemove,
+    duration = 3000,
+    offset = 16,
+    ...toastSettings
+  } = props;
+
+  const style = useSpring({
+    config: { tension: 240, friction: 24 },
+    from: { translateY: -500 },
+    onRest: () => onRemove(),
+    to: async next => {
+      // tslint:disable-next-line
+      await next({ translateY: 10 });
+      // tslint:disable-next-line
+      await next({ translateY: -500, delay: duration });
+    },
+  });
+
+  return (
+    // @ts-ignore
+    <AnimatedView style={{ transform: [{ translateY: style.translateY }] }}>
+      {component || <Alert {...toastSettings} onClose={onRemove} />}
+    </AnimatedView>
+  );
+};

tests/__mocks__/react-spring/native.js

@@ -0,0 +1,2 @@
+export const useSpring = () => {};
+export const animated = View => View;

yarn.lock

@@ -977,7 +977,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
   integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
@@ -10116,6 +10116,14 @@ react-simple-code-editor@^0.9.0:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.9.10.tgz#1ab5ea7215687ed918c6d0dae90736cf01890905"
   integrity sha512-80LJwRQS7Wi9Ugh/e6FRHWdcg4oQOpMBDFxyDpORILffrHdV3EIQ1IeX5x7488r05iFgLbVDV4nQ1LRKjgCm0g==
 
+react-spring@9.0.0-beta.1:
+  version "9.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.0.0-beta.1.tgz#b7a48da6d3f4e20234b1dd11c78480c932f262b1"
+  integrity sha512-9d0wLcvInW3Qw7FNYCC61d2kzebXagF6cZN83xR9Sr+g2J+f/IowaZrUFxDnhSFxyRl2F/Oloo0wIedEOqYfEQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react-test-renderer@16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"