react-native 0.66.2 → 0.67.0-rc.3

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/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;
 
@@ -355,7 +355,7 @@ function shouldUseNativeDriver(
           'animated module is missing. Falling back to JS-based animation. To ' +
           'resolve this, add `RCTAnimation` module to this app, or remove ' +
           '`useNativeDriver`. ' +
-          'Make sure to run `pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md',
+          'Make sure to run `bundle exec pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md',
       );
       _warnedMissingNativeAnimated = true;
     }

package/Libraries/Animated/components/AnimatedImage.js

@@ -15,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent((Image: $FlowFixMe), {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  (Image: $FlowFixMe),
+): AnimatedComponentType<
   React.ElementConfig<typeof Image>,
   React.ElementRef<typeof Image>,
 >);

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -22,9 +22,9 @@ const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
   <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(ScrollViewWithEventThrottle, {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  ScrollViewWithEventThrottle,
+): AnimatedComponentType<
   React.ElementConfig<typeof ScrollView>,
   React.ElementRef<typeof ScrollView>,
 >);

package/Libraries/Animated/components/AnimatedText.js

@@ -15,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent((Text: $FlowFixMe), {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  (Text: $FlowFixMe),
+): AnimatedComponentType<
   React.ElementConfig<typeof Text>,
   React.ElementRef<typeof Text>,
 >);

package/Libraries/Animated/components/AnimatedView.js

