[change] Update Animated

react-native@v0.60.0-rc.3

Fix #1378
Fix #1325
Close #1306

packages/react-native-web/src/exports/Animated/index.js

@@ -8,15 +8,25 @@
  */
 
 import AnimatedImplementation from '../../vendor/react-native/Animated/AnimatedImplementation';
+import FlatList from '../FlatList';
 import Image from '../Image';
+import SectionList from '../SectionList';
 import ScrollView from '../ScrollView';
 import Text from '../Text';
 import View from '../View';
 
 const Animated = {
   ...AnimatedImplementation,
+  FlatList: AnimatedImplementation.createAnimatedComponent(FlatList, {
+    scrollEventThrottle: 0.0001
+  }),
   Image: AnimatedImplementation.createAnimatedComponent(Image),
-  ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView),
+  ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView, {
+    scrollEventThrottle: 0.0001
+  }),
+  SectionList: AnimatedImplementation.createAnimatedComponent(SectionList, {
+    scrollEventThrottle: 0.0001
+  }),
   View: AnimatedImplementation.createAnimatedComponent(View),
   Text: AnimatedImplementation.createAnimatedComponent(Text)
 };

packages/react-native-web/src/vendor/react-native/Animated/AnimatedEvent.js

@@ -158,7 +158,7 @@ class AnimatedEvent {
     };
   }
 
-  _callListeners(...args) {
+  _callListeners(...args: any) {
     this._listeners.forEach(listener => listener(...args));
   }
 

packages/react-native-web/src/vendor/react-native/Animated/AnimatedImplementation.js

@@ -19,6 +19,7 @@ import AnimatedModulo from './nodes/AnimatedModulo';
 import AnimatedMultiplication from './nodes/AnimatedMultiplication';
 import AnimatedNode from './nodes/AnimatedNode';
 import AnimatedProps from './nodes/AnimatedProps';
+import AnimatedSubtraction from './nodes/AnimatedSubtraction';
 import AnimatedTracking from './nodes/AnimatedTracking';
 import AnimatedValue from './nodes/AnimatedValue';
 import AnimatedValueXY from './nodes/AnimatedValueXY';
@@ -28,11 +29,15 @@ import TimingAnimation from './animations/TimingAnimation';
 
 import createAnimatedComponent from './createAnimatedComponent';
 
-import type { AnimationConfig, EndCallback, EndResult } from './animations/Animation';
-import type { TimingAnimationConfig } from './animations/TimingAnimation';
-import type { DecayAnimationConfig } from './animations/DecayAnimation';
-import type { SpringAnimationConfig } from './animations/SpringAnimation';
-import type { Mapping, EventConfig } from './AnimatedEvent';
+import type {
+  AnimationConfig,
+  EndCallback,
+  EndResult,
+} from './animations/Animation';
+import type {TimingAnimationConfig} from './animations/TimingAnimation';
+import type {DecayAnimationConfig} from './animations/DecayAnimation';
+import type {SpringAnimationConfig} from './animations/SpringAnimation';
+import type {Mapping, EventConfig} from './AnimatedEvent';
 
 export type CompositeAnimation = {
   start: (callback?: ?EndCallback) => void,
@@ -49,6 +54,13 @@ const add = function(
   return new AnimatedAddition(a, b);
 };
 
+const subtract = function(
+  a: AnimatedNode | number,
+  b: AnimatedNode | number,
+): AnimatedSubtraction {
+  return new AnimatedSubtraction(a, b);
+};
+
 const divide = function(
   a: AnimatedNode | number,
   b: AnimatedNode | number,
@@ -405,11 +417,14 @@ const stagger = function(
   );
 };
 
-type LoopAnimationConfig = {iterations: number};
+type LoopAnimationConfig = {
+  iterations: number,
+  resetBeforeIteration?: boolean,
+};
 
 const loop = function(
   animation: CompositeAnimation,
-  {iterations = -1}: LoopAnimationConfig = {},
+  {iterations = -1, resetBeforeIteration = true}: LoopAnimationConfig = {},
 ): CompositeAnimation {
   let isFinished = false;
   let iterationsSoFar = 0;
@@ -424,7 +439,7 @@ const loop = function(
           callback && callback(result);
         } else {
           iterationsSoFar++;
-          animation.reset();
+          resetBeforeIteration && animation.reset();
           animation.start(restart);
         }
       };
@@ -502,6 +517,8 @@ const event = function(argMapping: Array<?Mapping>, config?: EventConfig): any {
  * easy to build and maintain. `Animated` focuses on declarative relationships
  * between inputs and outputs, with configurable transforms in between, and
  * simple `start`/`stop` methods to control time-based animation execution.
+ * If additional transforms are added, be sure to include them in
+ * AnimatedMock.js as well.
  *
  * See http://facebook.github.io/react-native/docs/animated.html
  */
@@ -516,7 +533,7 @@ const AnimatedImplementation = {
   /**
    * 2D value class for driving 2D animations, such as pan gestures.
    *
-   * See https://facebook.github.io/react-native/releases/next/docs/animatedvaluexy.html
+   * See https://facebook.github.io/react-native/docs/animatedvaluexy.html
    */
   ValueXY: AnimatedValueXY,
   /**
@@ -563,6 +580,14 @@ const AnimatedImplementation = {
    */
   add,
 
+  /**
+   * Creates a new Animated value composed by subtracting the second Animated
+   * value from the first Animated value.
+   *
+   * See http://facebook.github.io/react-native/docs/animated.html#subtract
+   */
+  subtract,
+
   /**
    * Creates a new Animated value composed by dividing the first Animated value
    * by the second Animated value.
@@ -665,6 +690,11 @@ const AnimatedImplementation = {
   forkEvent,
   unforkEvent,
 
+  /**
+   * Expose Event class, so it can be used as a type for type checkers.
+   */
+  Event: AnimatedEvent,
+
   __PropsOnlyForTests: AnimatedProps,
 };
 

packages/react-native-web/src/vendor/react-native/Animated/Easing.js

@@ -1,11 +1,13 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @format
+ * @flow strict
  */
+
 'use strict';
 
 import _bezier from './bezier';
@@ -131,7 +133,7 @@ class Easing {
    * http://easings.net/#easeInSine
    */
   static sin(t: number) {
-    return 1 - Math.cos(t * Math.PI / 2);
+    return 1 - Math.cos((t * Math.PI) / 2);
   }
 
   /**
@@ -164,7 +166,7 @@ class Easing {
    */
   static elastic(bounciness: number = 1): (t: number) => number {
     const p = bounciness * Math.PI;
-    return (t) => 1 - Math.pow(Math.cos(t * Math.PI / 2), 3) * Math.cos(t * p);
+    return t => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
   }
 
   /**
@@ -175,11 +177,8 @@ class Easing {
    *
    * - http://tiny.cc/back_default (s = 1.70158, default)
    */
-  static back(s: number): (t: number) => number {
-    if (s === undefined) {
-      s = 1.70158;
-    }
-    return (t) => t * t * ((s + 1) * t - s);
+  static back(s: number = 1.70158): (t: number) => number {
+    return t => t * t * ((s + 1) * t - s);
   }
 
   /**
@@ -193,17 +192,17 @@ class Easing {
     }
 
     if (t < 2 / 2.75) {
-      t -= 1.5 / 2.75;
-      return 7.5625 * t * t + 0.75;
+      const t2 = t - 1.5 / 2.75;
+      return 7.5625 * t2 * t2 + 0.75;
     }
 
     if (t < 2.5 / 2.75) {
-      t -= 2.25 / 2.75;
-      return 7.5625 * t * t + 0.9375;
+      const t2 = t - 2.25 / 2.75;
+      return 7.5625 * t2 * t2 + 0.9375;
     }
 
-    t -= 2.625 / 2.75;
-    return 7.5625 * t * t + 0.984375;
+    const t2 = t - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
   }
 
   /**
@@ -217,38 +216,32 @@ class Easing {
     x1: number,
     y1: number,
     x2: number,
-    y2: number
+    y2: number,
   ): (t: number) => number {
     return _bezier(x1, y1, x2, y2);
   }
 
   /**
    * Runs an easing function forwards.
    */
-  static in(
-    easing: (t: number) => number,
-  ): (t: number) => number {
+  static in(easing: (t: number) => number): (t: number) => number {
     return easing;
   }
 
   /**
    * Runs an easing function backwards.
    */
-  static out(
-    easing: (t: number) => number,
-  ): (t: number) => number {
-    return (t) => 1 - easing(1 - t);
+  static out(easing: (t: number) => number): (t: number) => number {
+    return t => 1 - easing(1 - t);
   }
 
   /**
    * Makes any easing function symmetrical. The easing function will run
    * forwards for half of the duration, then backwards for the rest of the
    * duration.
    */
-  static inOut(
-    easing: (t: number) => number,
-  ): (t: number) => number {
-    return (t) => {
+  static inOut(easing: (t: number) => number): (t: number) => number {
+    return t => {
       if (t < 0.5) {
         return easing(t * 2) / 2;
       }