Merge from upstream through 2020-06-30

.flowconfig

@@ -86,4 +86,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.126.1
+^0.127.0

.flowconfig.android

@@ -89,4 +89,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.126.1
+^0.127.0

.flowconfig.macos

@@ -59,10 +59,6 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_macos\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_macos\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 experimental.well_formed_exports=true
 experimental.types_first=true
 experimental.abstract_locations=true
@@ -89,4 +85,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.126.1
+^0.127.0

IntegrationTests/AccessibilityManagerTest.js

@@ -10,13 +10,12 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
-const RCTDeviceEventEmitter = require('react-native/Libraries/EventEmitter/RCTDeviceEventEmitter');
-const {TestModule} = ReactNative.NativeModules;
-import NativeAccessibilityManager from 'react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager';
 import invariant from 'invariant';
+import NativeAccessibilityManager from 'react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager';
+import {DeviceEventEmitter, NativeModules, View} from 'react-native';
+import * as React from 'react';
+
+const {TestModule} = NativeModules;
 
 class AccessibilityManagerTest extends React.Component<{...}> {
   componentDidMount() {
@@ -39,7 +38,7 @@ class AccessibilityManagerTest extends React.Component<{...}> {
       accessibilityExtraExtraLarge: 11.0,
       accessibilityExtraExtraExtraLarge: 12.0,
     });
-    RCTDeviceEventEmitter.addListener('didUpdateDimensions', update => {
+    DeviceEventEmitter.addListener('didUpdateDimensions', update => {
       TestModule.markTestPassed(update.window.fontScale === 4.0);
     });
   }

IntegrationTests/ReactContentSizeUpdateTest.js

@@ -17,7 +17,7 @@ const ReactNative = require('react-native');
 const {View} = ReactNative;
 
 const {TestModule} = ReactNative.NativeModules;
-import type EmitterSubscription from 'react-native/Libraries/vendor/emitter/EmitterSubscription';
+import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 const reactViewWidth = 101;
 const reactViewHeight = 102;
@@ -33,7 +33,7 @@ type State = {|
 
 class ReactContentSizeUpdateTest extends React.Component<Props, State> {
   _timeoutID: ?TimeoutID = null;
-  _subscription: ?EmitterSubscription = null;
+  _subscription: ?EventSubscription = null;
 
   state: State = {
     height: reactViewHeight,

IntegrationTests/SizeFlexibilityUpdateTest.js

@@ -16,7 +16,7 @@ const ReactNative = require('react-native');
 const {View} = ReactNative;
 
 const {TestModule} = ReactNative.NativeModules;
-import type EmitterSubscription from 'react-native/Libraries/vendor/emitter/EmitterSubscription';
+import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 const reactViewWidth = 111;
 const reactViewHeight = 222;
@@ -31,7 +31,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 class SizeFlexibilityUpdateTest extends React.Component<Props> {
-  _subscription: ?EmitterSubscription = null;
+  _subscription: ?EventSubscription = null;
 
   UNSAFE_componentWillMount() {
     this._subscription = RCTNativeAppEventEmitter.addListener(

Libraries/Alert/NativeAlertManager.js

@@ -17,7 +17,7 @@ import type {DefaultInputsArray} from './AlertMacOS'; // TODO(macOS GH#774)
 export type Args = {|
   title?: string,
   message?: string,
-  buttons?: Array<Object>, // TODO: have a better type
+  buttons?: Array<Object>, // TODO(T67565166): have a better type
   type?: string,
   defaultValue?: string,
   cancelButtonKey?: string,

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -38,6 +38,15 @@ const API = {
   enableQueue: function(): void {
     queueConnections = true;
   },
+  getValue: function(
+    tag: number,
+    saveValueCallback: (value: number) => void,
+  ): void {
+    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    if (NativeAnimatedModule.getValue) {
+      NativeAnimatedModule.getValue(tag, saveValueCallback);
+    }
+  },
   disableQueue: function(): void {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
     queueConnections = false;

Libraries/Animated/src/NativeAnimatedModule.js

@@ -15,6 +15,7 @@ import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
 type EndResult = {finished: boolean, ...};
 type EndCallback = (result: EndResult) => void;
+type SaveValueCallback = (value: number) => void;
 
 export type EventMapping = {|
   nativeEventPath: Array<string>,
@@ -28,6 +29,7 @@ export type AnimatingNodeConfig = Object;
 
 export interface Spec extends TurboModule {
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;
   +connectAnimatedNodes: (parentTag: number, childTag: number) => void;

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -36,6 +36,7 @@ describe('Native Animated', () => {
 
   beforeEach(() => {
     Object.assign(NativeAnimatedModule, {
+      getValue: jest.fn(),
       addAnimatedEventToView: jest.fn(),
       connectAnimatedNodes: jest.fn(),
       connectAnimatedNodeToView: jest.fn(),
@@ -115,6 +116,26 @@ describe('Native Animated', () => {
       );
     });
 
+    it('should save value on unmount', () => {
+      NativeAnimatedModule.getValue = jest.fn((tag, saveCallback) => {
+        saveCallback(1);
+      });
+      const opacity = new Animated.Value(0);
+
+      opacity.__makeNative();
+
+      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const tag = opacity.__getNativeTag();
+
+      root.unmount();
+
+      expect(NativeAnimatedModule.getValue).toBeCalledWith(
+        tag,
+        expect.any(Function),
+      );
+      expect(opacity.__getValue()).toBe(1);
+    });
+
     it('should extract offset', () => {
       const opacity = new Animated.Value(0);
       opacity.__makeNative();

Libraries/Animated/src/createAnimatedComponent.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+const View = require('../../Components/View/View');
 const {AnimatedEvent} = require('./AnimatedEvent');
 const AnimatedProps = require('./nodes/AnimatedProps');
 const React = require('react');
@@ -20,7 +21,18 @@ const setAndForwardRef = require('../../Utilities/setAndForwardRef');
 export type AnimatedComponentType<
   Props: {+[string]: mixed, ...},
   Instance,
-> = React.AbstractComponent<$ObjMap<Props, () => any>, Instance>;
+> = React.AbstractComponent<
+  $ObjMap<
+    Props &
+      $ReadOnly<{
+        passthroughAnimatedPropExplicitValues?: React.ElementConfig<
+          typeof View,
+        >,
+      }>,
+    () => any,
+  >,
+  Instance,
+>;
 
 function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   Component: React.AbstractComponent<Props, Instance>,
@@ -65,6 +77,7 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     // However, setNativeProps can only be implemented on leaf native
     // components. If you want to animate a composite component, you need to
     // re-render it. In this case, we have a fallback that uses forceUpdate.
+    // This fallback is also called in Fabric.
     _animatedPropsCallback = () => {
       if (this._component == null) {
         // AnimatedProps is created in will-mount because it's used in render.
@@ -119,6 +132,10 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     _attachProps(nextProps) {
       const oldPropsAnimated = this._propsAnimated;
 
+      if (nextProps === oldPropsAnimated) {
+        return;
+      }
+
       this._propsAnimated = new AnimatedProps(
         nextProps,
         this._animatedPropsCallback,
@@ -160,10 +177,15 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     });
 
     render() {
-      const props = this._propsAnimated.__getValue();
+      const {style = {}, ...props} = this._propsAnimated.__getValue() || {};
+      const {style: passthruStyle = {}, ...passthruProps} =
+        this.props.passthroughAnimatedPropExplicitValues || {};
+      const mergedStyle = {...style, ...passthruStyle};
       return (
         <Component
           {...props}
+          {...passthruProps}
+          style={mergedStyle}
           ref={this._setComponentRef}
           // The native driver updates views directly through the UI thread so we
           // have to make sure the view doesn't get optimized away because it cannot

Libraries/Animated/src/nodes/AnimatedDivision.js

@@ -20,6 +20,7 @@ import type {InterpolationConfigType} from './AnimatedInterpolation';
 class AnimatedDivision extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
+  _warnedAboutDivideByZero: boolean = false;
 
   constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
     super();
@@ -40,8 +41,15 @@ class AnimatedDivision extends AnimatedWithChildren {
     const a = this._a.__getValue();
     const b = this._b.__getValue();
     if (b === 0) {
-      console.error('Detected division by zero in AnimatedDivision');
+      // Prevent spamming the console/LogBox
+      if (!this._warnedAboutDivideByZero) {
+        console.error('Detected division by zero in AnimatedDivision');
+        this._warnedAboutDivideByZero = true;
+      }
+      // Passing infinity/NaN to Fabric will cause a native crash
+      return 0;
     }
+    this._warnedAboutDivideByZero = false;
     return a / b;
   }
 

Libraries/Animated/src/nodes/AnimatedValue.js

@@ -86,6 +86,11 @@ class AnimatedValue extends AnimatedWithChildren {
   }
 
   __detach() {
+    if (this.__isNative) {
+      NativeAnimatedAPI.getValue(this.__getNativeTag(), value => {
+        this._value = value;
+      });
+    }
     this.stopAnimation();
     super.__detach();
   }

Libraries/AppState/AppState.js

@@ -10,13 +10,11 @@
 
 'use strict';
 
-const EventEmitter = require('../vendor/emitter/EventEmitter');
-const NativeEventEmitter = require('../EventEmitter/NativeEventEmitter');
-
-const invariant = require('invariant');
-const logError = require('../Utilities/logError');
-
+import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import logError from '../Utilities/logError';
+import EventEmitter from '../vendor/emitter/EventEmitter';
 import NativeAppState from './NativeAppState';
+import invariant from 'invariant';
 
 /**
  * `AppState` can tell you if the app is in the foreground or background,

Libraries/BugReporting/BugReporting.js

@@ -10,11 +10,10 @@
 
 'use strict';
 
-const RCTDeviceEventEmitter = require('../EventEmitter/RCTDeviceEventEmitter');
-
-import type EmitterSubscription from '../vendor/emitter/EmitterSubscription';
-import NativeBugReporting from './NativeBugReporting';
+import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
 import NativeRedBox from '../NativeModules/specs/NativeRedBox';
+import {type EventSubscription} from '../vendor/emitter/EventEmitter';
+import NativeBugReporting from './NativeBugReporting';
 
 type ExtraData = {[key: string]: string, ...};
 type SourceCallback = () => string;
@@ -39,8 +38,8 @@ function defaultExtras() {
 class BugReporting {
   static _extraSources: Map<string, SourceCallback> = new Map();
   static _fileSources: Map<string, SourceCallback> = new Map();
-  static _subscription: ?EmitterSubscription = null;
-  static _redboxSubscription: ?EmitterSubscription = null;
+  static _subscription: ?EventSubscription = null;
+  static _redboxSubscription: ?EventSubscription = null;
 
   static _maybeInit() {
     if (!BugReporting._subscription) {

Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js

@@ -10,9 +10,8 @@
 
 'use strict';
 
-const RCTDeviceEventEmitter = require('../../EventEmitter/RCTDeviceEventEmitter');
-const UIManager = require('../../ReactNative/UIManager');
-
+import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
+import UIManager from '../../ReactNative/UIManager';
 import NativeAccessibilityInfo from './NativeAccessibilityInfo';
 
 const REDUCE_MOTION_EVENT = 'reduceMotionDidChange';

Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js

@@ -10,9 +10,7 @@
 
 'use strict';
 
-const Promise = require('../../Promise');
-const RCTDeviceEventEmitter = require('../../EventEmitter/RCTDeviceEventEmitter');
-
+import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
 import NativeAccessibilityManager from './NativeAccessibilityManager';
 
 const CHANGE_EVENT_NAME = {

Libraries/Components/AppleTV/TVEventHandler.js

@@ -10,14 +10,13 @@
 
 'use strict';
 
-const Platform = require('../../Utilities/Platform');
-const NativeEventEmitter = require('../../EventEmitter/NativeEventEmitter');
-
+import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
+import Platform from '../../Utilities/Platform';
+import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';
-import type EmitterSubscription from '../../vendor/emitter/EmitterSubscription';
 
 class TVEventHandler {
-  __nativeTVNavigationEventListener: ?EmitterSubscription = null;
+  __nativeTVNavigationEventListener: ?EventSubscription = null;
   __nativeTVNavigationEventEmitter: ?NativeEventEmitter = null;
 
   enable(component: ?any, callback: Function): void {

Libraries/Components/Keyboard/Keyboard.js

@@ -10,13 +10,11 @@
 
 'use strict';
 
-const LayoutAnimation = require('../../LayoutAnimation/LayoutAnimation');
-const NativeEventEmitter = require('../../EventEmitter/NativeEventEmitter');
-
-const dismissKeyboard = require('../../Utilities/dismissKeyboard');
-const invariant = require('invariant');
-
+import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
+import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
+import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
+import invariant from 'invariant';
 const KeyboardEventEmitter: NativeEventEmitter = new NativeEventEmitter(
   NativeKeyboardObserver,
 );

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -18,7 +18,7 @@ const StyleSheet = require('../../StyleSheet/StyleSheet');
 const View = require('../View/View');
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type EmitterSubscription from '../../vendor/emitter/EmitterSubscription';
+import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {
   ViewProps,
   ViewLayout,
@@ -67,7 +67,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _frame: ?ViewLayout = null;
-  _subscriptions: Array<EmitterSubscription> = [];
+  _subscriptions: Array<EventSubscription> = [];
   viewRef: {current: React.ElementRef<any> | null, ...};
   _initialFrameHeight: number = 0;