react-native 0.0.0-201c10733 → 0.0.0-268efb102

package/Libraries/Components/Button.js

@@ -11,18 +11,21 @@
 
 'use strict';
 
-const Platform = require('../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const TouchableNativeFeedback = require('./Touchable/TouchableNativeFeedback');
-const TouchableOpacity = require('./Touchable/TouchableOpacity');
-const View = require('./View/View');
-
-const invariant = require('invariant');
-
+import * as React from 'react';
+import Platform from '../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
+import Text from '../Text/Text';
+import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
+import TouchableOpacity from './Touchable/TouchableOpacity';
+import View from './View/View';
+import invariant from 'invariant';
+
+import type {
+  AccessibilityState,
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+} from './View/ViewAccessibility';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -134,6 +137,15 @@ type ButtonProps = $ReadOnly<{|
     Used to locate this view in end-to-end tests.
    */
   testID?: ?string,
+
+  /**
+   * Accessibility props.
+   */
+  accessible?: ?boolean,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  accessibilityState?: ?AccessibilityState,
+  accessibilityHint?: ?string,
 |}>;
 
 /**
@@ -148,7 +160,7 @@ type ButtonProps = $ReadOnly<{|
   [button:examples].
 
   [button:source]:
-  https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js
+  https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
 
   [button:examples]:
   https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
@@ -261,8 +273,11 @@ class Button extends React.Component<ButtonProps> {
       nextFocusLeft,
       nextFocusRight,
       nextFocusUp,
-      disabled,
       testID,
+      accessible,
+      accessibilityActions,
+      accessibilityHint,
+      onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
@@ -273,12 +288,22 @@ class Button extends React.Component<ButtonProps> {
         buttonStyles.push({backgroundColor: color});
       }
     }
-    const accessibilityState = {};
+
+    const disabled =
+      this.props.disabled != null
+        ? this.props.disabled
+        : this.props.accessibilityState?.disabled;
+
+    const accessibilityState =
+      disabled !== this.props.accessibilityState?.disabled
+        ? {...this.props.accessibilityState, disabled}
+        : this.props.accessibilityState;
+
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
-      accessibilityState.disabled = true;
     }
+
     invariant(
       typeof title === 'string',
       'The title prop of a Button must be a string',
@@ -287,9 +312,14 @@ class Button extends React.Component<ButtonProps> {
       Platform.OS === 'android' ? title.toUpperCase() : title;
     const Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
     return (
       <Touchable
+        accessible={accessible}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/Clipboard/Clipboard.js

@@ -8,8 +8,6 @@
  * @flow strict
  */
 
-'use strict';
-
 import NativeClipboard from './NativeClipboard';
 
 /**

package/Libraries/Components/Clipboard/NativeClipboard.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

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

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummyDatePickerIOS extends React.Component {
   render() {

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

@@ -10,16 +10,13 @@
 
 // This is a controlled component version of RCTDatePickerIOS.
 
-'use strict';
-
+import * as React from 'react';
 import RCTDatePickerNativeComponent, {
   Commands as DatePickerCommands,
 } from './RCTDatePickerNativeComponent';
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
-
-const invariant = require('invariant');
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import invariant from 'invariant';
 
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
@@ -103,6 +100,13 @@ type Props = $ReadOnly<{|
    * instance, to show times in Pacific Standard Time, pass -7 * 60.
    */
   timeZoneOffsetInMinutes?: ?number,
+
+  /**
+   * The date picker style
+   * This is only available on devices with iOS 14.0 and later.
+   * 'spinner' is the default style if this prop isn't set.
+   */
+  pickerStyle?: ?('compact' | 'spinner' | 'inline'),
 |}>;
 
 /**
@@ -113,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() {
@@ -138,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.',
@@ -149,7 +150,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={styles.datePickerIOS}
+          style={getHeight(props.pickerStyle, mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -168,22 +169,57 @@ 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}
           onStartShouldSetResponder={() => true}
           onResponderTerminationRequest={() => false}
+          pickerStyle={props.pickerStyle}
         />
       </View>
     );
   }
 }
 
+const inlineHeightForDatePicker = 318.5;
+const inlineHeightForTimePicker = 49.5;
+const compactHeight = 40;
+const spinnerHeight = 216;
+
 const styles = StyleSheet.create({
   datePickerIOS: {
-    height: 216,
+    height: spinnerHeight,
+  },
+  datePickerIOSCompact: {
+    height: compactHeight,
+  },
+  datePickerIOSInline: {
+    height: inlineHeightForDatePicker + inlineHeightForTimePicker * 2,
+  },
+  datePickerIOSInlineDate: {
+    height: inlineHeightForDatePicker + inlineHeightForTimePicker,
+  },
+  datePickerIOSInlineTime: {
+    height: inlineHeightForTimePicker,
   },
 });
 
+function getHeight(pickerStyle, mode) {
+  if (pickerStyle === 'compact') {
+    return styles.datePickerIOSCompact;
+  }
+  if (pickerStyle === 'inline') {
+    switch (mode) {
+      case 'date':
+        return styles.datePickerIOSInlineDate;
+      case 'time':
+        return styles.datePickerIOSInlineTime;
+      default:
+        return styles.datePickerIOSInline;
+    }
+  }
+  return styles.datePickerIOS;
+}
+
 module.exports = DatePickerIOS;

package/Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
@@ -39,6 +37,7 @@ type NativeProps = $ReadOnly<{|
   mode?: WithDefault<'date' | 'time' | 'datetime', 'date'>,
   onChange?: ?BubblingEventHandler<Event>,
   timeZoneOffsetInMinutes?: ?Float,
+  pickerStyle?: WithDefault<'compact' | 'spinner' | 'inline', 'spinner'>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

package/Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {

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

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import StatusBar from '../StatusBar/StatusBar';
@@ -58,7 +56,7 @@ type Props = $ReadOnly<{|
    * );
    * ```
    */
-  drawerBackgroundColor: ColorValue,
+  drawerBackgroundColor?: ?ColorValue,
 
   /**
    * Specifies the side of the screen from which the drawer will slide in.
@@ -163,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>,
@@ -177,6 +170,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
   render(): React.Node {
     const {
+      drawerBackgroundColor = 'white',
       onDrawerStateChanged,
       renderNavigationView,
       onDrawerOpen,
@@ -191,7 +185,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
           styles.drawerSubview,
           {
             width: this.props.drawerWidth,
-            backgroundColor: this.props.drawerBackgroundColor,
+            backgroundColor: drawerBackgroundColor,
           },
         ]}
         collapsable={false}>
@@ -222,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/Keyboard/Keyboard.js

@@ -8,13 +8,12 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
+import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
-import type EmitterSubscription from '../../vendor/emitter/_EmitterSubscription';
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 
 export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
 
@@ -103,10 +102,12 @@ type KeyboardEventDefinitions = {
  *```
  */
 
-class Keyboard extends NativeEventEmitter<KeyboardEventDefinitions> {
-  constructor() {
-    super(NativeKeyboardObserver);
-  }
+class Keyboard {
+  _emitter: NativeEventEmitter<KeyboardEventDefinitions> = new NativeEventEmitter(
+    // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+    // If you want to use the native module on other platforms, please remove this condition and test its behavior
+    Platform.OS !== 'ios' ? null : NativeKeyboardObserver,
+  );
 
   /**
    * The `addListener` function connects a JavaScript function to an identified native
@@ -134,22 +135,20 @@ class Keyboard extends NativeEventEmitter<KeyboardEventDefinitions> {
   addListener<K: $Keys<KeyboardEventDefinitions>>(
     eventType: K,
     listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
-    context: $FlowFixMe,
-  ): EmitterSubscription<KeyboardEventDefinitions, K> {
-    return super.addListener(eventType, listener);
+    context?: mixed,
+  ): EventSubscription {
+    return this._emitter.addListener(eventType, listener);
   }
 
   /**
-   * Removes a specific listener.
-   *
-   * @param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.
-   * @param {function} callback function to be called when the event fires.
+   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
    */
-  removeListener<K: $Keys<KeyboardEventDefinitions>>(
+  removeEventListener<K: $Keys<KeyboardEventDefinitions>>(
     eventType: K,
     listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
   ): void {
-    super.removeListener(eventType, listener);
+    // NOTE: This will report a deprecation notice via `console.error`.
+    this._emitter.removeListener(eventType, listener);
   }
 
   /**
@@ -158,7 +157,7 @@ class Keyboard extends NativeEventEmitter<KeyboardEventDefinitions> {
    * @param {string} eventType The native event string listeners are watching which will be removed.
    */
   removeAllListeners<K: $Keys<KeyboardEventDefinitions>>(eventType: ?K): void {
-    super.removeAllListeners(eventType);
+    this._emitter.removeAllListeners(eventType);
   }
 
   /**

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -5,17 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict-local
  */
 
-'use strict';
-
-const Keyboard = require('./Keyboard');
-const LayoutAnimation = require('../../LayoutAnimation/LayoutAnimation');
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import Keyboard from './Keyboard';
+import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
+import Platform from '../../Utilities/Platform';
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
@@ -43,13 +41,13 @@ type Props = $ReadOnly<{|
    * Controls whether this `KeyboardAvoidingView` instance should take effect.
    * This is useful when more than one is on the screen. Defaults to true.
    */
-  enabled: ?boolean,
+  enabled?: ?boolean,
 
   /**
    * Distance between the top of the user screen and the React Native view. This
    * may be non-zero in some cases. Defaults to 0.
    */
-  keyboardVerticalOffset: number,
+  keyboardVerticalOffset?: number,
 |}>;
 
 type State = {|
@@ -61,15 +59,10 @@ type State = {|
  * adjusting its height, position, or bottom padding.
  */
 class KeyboardAvoidingView extends React.Component<Props, State> {
-  static defaultProps: {|enabled: boolean, keyboardVerticalOffset: number|} = {
-    enabled: true,
-    keyboardVerticalOffset: 0,
-  };
-
   _frame: ?ViewLayout = null;
   _keyboardEvent: ?KeyboardEvent = null;
   _subscriptions: Array<EventSubscription> = [];
-  viewRef: {current: React.ElementRef<any> | null, ...};
+  viewRef: {current: React.ElementRef<typeof View> | null, ...};
   _initialFrameHeight: number = 0;
 
   constructor(props: Props) {
@@ -84,7 +77,8 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       return 0;
     }
 
-    const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset;
+    const keyboardY =
+      keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
 
     // Calculate the displacement needed for the view such that it
     // no longer overlaps with the keyboard
@@ -159,12 +153,13 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       behavior,
       children,
       contentContainerStyle,
-      enabled,
-      keyboardVerticalOffset,
+      enabled = true,
+      // eslint-disable-next-line no-unused-vars
+      keyboardVerticalOffset = 0,
       style,
       ...props
     } = this.props;
-    const bottomHeight = enabled ? this.state.bottom : 0;
+    const bottomHeight = enabled === true ? this.state.bottom : 0;
     switch (behavior) {
       case 'height':
         let heightStyle;
@@ -229,4 +224,4 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   }
 }
 
-module.exports = KeyboardAvoidingView;
+export default KeyboardAvoidingView;

package/Libraries/Components/Keyboard/NativeKeyboardObserver.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

package/Libraries/Components/MaskedView/MaskedViewIOS.ios.js

@@ -8,9 +8,9 @@
  * @flow
  */
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 
 import type {ViewProps} from '../View/ViewPropTypes';
 import RCTMaskedViewNativeComponent from './RCTMaskedViewNativeComponent';

package/Libraries/Components/Pressable/Pressable.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 import {useMemo, useState, useRef, useImperativeHandle} from 'react';
 import useAndroidRippleForView, {
@@ -53,6 +51,12 @@ type Props = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
 
+  /**
+   * Whether a press gesture can be interrupted by a parent gesture such as a
+   * scroll event. Defaults to true.
+   */
+  cancelable?: ?boolean,
+
   /**
    * Either children or a render prop that receives a boolean reflecting whether
    * the component is currently pressed.
@@ -83,27 +87,27 @@ type Props = $ReadOnly<{|
   /**
    * Called when this view's layout changes.
    */
-  onLayout?: ?(event: LayoutEvent) => void,
+  onLayout?: ?(event: LayoutEvent) => mixed,
 
   /**
    * Called when a long-tap gesture is detected.
    */
-  onLongPress?: ?(event: PressEvent) => void,
+  onLongPress?: ?(event: PressEvent) => mixed,
 
   /**
    * Called when a single tap gesture is detected.
    */
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: PressEvent) => mixed,
 
   /**
    * Called when a touch is engaged before `onPress`.
    */
-  onPressIn?: ?(event: PressEvent) => void,
+  onPressIn?: ?(event: PressEvent) => mixed,
 
   /**
    * Called when a touch is released before `onPress`.
    */
-  onPressOut?: ?(event: PressEvent) => void,
+  onPressOut?: ?(event: PressEvent) => mixed,
 
   /**
    * Either view styles or a function that receives a boolean reflecting whether
@@ -146,6 +150,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible,
     android_disableSound,
     android_ripple,
+    cancelable,
     children,
     delayLongPress,
     disabled,
@@ -170,16 +175,23 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const hitSlop = normalizeRect(props.hitSlop);
 
+  const accessibilityState =
+    disabled != null
+      ? {...props.accessibilityState, disabled}
+      : props.accessibilityState;
+
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
+    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };
 
   const config = useMemo(
     () => ({
+      cancelable,
       disabled,
       hitSlop,
       pressRectOffset: pressRetentionOffset,
@@ -211,6 +223,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     [
       android_disableSound,
       android_rippleConfig,
+      cancelable,
       delayLongPress,
       disabled,
       hitSlop,