react-native 0.0.0-263478b91 → 0.0.0-268efb102

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -47,6 +47,7 @@ const ActionSheetIOS = {
       +cancelButtonIndex?: ?number,
       +anchor?: ?number,
       +tintColor?: ColorValue | ProcessedColorValue,
+      +cancelButtonTintColor?: ColorValue | ProcessedColorValue,
       +userInterfaceStyle?: string,
       +disabledButtonIndices?: Array<number>,
     |},
@@ -59,7 +60,12 @@ const ActionSheetIOS = {
     invariant(typeof callback === 'function', 'Must provide a valid callback');
     invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
 
-    const {tintColor, destructiveButtonIndex, ...remainingOptions} = options;
+    const {
+      tintColor,
+      cancelButtonTintColor,
+      destructiveButtonIndex,
+      ...remainingOptions
+    } = options;
     let destructiveButtonIndices = null;
 
     if (Array.isArray(destructiveButtonIndex)) {
@@ -69,14 +75,21 @@ const ActionSheetIOS = {
     }
 
     const processedTintColor = processColor(tintColor);
+    const processedCancelButtonTintColor = processColor(cancelButtonTintColor);
     invariant(
       processedTintColor == null || typeof processedTintColor === 'number',
       'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions tintColor',
     );
+    invariant(
+      processedCancelButtonTintColor == null ||
+        typeof processedCancelButtonTintColor === 'number',
+      'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions cancelButtonTintColor',
+    );
     RCTActionSheetManager.showActionSheetWithOptions(
       {
         ...remainingOptions,
         tintColor: processedTintColor,
+        cancelButtonTintColor: processedCancelButtonTintColor,
         destructiveButtonIndices,
       },
       callback,

package/Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -22,6 +22,7 @@ export interface Spec extends TurboModule {
       +cancelButtonIndex?: ?number,
       +anchor?: ?number,
       +tintColor?: ?number,
+      +cancelButtonTintColor?: ?number,
       +userInterfaceStyle?: ?string,
       +disabledButtonIndices?: Array<number>,
     |},
@@ -34,6 +35,7 @@ export interface Spec extends TurboModule {
       +subject?: ?string,
       +anchor?: ?number,
       +tintColor?: ?number,
+      +cancelButtonTintColor?: ?number,
       +excludedActivityTypes?: ?Array<string>,
       +userInterfaceStyle?: ?string,
     |},

package/Libraries/Animated/AnimatedEvent.js

@@ -11,6 +11,7 @@
 'use strict';
 
 const AnimatedValue = require('./nodes/AnimatedValue');
+const AnimatedValueXY = require('./nodes/AnimatedValueXY');
 const NativeAnimatedHelper = require('./NativeAnimatedHelper');
 const ReactNative = require('../Renderer/shims/ReactNative');
 
@@ -18,7 +19,10 @@ const invariant = require('invariant');
 
 const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
 
-export type Mapping = {[key: string]: Mapping, ...} | AnimatedValue;
+export type Mapping =
+  | {[key: string]: Mapping, ...}
+  | AnimatedValue
+  | AnimatedValueXY;
 export type EventConfig = {
   listener?: ?Function,
   useNativeDriver: boolean,
@@ -41,6 +45,9 @@ function attachNativeEvent(
         nativeEventPath: path,
         animatedValueTag: value.__getNativeTag(),
       });
+    } else if (value instanceof AnimatedValueXY) {
+      traverse(value.x, path.concat('x'));
+      traverse(value.y, path.concat('y'));
     } else if (typeof value === 'object') {
       for (const key in value) {
         traverse(value[key], path.concat(key));
@@ -95,6 +102,13 @@ function validateMapping(argMapping, args) {
       );
       return;
     }
+    if (recMapping instanceof AnimatedValueXY) {
+      invariant(
+        typeof recEvt.x === 'number' && typeof recEvt.y === 'number',
+        'Bad mapping of event key ' + key + ', should be XY but got ' + recEvt,
+      );
+      return;
+    }
     if (typeof recEvt === 'number') {
       invariant(
         recMapping instanceof AnimatedValue,
@@ -204,22 +218,27 @@ class AnimatedEvent {
         validatedMapping = true;
       }
 
-      const traverse = (recMapping, recEvt, key) => {
+      const traverse = (recMapping, recEvt) => {
         if (recMapping instanceof AnimatedValue) {
           if (typeof recEvt === 'number') {
             recMapping.setValue(recEvt);
           }
+        } else if (recMapping instanceof AnimatedValueXY) {
+          if (typeof recEvt === 'object') {
+            traverse(recMapping.x, recEvt.x);
+            traverse(recMapping.y, recEvt.y);
+          }
         } else if (typeof recMapping === 'object') {
           for (const mappingKey in recMapping) {
             /* $FlowFixMe[prop-missing] (>=0.120.0) This comment suppresses an
              * error found when Flow v0.120 was deployed. To see the error,
              * delete this comment and run Flow. */
-            traverse(recMapping[mappingKey], recEvt[mappingKey], mappingKey);
+            traverse(recMapping[mappingKey], recEvt[mappingKey]);
           }
         }
       };
       this._argMapping.forEach((mapping, idx) => {
-        traverse(mapping, args[idx], 'arg' + idx);
+        traverse(mapping, args[idx]);
       });
 
       this._callListeners(...args);

package/Libraries/Animated/AnimatedMock.js

@@ -14,7 +14,6 @@ const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
 const AnimatedImplementation = require('./AnimatedImplementation');
 const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
 const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedProps = require('./nodes/AnimatedProps');
 const AnimatedValue = require('./nodes/AnimatedValue');
 const AnimatedValueXY = require('./nodes/AnimatedValueXY');
 
@@ -24,7 +23,6 @@ import type {EndCallback} 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';
 
 /**
  * Animations are a source of flakiness in snapshot testing. This mock replaces
@@ -123,10 +121,6 @@ const loop = function(
   return emptyAnimation;
 };
 
-const event = function(argMapping: Array<?Mapping>, config: EventConfig): any {
-  return null;
-};
-
 module.exports = {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
@@ -146,7 +140,7 @@ module.exports = {
   parallel,
   stagger,
   loop,
-  event,
+  event: AnimatedImplementation.event,
   createAnimatedComponent,
   attachNativeEvent,
   forkEvent: AnimatedImplementation.forkEvent,

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -24,7 +24,7 @@ import invariant from 'invariant';
 
 // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.
 const NativeAnimatedModule =
-  Platform.OS === 'ios' && global.RN$Bridgeless
+  Platform.OS === 'ios' && global.RN$Bridgeless === true
     ? NativeAnimatedTurboModule
     : NativeAnimatedNonTurboModule;
 
@@ -47,9 +47,9 @@ const API = {
     saveValueCallback: (value: number) => void,
   ): void {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
-    if (NativeAnimatedModule.getValue) {
+    API.queueOperation(() => {
       NativeAnimatedModule.getValue(tag, saveValueCallback);
-    }
+    });
   },
   setWaitingForIdentifier: function(id: string): void {
     waitingForQueuedOperations.add(id);

package/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) {

package/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));
     }
   }

package/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));
   }
 

package/Libraries/Animated/animations/TimingAnimation.js

@@ -48,6 +48,7 @@ let _easeInOut;
 function easeInOut() {
   if (!_easeInOut) {
     const Easing = require('../Easing');
+    // $FlowFixMe[method-unbinding]
     _easeInOut = Easing.inOut(Easing.ease);
   }
   return _easeInOut;
@@ -117,6 +118,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 +151,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));
     }
   }

package/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);

package/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;
+}

package/Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.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 useAnimatedProps from './useAnimatedProps';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import StyleSheet from '../StyleSheet/StyleSheet';
+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);
+
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = StyleSheet.compose(style, passthroughStyle);
+
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  });
+}

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -196,6 +196,12 @@ class AnimatedValue extends AnimatedWithChildren {
   resetAnimation(callback?: ?(value: number) => void): void {
     this.stopAnimation(callback);
     this._value = this._startingValue;
+    if (this.__isNative) {
+      NativeAnimatedAPI.setAnimatedNodeValue(
+        this.__getNativeTag(),
+        this._startingValue,
+      );
+    }
   }
 
   _onAnimatedValueUpdateReceived(value: number): void {

package/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());
         }

package/Libraries/Animated/useAnimatedProps.js

@@ -0,0 +1,211 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import AnimatedProps from './nodes/AnimatedProps';
+import {AnimatedEvent} from './AnimatedEvent';
+import useRefEffect from '../Utilities/useRefEffect';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+let animatedComponentNextId = 1;
+
+export default function useAnimatedProps<TProps: {...}, TInstance>(
+  props: TProps,
+): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+  const [, scheduleUpdate] = useReducer(count => count + 1, 0);
+  const onUpdateRef = useRef<?() => void>(null);
+
+  // TODO: Only invalidate `node` if animated props or `style` change. In the
+  // previous implementation, we permitted `style` to override props with the
+  // same name property name as styles, so we can probably continue doing that.
+  // The ordering of other props *should* not matter.
+  const node = useMemo(
+    () => new AnimatedProps(props, () => onUpdateRef.current?.()),
+    [props],
+  );
+  useAnimatedPropsLifecycle(node);
+
+  // TODO: This "effect" does three things:
+  //
+  //   1) Call `setNativeView`.
+  //   2) Update `onUpdateRef`.
+  //   3) Update listeners for `AnimatedEvent` props.
+  //
+  // Ideally, each of these would be separat "effects" so that they are not
+  // unnecessarily re-run when irrelevant dependencies change. For example, we
+  // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+  // the `AnimatedEvent` props change or `instance` changes.
+  //
+  // But there is no way to transparently compose three separate callback refs,
+  // so we just combine them all into one for now.
+  const refEffect = useCallback(
+    instance => {
+      // NOTE: This may be called more often than necessary (e.g. when `props`
+      // changes), but `setNativeView` already optimizes for that.
+      node.setNativeView(instance);
+
+      // NOTE: This callback is only used by the JavaScript animation driver.
+      onUpdateRef.current = () => {
+        if (
+          process.env.NODE_ENV === 'test' ||
+          typeof instance !== 'object' ||
+          typeof instance?.setNativeProps !== 'function' ||
+          isFabricInstance(instance)
+        ) {
+          // Schedule an update for this component to update `reducedProps`,
+          // but do not compute it immediately. If a parent also updated, we
+          // need to merge those new props in before updating.
+          scheduleUpdate();
+        } else if (!node.__isNative) {
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          instance.setNativeProps(node.__getAnimatedValue());
+        } else {
+          throw new Error(
+            'Attempting to run JS driven animation on animated node ' +
+              'that has been moved to "native" earlier by starting an ' +
+              'animation with `useNativeDriver: true`',
+          );
+        }
+      };
+
+      const target = getEventTarget(instance);
+      const events = [];
+
+      for (const propName in props) {
+        const propValue = props[propName];
+        if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+          propValue.__attach(target, propName);
+          events.push([propName, propValue]);
+        }
+      }
+
+      return () => {
+        onUpdateRef.current = null;
+
+        for (const [propName, propValue] of events) {
+          propValue.__detach(target, propName);
+        }
+      };
+    },
+    [props, node],
+  );
+  const callbackRef = useRefEffect<TInstance>(refEffect);
+
+  return [reduceAnimatedProps<TProps>(node), callbackRef];
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+): ReducedProps<TProps> {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValue(),
+    collapsable: false,
+  };
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ */
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  const [animatedComponentId] = useState(
+    () => `${animatedComponentNextId++}:animatedComponent`,
+  );
+
+  useLayoutEffect(() => {
+    NativeAnimatedHelper.API.setWaitingForIdentifier(animatedComponentId);
+  });
+
+  useEffect(() => {
+    NativeAnimatedHelper.API.unsetWaitingForIdentifier(animatedComponentId);
+  });
+
+  useLayoutEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    hasFabricHandle(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    hasFabricHandle(instance?.getNativeScrollRef?.()) ||
+    hasFabricHandle(instance?.getScrollResponder?.()?.getNativeScrollRef?.())
+  );
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function hasFabricHandle(instance: any): boolean {
+  // eslint-disable-next-line dot-notation
+  return instance?.['_internalInstanceHandle']?.stateNode?.canonical != null;
+}