@@ -15,9 +15,7 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(View, {
-  collapsable: true,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(View): AnimatedComponentType<
   React.ElementConfig<typeof View>,
   React.ElementRef<typeof View>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -39,13 +39,8 @@ export type AnimatedComponentType<
   Instance,
 >;
 
-type AnimatedComponentOptions = {
-  collapsable?: boolean,
-};
-
 function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   Component: React.AbstractComponent<Props, Instance>,
-  options?: AnimatedComponentOptions,
 ): AnimatedComponentType<Props, Instance> {
   invariant(
     typeof Component !== 'function' ||
@@ -210,39 +205,13 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
         this.props.passthroughAnimatedPropExplicitValues || {};
       const mergedStyle = {...style, ...passthruStyle};
 
-      // On Fabric, we always want to ensure the container Animated View is *not*
-      // flattened.
-      // Because we do not get a host component ref immediately and thus cannot
-      // do a proper Fabric vs non-Fabric detection immediately, we default to assuming
-      // that Fabric *is* enabled until we know otherwise.
-      // Thus, in Fabric, this view will never be flattened. In non-Fabric, the view will
-      // not be flattened during the initial render but may be flattened in the second render
-      // and onwards.
-      const forceNativeIdFabric =
-        (this._component == null &&
-          (options?.collapsable === false || props.collapsable !== true)) ||
-        this._isFabric();
-
-      const forceNativeId =
-        props.collapsable ??
-        (this._propsAnimated.__isNative ||
-          forceNativeIdFabric ||
-          options?.collapsable === false);
-      // 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
-      // go through the NativeViewHierarchyManager since it operates on the shadow
-      // thread. TODO: T68258846
-      const collapsableProps = forceNativeId
-        ? {
-            nativeID: props.nativeID ?? 'animatedComponent',
-            collapsable: false,
-          }
-        : {};
+      // Force `collapsable` to be false so that native view is not flattened.
+      // Flattened views cannot be accurately referenced by a native driver.
       return (
         <Component
           {...props}
           {...passthruProps}
-          {...collapsableProps}
+          collapsable={false}
           style={mergedStyle}
           ref={this._setComponentRef}
         />

package/Libraries/Components/Button.js

@@ -145,6 +145,7 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+  accessibilityHint?: ?string,
 |}>;
 
 /**
@@ -275,6 +276,7 @@ class Button extends React.Component<ButtonProps> {
       testID,
       accessible,
       accessibilityActions,
+      accessibilityHint,
       onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -317,6 +319,7 @@ class Button extends React.Component<ButtonProps> {
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -117,10 +117,6 @@ type Props = $ReadOnly<{|
  * source of truth.
  */
 class DatePickerIOS extends React.Component<Props> {
-  static DefaultProps: {|mode: $TEMPORARY$string<'datetime'>|} = {
-    mode: 'datetime',
-  };
-
   _picker: ?React.ElementRef<typeof RCTDatePickerNativeComponent> = null;
 
   componentDidUpdate() {
@@ -142,6 +138,7 @@ class DatePickerIOS extends React.Component<Props> {
 
   render(): React.Node {
     const props = this.props;
+    const mode = props.mode ?? 'datetime';
     invariant(
       props.date || props.initialDate,
       'A selected date or initial date should be specified.',
@@ -153,7 +150,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={getHeight(props.pickerStyle, props.mode)}
+          style={getHeight(props.pickerStyle, mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -172,7 +169,7 @@ class DatePickerIOS extends React.Component<Props> {
           minimumDate={
             props.minimumDate ? props.minimumDate.getTime() : undefined
           }
-          mode={props.mode}
+          mode={mode}
           minuteInterval={props.minuteInterval}
           timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
           onChange={this._onChange}

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -56,7 +56,7 @@ type Props = $ReadOnly<{|
    * );
    * ```
    */
-  drawerBackgroundColor: ColorValue,
+  drawerBackgroundColor?: ?ColorValue,
 
   /**
    * Specifies the side of the screen from which the drawer will slide in.
@@ -161,11 +161,6 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
     return {Left: 'left', Right: 'right'};
   }
-  static defaultProps: {|
-    drawerBackgroundColor: 'white',
-  |} = {
-    drawerBackgroundColor: 'white',
-  };
 
   _nativeRef = React.createRef<
     React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
@@ -175,6 +170,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
   render(): React.Node {
     const {
+      drawerBackgroundColor = 'white',
       onDrawerStateChanged,
       renderNavigationView,
       onDrawerOpen,
@@ -189,7 +185,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
           styles.drawerSubview,
           {
             width: this.props.drawerWidth,
-            backgroundColor: this.props.drawerBackgroundColor,
+            backgroundColor: drawerBackgroundColor,
           },
         ]}
         collapsable={false}>
@@ -220,6 +216,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       <AndroidDrawerLayoutNativeComponent
         {...props}
         ref={this._nativeRef}
+        drawerBackgroundColor={drawerBackgroundColor}
         drawerWidth={this.props.drawerWidth}
         drawerPosition={this.props.drawerPosition}
         drawerLockMode={this.props.drawerLockMode}

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -31,6 +31,7 @@ const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> = NativeC
       scrollPerfTag: true,
       sendMomentumEvents: true,
       showsHorizontalScrollIndicator: true,
+      snapToAlignment: true,
       snapToEnd: true,
       snapToInterval: true,
       snapToStart: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -346,17 +346,6 @@ type IOSProps = $ReadOnly<{|
    * The default value is true.
    */
   showsHorizontalScrollIndicator?: ?boolean,
-  /**
-   * When `snapToInterval` is set, `snapToAlignment` will define the relationship
-   * of the snapping to the scroll view.
-   *
-   *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
-   *   - `'center'` will align the snap in the center
-   *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
-   *
-   * @platform ios
-   */
-  snapToAlignment?: ?('start' | 'center' | 'end'),
   /**
    * The current scale of the scroll view content. The default value is 1.0.
    * @platform ios
@@ -597,6 +586,15 @@ export type Props = $ReadOnly<{|
    * for example when you want your list to have an animated hidable header.
    */
   StickyHeaderComponent?: StickyHeaderComponentType,
+  /**
+   * When `snapToInterval` is set, `snapToAlignment` will define the relationship
+   * of the snapping to the scroll view.
+   *
+   *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
+   *   - `'center'` will align the snap in the center
+   *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
+   */
+  snapToAlignment?: ?('start' | 'center' | 'end'),
   /**
    * When set, causes the scroll view to stop at multiples of the value of
    * `snapToInterval`. This can be used for paginating through children
@@ -1178,11 +1176,6 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
-    if (Platform.OS === 'android') {
-      if (this.props.keyboardDismissMode === 'on-drag' && this._isTouching) {
-        dismissKeyboard();
-      }
-    }
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
@@ -1299,6 +1292,14 @@ class ScrollView extends React.Component<Props, State> {
    */
   _handleScrollBeginDrag: (e: ScrollEvent) => void = (e: ScrollEvent) => {
     FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
+
+    if (
+      Platform.OS === 'android' &&
+      this.props.keyboardDismissMode === 'on-drag'
+    ) {
+      dismissKeyboard();
+    }
+
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };