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

package/Libraries/Components/TextInput/TextInput.js

@@ -4,30 +4,35 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
+import * as React from 'react';
 
-const DeprecatedTextInputPropTypes = require('../../DeprecatedPropTypes/DeprecatedTextInputPropTypes');
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const TextAncestor = require('../../Text/TextAncestor');
-const TextInputState = require('./TextInputState');
-const TouchableWithoutFeedback = require('../Touchable/TouchableWithoutFeedback');
+import DeprecatedTextInputPropTypes from '../../DeprecatedPropTypes/DeprecatedTextInputPropTypes';
 
-const invariant = require('invariant');
-const nullthrows = require('nullthrows');
-const setAndForwardRef = require('../../Utilities/setAndForwardRef');
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {
+  type TextStyleProp,
+  type ViewStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import TextAncestor from '../../Text/TextAncestor';
+import TextInputState from './TextInputState';
+import invariant from 'invariant';
+import nullthrows from 'nullthrows';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
+
+import usePressability from '../../Pressability/usePressability';
 
-import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {SyntheticEvent, ScrollEvent} from '../../Types/CoreEventTypes';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {
+  SyntheticEvent,
+  ScrollEvent,
+  PressEvent,
+} from '../../Types/CoreEventTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
@@ -141,10 +146,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -326,19 +331,43 @@ type AndroidProps = $ReadOnly<{|
    *
    * @platform android
    */
-  autoCompleteType?: ?(
+  autoComplete?: ?(
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | 'name-family'
+    | 'name-given'
+    | 'name-middle'
+    | 'name-middle-initial'
+    | 'name-prefix'
+    | 'name-suffix'
     | 'password'
+    | 'password-new'
+    | 'postal-address'
+    | 'postal-address-country'
+    | 'postal-address-extended'
+    | 'postal-address-extended-postal-code'
+    | 'postal-address-locality'
+    | 'postal-address-region'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off'
   ),
 
@@ -496,6 +525,7 @@ export type Props = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
@@ -503,7 +533,6 @@ export type Props = $ReadOnly<{|
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`
@@ -842,6 +871,8 @@ function InternalTextInput(props: Props): React.Node {
   // Therefore, we ignore selections and pass them through until the selection event has
   // been sent.
   // Note that this mitigation is NOT needed for Fabric.
+  // discovered when upgrading react-hooks
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let selection: ?Selection =
     props.selection == null
       ? null
@@ -866,13 +897,14 @@ function InternalTextInput(props: Props): React.Node {
     selection = null;
   }
 
-  let viewCommands: TextInputNativeCommands<HostComponent<any>>;
+  let viewCommands;
   if (AndroidTextInputCommands) {
     viewCommands = AndroidTextInputCommands;
   } else {
-    viewCommands = props.multiline
-      ? RCTMultilineTextInputNativeCommands
-      : RCTSinglelineTextInputNativeCommands;
+    viewCommands =
+      props.multiline === true
+        ? RCTMultilineTextInputNativeCommands
+        : RCTSinglelineTextInputNativeCommands;
   }
 
   const text =
@@ -1000,12 +1032,6 @@ function InternalTextInput(props: Props): React.Node {
     },
   });
 
-  const _onPress = (event: PressEvent) => {
-    if (props.editable || props.editable === undefined) {
-      nullthrows(inputRef.current).focus();
-    }
-  };
-
   const _onChange = (event: ChangeEvent) => {
     const text = event.nativeEvent.text;
     props.onChange && props.onChange(event);
@@ -1059,36 +1085,68 @@ function InternalTextInput(props: Props): React.Node {
   };
 
   let textInput = null;
-  let additionalTouchableProps: {|
-    rejectResponderTermination?: $PropertyType<
-      Props,
-      'rejectResponderTermination',
-    >,
-    // This is a hack to let Flow know we want an exact object
-  |} = {...null};
 
   // The default value for `blurOnSubmit` is true for single-line fields and
   // false for multi-line fields.
   const blurOnSubmit = props.blurOnSubmit ?? !props.multiline;
 
-  if (Platform.OS === 'ios') {
-    const RCTTextInputView = props.multiline
-      ? RCTMultilineTextInputView
-      : RCTSinglelineTextInputView;
+  const accessible = props.accessible !== false;
+  const focusable = props.focusable !== false;
+
+  const config = React.useMemo(
+    () => ({
+      onPress: (event: PressEvent) => {
+        if (props.editable !== false) {
+          if (inputRef.current != null) {
+            inputRef.current.focus();
+          }
+        }
+      },
+      onPressIn: props.onPressIn,
+      onPressOut: props.onPressOut,
+      cancelable:
+        Platform.OS === 'ios' ? !props.rejectResponderTermination : null,
+    }),
+    [
+      props.editable,
+      props.onPressIn,
+      props.onPressOut,
+      props.rejectResponderTermination,
+    ],
+  );
 
-    const style = props.multiline
-      ? [styles.multilineInput, props.style]
-      : props.style;
+  // Hide caret during test runs due to a flashing caret
+  // makes screenshot tests flakey
+  let caretHidden = props.caretHidden;
+  if (Platform.isTesting) {
+    caretHidden = true;
+  }
+
+  // TextInput handles onBlur and onFocus events
+  // so omitting onBlur and onFocus pressability handlers here.
+  const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
+
+  if (Platform.OS === 'ios') {
+    const RCTTextInputView =
+      props.multiline === true
+        ? RCTMultilineTextInputView
+        : RCTSinglelineTextInputView;
 
-    additionalTouchableProps.rejectResponderTermination =
-      props.rejectResponderTermination;
+    const style =
+      props.multiline === true
+        ? [styles.multilineInput, props.style]
+        : props.style;
 
     textInput = (
       <RCTTextInputView
         ref={_setNativeRef}
         {...props}
+        {...eventHandlers}
+        accessible={accessible}
         blurOnSubmit={blurOnSubmit}
+        caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
+        focusable={focusable}
         mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
         onChange={_onChange}
@@ -1105,10 +1163,11 @@ function InternalTextInput(props: Props): React.Node {
   } else if (Platform.OS === 'android') {
     const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
+    const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
     invariant(
-      !(props.value && childCount),
+      !(props.value != null && childCount),
       'Cannot specify both value and children.',
     );
     if (childCount > 1) {
@@ -1116,23 +1175,38 @@ function InternalTextInput(props: Props): React.Node {
     }
 
     textInput = (
-      /* $FlowFixMe the types for AndroidTextInput don't match up exactly with
-        the props for TextInput. This will need to get fixed */
+      /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
+       * exactly with the props for TextInput. This will need to get fixed */
+      /* $FlowFixMe[incompatible-type] the types for AndroidTextInput don't
+       * match up exactly with the props for TextInput. This will need to get
+       * fixed */
+      /* $FlowFixMe[incompatible-type-arg] the types for AndroidTextInput don't
+       * match up exactly with the props for TextInput. This will need to get
+       * fixed */
       <AndroidTextInput
         ref={_setNativeRef}
         {...props}
+        {...eventHandlers}
+        accessible={accessible}
         autoCapitalize={autoCapitalize}
         blurOnSubmit={blurOnSubmit}
+        caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
+        focusable={focusable}
         mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
         onChange={_onChange}
         onFocus={_onFocus}
-        /* $FlowFixMe the types for AndroidTextInput don't match up exactly
-         * with the props for TextInput. This will need to get fixed */
+        /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match
+         * up exactly with the props for TextInput. This will need to get fixed
+         */
+        /* $FlowFixMe[incompatible-type-arg] the types for AndroidTextInput
+         * don't match up exactly with the props for TextInput. This will need
+         * to get fixed */
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
+        placeholder={placeholder}
         selection={selection}
         style={style}
         text={text}
@@ -1141,22 +1215,7 @@ function InternalTextInput(props: Props): React.Node {
     );
   }
   return (
-    <TextAncestor.Provider value={true}>
-      <TouchableWithoutFeedback
-        onLayout={props.onLayout}
-        onPress={_onPress}
-        onPressIn={props.onPressIn}
-        onPressOut={props.onPressOut}
-        accessible={props.accessible}
-        accessibilityLabel={props.accessibilityLabel}
-        accessibilityRole={props.accessibilityRole}
-        accessibilityState={props.accessibilityState}
-        nativeID={props.nativeID}
-        testID={props.testID}
-        {...additionalTouchableProps}>
-        {textInput}
-      </TouchableWithoutFeedback>
-    </TextAncestor.Provider>
+    <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
   );
 }
 
@@ -1186,10 +1245,9 @@ const ExportedForwardRef: React.AbstractComponent<
 });
 
 // TODO: Deprecate this
-// $FlowFixMe
 ExportedForwardRef.propTypes = DeprecatedTextInputPropTypes;
 
-// $FlowFixMe
+// $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
 
@@ -1217,6 +1275,7 @@ const styles = StyleSheet.create({
   },
 });
 
+// $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
 module.exports = ((ExportedForwardRef: any): React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   $ReadOnly<{|

package/Libraries/Components/TextInput/TextInputNativeCommands.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 import type {Int32} from '../../Types/CodegenTypes';

package/Libraries/Components/TextInput/TextInputState.js

@@ -12,8 +12,6 @@
 // TextInputs. All calls relating to the keyboard should be funneled
 // through here.
 
-'use strict';
-
 const React = require('react');
 const Platform = require('../../Utilities/Platform');
 const {findNodeHandle} = require('../../Renderer/shims/ReactNative');
@@ -112,7 +110,7 @@ function blurTextInput(textField: ?ComponentRef) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
-        'focusTextInput must be called with a host component. Passing a react tag is deprecated.',
+        'blurTextInput must be called with a host component. Passing a react tag is deprecated.',
       );
     }
 

package/Libraries/Components/ToastAndroid/NativeToastAndroid.js

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

package/Libraries/Components/ToastAndroid/ToastAndroid.android.js

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

package/Libraries/Components/Touchable/BoundingDimensions.js

@@ -8,8 +8,7 @@
  */
 
 'use strict';
-
-const PooledClass = require('./PooledClass');
+import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
 

package/Libraries/Components/Touchable/PooledClass.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 /**
  * Static poolers. Several custom versions for each potential number of

package/Libraries/Components/Touchable/Position.js

@@ -8,8 +8,7 @@
  */
 
 'use strict';
-
-const PooledClass = require('./PooledClass');
+import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
 

package/Libraries/Components/Touchable/Touchable.js

@@ -8,19 +8,16 @@
  * @format
  */
 
-'use strict';
+import * as React from 'react';
+import BoundingDimensions from './BoundingDimensions';
+import Platform from '../../Utilities/Platform';
+import Position from './Position';
+import UIManager from '../../ReactNative/UIManager';
+import SoundManager from '../Sound/SoundManager';
 
-const BoundingDimensions = require('./BoundingDimensions');
-const Platform = require('../../Utilities/Platform');
-const Position = require('./Position');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const UIManager = require('../../ReactNative/UIManager');
-const View = require('../View/View');
-const SoundManager = require('../Sound/SoundManager');
-
-const normalizeColor = require('../../StyleSheet/normalizeColor');
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 
@@ -421,6 +418,7 @@ const TouchableMixin = {
    * @param {SyntheticEvent} e Synthetic event from event system.
    *
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderGrant: function(e: PressEvent) {
     const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
@@ -462,6 +460,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderRelease` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderRelease: function(e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_RELEASE, e);
@@ -470,6 +469,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderTerminate` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderTerminate: function(e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_TERMINATED, e);
@@ -478,6 +478,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderMove` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderMove: function(e: PressEvent) {
     // Measurement may not have returned yet.
     if (!this.state.touchable.positionOnActivate) {
@@ -563,6 +564,7 @@ const TouchableMixin = {
    * element that was blurred just prior to this. This can be overridden when
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleFocus: function(e: Event) {
     this.props.onFocus && this.props.onFocus(e);
   },
@@ -575,6 +577,7 @@ const TouchableMixin = {
    * This can be overridden when using
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleBlur: function(e: Event) {
     this.props.onBlur && this.props.onBlur(e);
   },
@@ -668,6 +671,7 @@ const TouchableMixin = {
     }
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleQueryLayout: function(
     l: number,
     t: number,
@@ -694,11 +698,13 @@ const TouchableMixin = {
     );
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleDelay: function(e: PressEvent) {
     this.touchableDelayTimeout = null;
     this._receiveSignal(Signals.DELAY, e);
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleLongDelay: function(e: PressEvent) {
     this.longPressDelayTimeout = null;
     const curState = this.state.touchable.touchState;
@@ -718,6 +724,7 @@ const TouchableMixin = {
    * @throws Error if invalid state transition or unrecognized signal.
    * @sideeffects
    */
+  // $FlowFixMe[signature-verification-failure]
   _receiveSignal: function(signal: Signal, e: PressEvent) {
     const responderID = this.state.touchable.responderID;
     const curState = this.state.touchable.touchState;
@@ -769,6 +776,7 @@ const TouchableMixin = {
     );
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _savePressInLocation: function(e: PressEvent) {
     const touch = extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
@@ -800,6 +808,7 @@ const TouchableMixin = {
    * @param {Event} e Native event.
    * @sideeffects
    */
+  // $FlowFixMe[signature-verification-failure]
   _performSideEffectsForTransition: function(
     curState: State,
     nextState: State,
@@ -861,11 +870,13 @@ const TouchableMixin = {
     this.touchableDelayTimeout = null;
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _startHighlight: function(e: PressEvent) {
     this._savePressInLocation(e);
     this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _endHighlight: function(e: PressEvent) {
     if (this.touchableHandleActivePressOut) {
       if (
@@ -899,7 +910,6 @@ TouchableMixin.withoutDefaultFocusAndBlur = TouchableMixinWithoutDefaultFocusAnd
 
 const Touchable = {
   Mixin: TouchableMixin,
-  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
    */
@@ -907,54 +917,15 @@ const Touchable = {
     color,
     hitSlop,
   }: {
-    color: string | number,
+    color: ColorValue,
     hitSlop: EdgeInsetsProp,
     ...
   }): null | React.Node => {
-    if (!Touchable.TOUCH_TARGET_DEBUG) {
-      return null;
-    }
-    if (!__DEV__) {
-      throw Error(
-        'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!',
-      );
-    }
-    const debugHitSlopStyle = {};
-    hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
-    for (const key in hitSlop) {
-      debugHitSlopStyle[key] = -hitSlop[key];
-    }
-    const normalizedColor = normalizeColor(color);
-    if (typeof normalizedColor !== 'number') {
-      return null;
+    if (__DEV__) {
+      return <PressabilityDebugView color={color} hitSlop={hitSlop} />;
     }
-    const hexColor =
-      '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);
-    return (
-      <View
-        pointerEvents="none"
-        style={[
-          styles.debug,
-          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
-           * an error found when Flow v0.111 was deployed. To see the error,
-           * delete this comment and run Flow. */
-          {
-            borderColor: hexColor.slice(0, -2) + '55', // More opaque
-            backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
-            ...debugHitSlopStyle,
-          },
-        ]}
-      />
-    );
+    return null;
   },
 };
 
-const styles = StyleSheet.create({
-  debug: {
-    position: 'absolute',
-    borderWidth: 1,
-    borderStyle: 'dashed',
-  },
-});
-
 module.exports = Touchable;

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';