Merge branch 'master' into feature/line-break-strategy-ios

.buckconfig

@@ -8,7 +8,6 @@
 [maven_repositories]
   central = https://repo1.maven.org/maven2
   google = https://maven.google.com/
-  jcenter = https://jcenter.bintray.com/
 
 [alias]
   rntester = //packages/rn-tester/android/app:app

.circleci/config.yml

@@ -27,6 +27,7 @@ executors:
   nodelts:
     <<: *defaults
     docker:
+      # Note: Version set separately for Windows builds, see below.
       - image: circleci/node:14
   nodeprevlts:
     <<: *defaults
@@ -51,7 +52,7 @@ executors:
   reactnativeios:
     <<: *defaults
     macos:
-      xcode: &_XCODE_VERSION "12.4.0"
+      xcode: &_XCODE_VERSION "12.5.0"
 
 # -------------------------
 #        COMMANDS
@@ -618,12 +619,19 @@ jobs:
       - ANDROID_HOME: "C:\\Android\\android-sdk"
       - ANDROID_NDK: "C:\\Android\\android-sdk\\ndk\\20.1.5948944"
       - ANDROID_BUILD_VERSION: 30
-      - ANDROID_TOOLS_VERSION: 29.0.3
+      - ANDROID_TOOLS_VERSION: 30.0.2
       - GRADLE_OPTS: -Dorg.gradle.daemon=false
       - NDK_VERSION: 20.1.5948944
     steps:
       - checkout
 
+      - run:
+          name: Install Node
+          # Note: Version set separately for non-Windows builds, see above.
+          command: |
+            nvm install 14.17.0
+            nvm use 14.17.0
+
       # Setup Dependencies
       - run:
           name: Install Yarn

.editorconfig

@@ -13,6 +13,9 @@ indent_size = 2
 [*.gradle]
 indent_size = 4
 
+[*.kts]
+indent_size = 4
+
 [BUCK]
 indent_size = 4
 

.eslintrc

@@ -21,6 +21,14 @@
         "@react-native/codegen/react-native-modules": 2
       }
     },
+    {
+      "files": [
+        "flow-typed/**/*.js",
+      ],
+      "rules": {
+        quotes: 0
+      }
+    },
     {
       "files": [
         "**/__fixtures__/**/*.js",

IntegrationTests/TimersTest.js

@@ -97,36 +97,46 @@ class TimersTest extends React.Component<Props, State> {
   }
 
   componentDidMount() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testSetTimeout0, 1000);
   }
 
   testSetTimeout0() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testSetTimeout1, 0);
   }
 
   testSetTimeout1() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testSetTimeout50, 1);
   }
 
   testSetTimeout50() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testRequestAnimationFrame, 50);
   }
 
   testRequestAnimationFrame() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.requestAnimationFrame(this.testSetInterval0);
   }
 
   testSetInterval0() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._nextTest = this.testSetInterval20;
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._interval = this.setInterval(this._incrementInterval, 0);
   }
 
   testSetInterval20() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._nextTest = this.testSetImmediate;
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._interval = this.setInterval(this._incrementInterval, 20);
   }
 
   testSetImmediate() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setImmediate(this.testClearTimeout0);
   }
 
@@ -139,6 +149,7 @@ class TimersTest extends React.Component<Props, State> {
   testClearTimeout30() {
     const timeout = this.setTimeout(() => this._fail('testClearTimeout30'), 30);
     this.clearTimeout(timeout);
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testClearMulti, 50);
   }
 
@@ -156,6 +167,7 @@ class TimersTest extends React.Component<Props, State> {
     fails.forEach(timeout => this.clearTimeout(timeout));
     this.setTimeout(() => this.clearTimeout(delayClear), 20);
 
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testOrdering, 50);
   }
 
@@ -191,6 +203,7 @@ class TimersTest extends React.Component<Props, State> {
         ),
       25,
     );
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.done, 50);
   }
 

Libraries/Animated/__tests__/createAnimatedComponentInjection-test.js

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ *
+ * @emails oncall+react_native
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+const createAnimatedComponent = require('../createAnimatedComponent');
+const createAnimatedComponentInjection = require('../createAnimatedComponentInjection');
+const React = require('react');
+
+function injected<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): React.AbstractComponent<TProps, TInstance> {
+  return createAnimatedComponent(Component);
+}
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.resetAllMocks();
+});
+
+test('does nothing without injection', () => {
+  expect(typeof createAnimatedComponent).toBe('function');
+  expect(createAnimatedComponent).not.toBe(injected);
+});
+
+test('injection overrides `createAnimatedComponent`', () => {
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(createAnimatedComponent).toBe(injected);
+});
+
+test('injection errors if called too late', () => {
+  jest.spyOn(console, 'error').mockReturnValue(undefined);
+
+  // Causes `createAnimatedComponent` to be initialized.
+  createAnimatedComponent;
+
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(createAnimatedComponent).not.toBe(injected);
+  expect(console.error).toBeCalledWith(
+    'createAnimatedComponentInjection: Must be called before `createAnimatedComponent`.',
+  );
+});
+
+test('injection errors if called more than once', () => {
+  jest.spyOn(console, 'error').mockReturnValue(undefined);
+
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(createAnimatedComponent).toBe(injected);
+  expect(console.error).not.toBeCalled();
+
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(console.error).toBeCalledWith(
+    'createAnimatedComponentInjection: Cannot be called more than once.',
+  );
+});

Libraries/Animated/animations/Animation.js

@@ -71,6 +71,7 @@ class Animation {
         this.__nativeId,
         animatedValue.__getNativeTag(),
         this.__getNativeAnimationConfig(),
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this.__debouncedOnEnd.bind(this),
       );
     } catch (e) {

Libraries/Animated/animations/DecayAnimation.js

@@ -84,6 +84,7 @@ class DecayAnimation extends Animation {
     if (this._useNativeDriver) {
       this.__startNativeAnimation(animatedValue);
     } else {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }
@@ -105,6 +106,7 @@ class DecayAnimation extends Animation {
 
     this._lastValue = value;
     if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }

Libraries/Animated/animations/SpringAnimation.js

@@ -344,6 +344,7 @@ class SpringAnimation extends Animation {
       this.__debouncedOnEnd({finished: true});
       return;
     }
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
   }
 

Libraries/Animated/animations/TimingAnimation.js

@@ -117,6 +117,7 @@ class TimingAnimation extends Animation {
           this.__startNativeAnimation(animatedValue);
         } else {
           this._animationFrame = requestAnimationFrame(
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             this.onUpdate.bind(this),
           );
         }
@@ -149,6 +150,7 @@ class TimingAnimation extends Animation {
           (this._toValue - this._fromValue),
     );
     if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }

Libraries/Animated/createAnimatedComponent.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import * as createAnimatedComponentInjection from './createAnimatedComponentInjection';
+
 const View = require('../Components/View/View');
 const {AnimatedEvent} = require('./AnimatedEvent');
 const AnimatedProps = require('./nodes/AnimatedProps');
@@ -298,4 +300,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   });
 }
 
-module.exports = createAnimatedComponent;
+// $FlowIgnore[incompatible-cast] - Will be compatible after refactors.
+module.exports = (createAnimatedComponentInjection.recordAndRetrieve() ??
+  createAnimatedComponent: typeof createAnimatedComponent);

Libraries/Animated/createAnimatedComponentInjection.js

@@ -0,0 +1,48 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import * as React from 'react';
+
+type createAnimatedComponent = <TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+) => React.AbstractComponent<TProps, TInstance>;
+
+// This can be undefined, null, or the experimental implementation. If this is
+// null, that means `createAnimatedComponent` has already been initialized and
+// it is too late to call `inject`.
+let injected: ?createAnimatedComponent;
+
+/**
+ * Call during bundle initialization to opt-in to new `createAnimatedComponent`.
+ */
+export function inject(newInjected: createAnimatedComponent): void {
+  if (injected !== undefined) {
+    if (__DEV__) {
+      console.error(
+        'createAnimatedComponentInjection: ' +
+          (injected == null
+            ? 'Must be called before `createAnimatedComponent`.'
+            : 'Cannot be called more than once.'),
+      );
+    }
+    return;
+  }
+  injected = newInjected;
+}
+
+/**
+ * Only called by `createAnimatedComponent.js`.
+ */
+export function recordAndRetrieve(): createAnimatedComponent | null {
+  if (injected === undefined) {
+    injected = null;
+  }
+  return injected;
+}

Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js

@@ -0,0 +1,30 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import useAnimatedProps from './useAnimatedProps';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import * as React from 'react';
+
+/**
+ * Experimental implementation of `createAnimatedComponent` that is intended to
+ * be compatible with concurrent rendering.
+ */
+export default function createAnimatedComponent<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): React.AbstractComponent<TProps, TInstance> {
+  return React.forwardRef((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      props,
+    );
+    const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
+
+    return <Component {...reducedProps} ref={ref} />;
+  });
+}

Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -76,6 +76,7 @@ class AnimatedWithChildren extends AnimatedNode {
     super.__callListeners(value);
     if (!this.__isNative) {
       for (const child of this._children) {
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (child.__getValue) {
           child.__callListeners(child.__getValue());
         }