@react-native-oh/react-native-harmony 0.72.86 → 0.77.18-1

package/Libraries/Components/TextInput/{TextInput.harmony.js → TextInput.js}

@@ -7,37 +7,45 @@
  * @flow strict-local
  * @format
  */
-const OS = "ios" // RNOH: patch - replaced occurrences Platform.OS with OS
 
-// RNOH: patch - updated imports
-import type {HostComponent} from 'react-native/Libraries/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
   ScrollEvent,
   SyntheticEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
-import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {TextInputType} from 'react-native/Libraries/Components/TextInput/TextInput.flow';
+} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+import type {TextInputType} from './TextInput.flow';
 
-import usePressability from 'react-native/Libraries/Pressability/usePressability';
-import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import usePressability from '../../Pressability/usePressability';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {
   type ColorValue,
   type TextStyleProp,
   type ViewStyleProp,
-} from 'react-native/Libraries/StyleSheet/StyleSheet';
-import Text from 'react-native/Libraries/Text/Text';
-import TextAncestor from 'react-native/Libraries/Text/TextAncestor';
+} from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import TextAncestor from '../../Text/TextAncestor';
 import Platform from '../../Utilities/Platform';
-import useMergeRefs from 'react-native/Libraries/Utilities/useMergeRefs';
-import TextInputState from './TextInputState.harmony';
+import useMergeRefs from '../../Utilities/useMergeRefs';
+import TextInputDelegate from './delegates/TextInputDelegate';
+import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 
-const {useLayoutEffect, useRef, useState, useCallback} = React;
+const DELEGATE = new TextInputDelegate({});
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
+type TextInputInstance = HostInstance & {
+  +clear: () => void,
+  +isFocused: () => boolean,
+  +getNativeRef: () => ?HostInstance,
+  +setSelection: (start: number, end: number) => void,
+};
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -46,19 +54,19 @@ let RCTSinglelineTextInputNativeCommands;
 let RCTMultilineTextInputView;
 let RCTMultilineTextInputNativeCommands;
 
-if (OS === 'android') {
-  AndroidTextInput = require('react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent').default;
+if (Platform.OS === 'android') {
+  AndroidTextInput = require('./AndroidTextInputNativeComponent').default;
   AndroidTextInputCommands =
-    require('react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent').Commands;
-} else if (OS === 'ios') {
+    require('./AndroidTextInputNativeComponent').Commands;
+} else if (Platform.OS === 'ios') {
   RCTSinglelineTextInputView =
-    require('react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent').default;
+    require('./RCTSingelineTextInputNativeComponent').default;
   RCTSinglelineTextInputNativeCommands =
-    require('react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent').Commands;
+    require('./RCTSingelineTextInputNativeComponent').Commands;
   RCTMultilineTextInputView =
-    require('react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent').default;
+    require('./RCTMultilineTextInputNativeComponent').default;
   RCTMultilineTextInputNativeCommands =
-    require('react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent').Commands;
+    require('./RCTMultilineTextInputNativeComponent').Commands;
 }
 
 export type ChangeEvent = SyntheticEvent<
@@ -134,6 +142,9 @@ type DataDetectorTypesType =
   | 'link'
   | 'address'
   | 'calendarEvent'
+  | 'trackingNumber'
+  | 'flightNumber'
+  | 'lookupSuggestion'
   | 'none'
   | 'all';
 
@@ -197,6 +208,15 @@ export type TextContentType =
   | 'addressState'
   | 'countryName'
   | 'creditCardNumber'
+  | 'creditCardExpiration'
+  | 'creditCardExpirationMonth'
+  | 'creditCardExpirationYear'
+  | 'creditCardSecurityCode'
+  | 'creditCardType'
+  | 'creditCardName'
+  | 'creditCardGivenName'
+  | 'creditCardMiddleName'
+  | 'creditCardFamilyName'
   | 'emailAddress'
   | 'familyName'
   | 'fullStreetAddress'
@@ -217,16 +237,28 @@ export type TextContentType =
   | 'username'
   | 'password'
   | 'newPassword'
-  | 'oneTimeCode';
+  | 'oneTimeCode'
+  | 'birthdate'
+  | 'birthdateDay'
+  | 'birthdateMonth'
+  | 'birthdateYear'
+  | 'cellularEID'
+  | 'cellularIMEI'
+  | 'dateTime'
+  | 'flightNumber'
+  | 'shipmentTrackingNumber';
 
 export type enterKeyHintType =
-  | 'enter'
+  // Cross Platform
   | 'done'
   | 'go'
   | 'next'
-  | 'previous'
   | 'search'
-  | 'send';
+  | 'send'
+  // Android-only
+  | 'previous'
+  // iOS-only
+  | 'enter';
 
 type PasswordRules = string;
 
@@ -281,6 +313,12 @@ type IOSProps = $ReadOnly<{|
    */
   inputAccessoryViewID?: ?string,
 
+  /**
+   * An optional label that overrides the default input accessory view button label.
+   * @platform ios
+   */
+  inputAccessoryViewButtonLabel?: ?string,
+
   /**
    * Determines the color of the keyboard.
    * @platform ios
@@ -333,6 +371,29 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
+
+  /**
+   * Set line break mode on iOS.
+   * @platform ios
+   */
+  lineBreakModeIOS?: ?(
+    | 'wordWrapping'
+    | 'char'
+    | 'clip'
+    | 'head'
+    | 'middle'
+    | 'tail'
+  ),
+
+  /**
+   * If `false`, the iOS system will not insert an extra space after a paste operation
+   * neither delete one or two spaces after a cut or delete operation.
+   *
+   * The default value is `true`.
+   *
+   * @platform ios
+   */
+  smartInsertDelete?: ?boolean,
 |}>;
 
 type AndroidProps = $ReadOnly<{|
@@ -446,7 +507,16 @@ export type Props = $ReadOnly<{|
    * - `additional-name`
    * - `address-line1`
    * - `address-line2`
+   * - `birthdate-day` (iOS 17+)
+   * - `birthdate-full` (iOS 17+)
+   * - `birthdate-month` (iOS 17+)
+   * - `birthdate-year` (iOS 17+)
    * - `cc-number`
+   * - `cc-csc` (iOS 17+)
+   * - `cc-exp` (iOS 17+)
+   * - `cc-exp-day` (iOS 17+)
+   * - `cc-exp-month` (iOS 17+)
+   * - `cc-exp-year` (iOS 17+)
    * - `country`
    * - `current-password`
    * - `email`
@@ -465,6 +535,11 @@ export type Props = $ReadOnly<{|
    *
    * The following values work on iOS only:
    *
+   * - `cc-name` (iOS 17+)
+   * - `cc-given-name` (iOS 17+)
+   * - `cc-middle-name` (iOS 17+)
+   * - `cc-family-name` (iOS 17+)
+   * - `cc-type` (iOS 17+)
    * - `nickname`
    * - `organization`
    * - `organization-title`
@@ -472,15 +547,6 @@ export type Props = $ReadOnly<{|
    *
    * The following values work on Android only:
    *
-   * - `birthdate-day`
-   * - `birthdate-full`
-   * - `birthdate-month`
-   * - `birthdate-year`
-   * - `cc-csc`
-   * - `cc-exp`
-   * - `cc-exp-day`
-   * - `cc-exp-month`
-   * - `cc-exp-year`
    * - `gender`
    * - `name-family`
    * - `name-given`
@@ -516,6 +582,11 @@ export type Props = $ReadOnly<{|
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-middle-name'
+    | 'cc-family-name'
+    | 'cc-type'
     | 'country'
     | 'current-password'
     | 'email'
@@ -699,33 +770,12 @@ export type Props = $ReadOnly<{|
    */
   onChange?: ?(e: ChangeEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   *
-   * @platform ios
-   */
-  unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
-
   /**
    * Callback that is called when the text input's text changes.
    * Changed text is passed as an argument to the callback handler.
    */
   onChangeText?: ?(text: string) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   * Changed text is passed as an argument to the callback handler.
-   *
-   * @platform ios
-   */
-  unstable_onChangeTextSync?: ?(text: string) => mixed,
-
   /**
    * Callback that is called when the text input's content size changes.
    * This will be called with
@@ -755,19 +805,9 @@ export type Props = $ReadOnly<{|
   onKeyPress?: ?(e: KeyPressEvent) => mixed,
 
   /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   *
-   * Callback that is called when a key is pressed.
-   * This will be called with `{ nativeEvent: { key: keyValue } }`
-   * where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
-   * the typed-in character otherwise including `' '` for space.
-   * Fires before `onChange` callbacks.
-   *
-   * @platform ios
+   * Called when a single tap gesture is detected.
    */
-  unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
+  onPress?: ?(event: PressEvent) => mixed,
 
   /**
    * Called when a touch is engaged.
@@ -870,6 +910,12 @@ export type Props = $ReadOnly<{|
    */
   selectionColor?: ?ColorValue,
 
+  /**
+   * The text selection handle color.
+   * @platform android
+   */
+  selectionHandleColor?: ?ColorValue,
+
   /**
    * If `true`, all text will automatically be selected on focus.
    */
@@ -940,8 +986,188 @@ export type Props = $ReadOnly<{|
   value?: ?Stringish,
 |}>;
 
+type ViewCommands = $NonMaybeType<
+  | typeof AndroidTextInputCommands
+  | typeof RCTMultilineTextInputNativeCommands
+  | typeof RCTSinglelineTextInputNativeCommands,
+>;
+
+type LastNativeSelection = {|
+  selection: Selection,
+  mostRecentEventCount: number,
+|};
+
 const emptyFunctionThatReturnsTrue = () => true;
 
+/**
+ * This hook handles the synchronization between the state of the text input
+ * in native and in JavaScript. This is necessary due to the asynchronous nature
+ * of text input events.
+ */
+function useTextInputStateSynchronization_STATE({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: Props,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | HostInstance>,
+  text: string,
+  viewCommands: ViewCommands,
+}): {
+  setLastNativeText: string => void,
+  setLastNativeSelection: LastNativeSelection => void,
+} {
+  const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
+  const [lastNativeSelectionState, setLastNativeSelection] =
+    useState<LastNativeSelection>({
+      selection: {start: -1, end: -1},
+      mostRecentEventCount: mostRecentEventCount,
+    });
+
+  const lastNativeSelection = lastNativeSelectionState.selection;
+
+  // This is necessary in case native updates the text and JS decides
+  // that the update should be ignored and we should stick with the value
+  // that we have in JS.
+  useLayoutEffect(() => {
+    const nativeUpdate: {text?: string, selection?: Selection} = {};
+
+    if (lastNativeText !== props.value && typeof props.value === 'string') {
+      nativeUpdate.text = props.value;
+      setLastNativeText(props.value);
+    }
+
+    if (
+      selection &&
+      lastNativeSelection &&
+      (lastNativeSelection.start !== selection.start ||
+        lastNativeSelection.end !== selection.end)
+    ) {
+      nativeUpdate.selection = selection;
+      setLastNativeSelection({selection, mostRecentEventCount});
+    }
+
+    if (Object.keys(nativeUpdate).length === 0) {
+      return;
+    }
+
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        text,
+        selection?.start ?? -1,
+        selection?.end ?? -1,
+      );
+    }
+  }, [
+    mostRecentEventCount,
+    inputRef,
+    props.value,
+    props.defaultValue,
+    lastNativeText,
+    selection,
+    lastNativeSelection,
+    text,
+    viewCommands,
+  ]);
+
+  return {setLastNativeText, setLastNativeSelection};
+}
+
+/**
+ * This hook handles the synchronization between the state of the text input
+ * in native and in JavaScript. This is necessary due to the asynchronous nature
+ * of text input events.
+ */
+function useTextInputStateSynchronization_REFS({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: Props,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | HostInstance>,
+  text: string,
+  viewCommands: ViewCommands,
+}): {
+  setLastNativeText: string => void,
+  setLastNativeSelection: LastNativeSelection => void,
+} {
+  const lastNativeTextRef = useRef<?Stringish>(props.value);
+  const lastNativeSelectionRef = useRef<LastNativeSelection>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
+
+  // This is necessary in case native updates the text and JS decides
+  // that the update should be ignored and we should stick with the value
+  // that we have in JS.
+  useLayoutEffect(() => {
+    const nativeUpdate: {text?: string, selection?: Selection} = {};
+
+    const lastNativeSelection = lastNativeSelectionRef.current.selection;
+
+    if (
+      lastNativeTextRef.current !== props.value &&
+      typeof props.value === 'string'
+    ) {
+      nativeUpdate.text = props.value;
+      lastNativeTextRef.current = props.value;
+    }
+
+    if (
+      selection &&
+      lastNativeSelection &&
+      (lastNativeSelection.start !== selection.start ||
+        lastNativeSelection.end !== selection.end)
+    ) {
+      nativeUpdate.selection = selection;
+      lastNativeSelectionRef.current = {selection, mostRecentEventCount};
+    }
+
+    if (Object.keys(nativeUpdate).length === 0) {
+      return;
+    }
+
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        text,
+        selection?.start ?? -1,
+        selection?.end ?? -1,
+      );
+    }
+  }, [
+    mostRecentEventCount,
+    inputRef,
+    props.value,
+    props.defaultValue,
+    selection,
+    text,
+    viewCommands,
+  ]);
+
+  return {
+    setLastNativeText: lastNativeText => {
+      lastNativeTextRef.current = lastNativeText;
+    },
+    setLastNativeSelection: lastNativeSelection => {
+      lastNativeSelectionRef.current = lastNativeSelection;
+    },
+  };
+}
+
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as
@@ -996,8 +1222,8 @@ const emptyFunctionThatReturnsTrue = () => true;
  *     return (
  *       <TextInput
  *         {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
- *         editable = {true}
- *         maxLength = {40}
+ *         editable={true}
+ *         maxLength={40}
  *       />
  *     );
  *   }
@@ -1021,8 +1247,8 @@ const emptyFunctionThatReturnsTrue = () => true;
  *        borderBottomWidth: 1 }}
  *      >
  *        <UselessTextInput
- *          multiline = {true}
- *          numberOfLines = {4}
+ *          multiline={true}
+ *          numberOfLines={4}
  *          onChangeText={(text) => this.setState({text})}
  *          value={this.state.text}
  *        />
@@ -1064,12 +1290,14 @@ function InternalTextInput(props: Props): React.Node {
     id,
     tabIndex,
     selection: propsSelection,
+    selectionColor,
+    selectionHandleColor,
+    cursorColor,
     ...otherProps
   } = props;
 
-  const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
+  const inputRef = useRef<null | HostInstance>(null);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const selection: ?Selection =
     propsSelection == null
       ? null
@@ -1078,78 +1306,29 @@ function InternalTextInput(props: Props): React.Node {
           end: propsSelection.end ?? propsSelection.start,
         };
 
-  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-
-  const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
-  const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: ?Selection,
-    mostRecentEventCount: number,
-  |}>({selection, mostRecentEventCount});
-
-  const lastNativeSelection = lastNativeSelectionState.selection;
-
-  let viewCommands;
-  if (AndroidTextInputCommands) {
-    viewCommands = AndroidTextInputCommands;
-  } else {
-    viewCommands =
-      props.multiline === true
-        ? RCTMultilineTextInputNativeCommands
-        : RCTSinglelineTextInputNativeCommands;
-  }
-
   const text =
     typeof props.value === 'string'
       ? props.value
       : typeof props.defaultValue === 'string'
-      ? props.defaultValue
-      : '';
-
-  // This is necessary in case native updates the text and JS decides
-  // that the update should be ignored and we should stick with the value
-  // that we have in JS.
-  useLayoutEffect(() => {
-    const nativeUpdate: {text?: string, selection?: Selection} = {};
-
-    if (lastNativeText !== props.value && typeof props.value === 'string') {
-      nativeUpdate.text = props.value;
-      setLastNativeText(props.value);
-    }
-
-    if (
-      selection &&
-      lastNativeSelection &&
-      (lastNativeSelection.start !== selection.start ||
-        lastNativeSelection.end !== selection.end)
-    ) {
-      nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
-    }
+        ? props.defaultValue
+        : '';
 
-    if (Object.keys(nativeUpdate).length === 0) {
-      return;
-    }
+  const viewCommands = DELEGATE.getTextInputCommands(props.multiline);
 
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        text,
-        selection?.start ?? -1,
-        selection?.end ?? -1,
-      );
-    }
-  }, [
-    mostRecentEventCount,
-    inputRef,
-    props.value,
-    props.defaultValue,
-    lastNativeText,
-    selection,
-    lastNativeSelection,
-    text,
-    viewCommands,
-  ]);
+  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
+  const useTextInputStateSynchronization =
+    ReactNativeFeatureFlags.useRefsForTextInputState()
+      ? useTextInputStateSynchronization_REFS
+      : useTextInputStateSynchronization_STATE;
+  const {setLastNativeText, setLastNativeSelection} =
+    useTextInputStateSynchronization({
+      props,
+      inputRef,
+      mostRecentEventCount,
+      selection,
+      text,
+      viewCommands,
+    });
 
   useLayoutEffect(() => {
     const inputRefValue = inputRef.current;
@@ -1165,7 +1344,7 @@ function InternalTextInput(props: Props): React.Node {
         }
       };
     }
-  }, [inputRef]);
+  }, []);
 
   const setLocalRef = useCallback(
     (instance: TextInputInstance | null) => {
@@ -1202,8 +1381,8 @@ function InternalTextInput(props: Props): React.Node {
                 inputRef.current,
                 mostRecentEventCount,
                 '',
-                -1,
-                -1,
+                0,
+                0,
               );
             }
           },
@@ -1211,7 +1390,7 @@ function InternalTextInput(props: Props): React.Node {
           isFocused(): boolean {
             return TextInputState.currentlyFocusedInput() === inputRef.current;
           },
-          getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
+          getNativeRef(): ?HostInstance {
             return inputRef.current;
           },
           setSelection(start: number, end: number): void {
@@ -1231,10 +1410,7 @@ function InternalTextInput(props: Props): React.Node {
     [mostRecentEventCount, viewCommands],
   );
 
-  const ref = useMergeRefs<TextInputInstance | null>(
-    setLocalRef,
-    props.forwardedRef,
-  );
+  const ref = useMergeRefs<TextInputInstance>(setLocalRef, props.forwardedRef);
 
   const _onChange = (event: ChangeEvent) => {
     const currentText = event.nativeEvent.text;
@@ -1255,26 +1431,6 @@ function InternalTextInput(props: Props): React.Node {
     setMostRecentEventCount(event.nativeEvent.eventCount);
   };
 
-  const _onChangeSync = (event: ChangeEvent) => {
-    const currentText = event.nativeEvent.text;
-    props.unstable_onChangeSync && props.unstable_onChangeSync(event);
-    props.unstable_onChangeTextSync &&
-      props.unstable_onChangeTextSync(currentText);
-
-    if (inputRef.current == null) {
-      // calling `props.onChange` or `props.onChangeText`
-      // may clean up the input itself. Exits here.
-      return;
-    }
-
-    setLastNativeText(currentText);
-    // This must happen last, after we call setLastNativeText.
-    // Different ordering can cause bugs when editing AndroidTextInputs
-    // with multiple Fragments.
-    // We must update this so that controlled input updates work.
-    setMostRecentEventCount(event.nativeEvent.eventCount);
-  };
-
   const _onSelectionChange = (event: SelectionChangeEvent) => {
     props.onSelectionChange && props.onSelectionChange(event);
 
@@ -1312,7 +1468,7 @@ function InternalTextInput(props: Props): React.Node {
 
   const multiline = props.multiline ?? false;
 
-  let blurOnSubmit = props.blurOnSubmit; // RNOH patch
+  let blurOnSubmit = props.blurOnSubmit; // RNC_patch
 
   let submitBehavior: SubmitBehavior;
   if (props.submitBehavior != null) {
@@ -1332,7 +1488,7 @@ function InternalTextInput(props: Props): React.Node {
   } else {
     // Single line
     if (props.blurOnSubmit !== false) {
-      blurOnSubmit = true; // RNOH patch: The default value is true for single-line fields
+      blurOnSubmit = true; // RNC_patch: The default value is true for single-line fields
       submitBehavior = 'blurAndSubmit';
     } else {
       submitBehavior = 'submit';
@@ -1342,25 +1498,37 @@ function InternalTextInput(props: Props): React.Node {
   const accessible = props.accessible !== false;
   const focusable = props.focusable !== false;
 
+  const {
+    editable,
+    hitSlop,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+  } = props;
+
   const config = React.useMemo(
     () => ({
+      hitSlop,
       onPress: (event: PressEvent) => {
-        if (props.editable !== false) {
+        onPress?.(event);
+        if (editable !== false) {
           if (inputRef.current != null) {
             inputRef.current.focus();
           }
         }
       },
-      onPressIn: props.onPressIn,
-      onPressOut: props.onPressOut,
-      cancelable:
-        OS === 'ios' ? !props.rejectResponderTermination : null,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      cancelable: DELEGATE.shouldBeCancellable(rejectResponderTermination),
     }),
     [
-      props.editable,
-      props.onPressIn,
-      props.onPressOut,
-      props.rejectResponderTermination,
+      editable,
+      hitSlop,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
     ],
   );
 
@@ -1373,7 +1541,7 @@ function InternalTextInput(props: Props): React.Node {
 
   // TextInput handles onBlur and onFocus events
   // so omitting onBlur and onFocus pressability handlers here.
-  const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
+  const {onBlur, onFocus, ...eventHandlers} = usePressability(config);
 
   let _accessibilityState;
   if (
@@ -1393,114 +1561,181 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(props.style);
-
-  if (OS === 'ios') {
-    // RNOH patch
-    const _accessibilityLabelledBy =
-    props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
-
-    const RCTTextInputView =
-      props.multiline === true
-        ? RCTMultilineTextInputView
-        : RCTSinglelineTextInputView;
-
-    style = props.multiline === true ? [styles.multilineInput, style] : style;
-
-    const useOnChangeSync =
-      (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
-      !(props.onChange || props.onChangeText);
-
-    textInput = (
-      <RCTTextInputView
-        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
-        ref={ref}
-        {...otherProps}
-        {...eventHandlers}
-        accessibilityState={_accessibilityState}
-        accessibilityLabelledBy={_accessibilityLabelledBy} // RNOH patch
-        accessible={accessible}
-        submitBehavior={submitBehavior}
-        caretHidden={caretHidden}
-        dataDetectorTypes={props.dataDetectorTypes}
-        focusable={tabIndex !== undefined ? !tabIndex : focusable}
-        mostRecentEventCount={mostRecentEventCount}
-        nativeID={id ?? props.nativeID}
-        onBlur={_onBlur}
-        onKeyPressSync={props.unstable_onKeyPressSync}
-        onChange={_onChange}
-        onChangeSync={useOnChangeSync === true ? _onChangeSync : null}
-        onContentSizeChange={props.onContentSizeChange}
-        onFocus={_onFocus}
-        onScroll={_onScroll}
-        onSelectionChange={_onSelectionChange}
-        onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
-        selection={selection}
-        style={style}
-        text={text}
-        blurOnSubmit={blurOnSubmit} // RNOH patch
-      />
-    );
-  } else if (OS === 'android') {
-    const autoCapitalize = props.autoCapitalize || 'sentences';
-    const _accessibilityLabelledBy =
-      props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
-    const placeholder = props.placeholder ?? '';
-    let children = props.children;
-    const childCount = React.Children.count(children);
-    invariant(
-      !(props.value != null && childCount),
-      'Cannot specify both value and children.',
-    );
-    if (childCount > 1) {
-      children = <Text>{children}</Text>;
+  // Keep the original (potentially nested) style when possible, as React can diff these more efficiently
+  let _style = props.style;
+  const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
+  if (flattenedStyle != null) {
+    let overrides: ?{...TextStyleInternal} = null;
+    if (typeof flattenedStyle?.fontWeight === 'number') {
+      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides.fontWeight =
+        // $FlowFixMe[incompatible-cast]
+        (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
     }
 
-    textInput = (
-      /* $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
-        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
-        ref={ref}
-        {...otherProps}
-        {...eventHandlers}
-        accessibilityState={_accessibilityState}
-        accessibilityLabelledBy={_accessibilityLabelledBy}
-        accessible={accessible}
-        autoCapitalize={autoCapitalize}
-        submitBehavior={submitBehavior}
-        caretHidden={caretHidden}
-        children={children}
-        disableFullscreenUI={props.disableFullscreenUI}
-        focusable={tabIndex !== undefined ? !tabIndex : focusable}
-        mostRecentEventCount={mostRecentEventCount}
-        nativeID={id ?? props.nativeID}
-        numberOfLines={props.rows ?? props.numberOfLines}
-        onBlur={_onBlur}
-        onChange={_onChange}
-        onFocus={_onFocus}
-        /* $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}
-        style={style}
-        text={text}
-        textBreakStrategy={props.textBreakStrategy}
-      />
-    );
+    if (flattenedStyle.verticalAlign != null) {
+      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides.textAlignVertical =
+        verticalAlignToTextAlignVerticalMap[flattenedStyle.verticalAlign];
+      overrides.verticalAlign = undefined;
+    }
+
+    if (overrides != null) {
+      // $FlowFixMe[incompatible-type]
+      _style = [_style, overrides];
+    }
   }
+
+  // RNC_patch
+  const _accessibilityLabelledBy =
+  props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
+  const useMultilineDefaultStyle =
+  props.multiline === true &&
+  (_style == null ||
+    (_style.padding == null &&
+      _style.paddingVertical == null &&
+      _style.paddingTop == null));
+  textInput = DELEGATE.createNativeTextInput({
+    ref,
+    ...otherProps,
+    ...eventHandlers,
+    accessibilityState,
+    accessibilityLabelledBy: _accessibilityLabelledBy,
+    accessible,
+    submitBehavior,
+    caretHidden,
+    dataDetectorTypes: props.dataDetectorTypes,
+    focusable: tabIndex !== undefined ? !tabIndex : focusable,
+    mostRecentEventCount,
+    nativeID: id ?? props.nativeID,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    onContentSizeChange: props.onContentSizeChange,
+    onFocus: _onFocus,
+    onScroll: _onScroll,
+    onSelectionChange: _onSelectionChange,
+    onSelectionChangeShouldSetResponder: emptyFunctionThatReturnsTrue,
+    selection,
+    selectionColor: selectionColor,
+    cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
+    style: StyleSheet.compose(
+          useMultilineDefaultStyle ? styles.multilineDefault : null,
+          _style,
+    ),
+    text,
+    blurOnSubmit,
+  });
+// if (Platform.OS === 'ios') {
+  //   const RCTTextInputView =
+  //     props.multiline === true
+  //       ? RCTMultilineTextInputView
+  //       : RCTSinglelineTextInputView;
+
+  //   const useMultilineDefaultStyle =
+  //     props.multiline === true &&
+  //     (flattenedStyle == null ||
+  //       (flattenedStyle.padding == null &&
+  //         flattenedStyle.paddingVertical == null &&
+  //         flattenedStyle.paddingTop == null));
+
+  //   textInput = (
+  //     <RCTTextInputView
+  //       // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+  //       ref={ref}
+  //       {...otherProps}
+  //       {...eventHandlers}
+  //       accessibilityState={_accessibilityState}
+  //       accessible={accessible}
+  //       submitBehavior={submitBehavior}
+  //       caretHidden={caretHidden}
+  //       dataDetectorTypes={props.dataDetectorTypes}
+  //       focusable={tabIndex !== undefined ? !tabIndex : focusable}
+  //       mostRecentEventCount={mostRecentEventCount}
+  //       nativeID={id ?? props.nativeID}
+  //       onBlur={_onBlur}
+  //       onChange={_onChange}
+  //       onContentSizeChange={props.onContentSizeChange}
+  //       onFocus={_onFocus}
+  //       onScroll={_onScroll}
+  //       onSelectionChange={_onSelectionChange}
+  //       onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
+  //       selection={selection}
+  //       selectionColor={selectionColor}
+  //       style={StyleSheet.compose(
+  //         useMultilineDefaultStyle ? styles.multilineDefault : null,
+  //         _style,
+  //       )}
+  //       text={text}
+  //     />
+  //   );
+  // } else if (Platform.OS === 'android') {
+  //   const autoCapitalize = props.autoCapitalize || 'sentences';
+  //   const _accessibilityLabelledBy =
+  //     props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
+  //   const placeholder = props.placeholder ?? '';
+  //   let children = props.children;
+  //   const childCount = React.Children.count(children);
+  //   invariant(
+  //     !(props.value != null && childCount),
+  //     'Cannot specify both value and children.',
+  //   );
+  //   if (childCount > 1) {
+  //     children = <Text>{children}</Text>;
+  //   }
+  //   // For consistency with iOS set cursor/selectionHandle color as selectionColor
+  //   const colorProps = {
+  //     selectionColor,
+  //     selectionHandleColor:
+  //       selectionHandleColor === undefined
+  //         ? selectionColor
+  //         : selectionHandleColor,
+  //     cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
+  //   };
+  //   textInput = (
+  //     /* $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
+  //       // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+  //       ref={ref}
+  //       {...otherProps}
+  //       {...colorProps}
+  //       {...eventHandlers}
+  //       accessibilityState={_accessibilityState}
+  //       accessibilityLabelledBy={_accessibilityLabelledBy}
+  //       accessible={accessible}
+  //       autoCapitalize={autoCapitalize}
+  //       submitBehavior={submitBehavior}
+  //       caretHidden={caretHidden}
+  //       children={children}
+  //       disableFullscreenUI={props.disableFullscreenUI}
+  //       focusable={tabIndex !== undefined ? !tabIndex : focusable}
+  //       mostRecentEventCount={mostRecentEventCount}
+  //       nativeID={id ?? props.nativeID}
+  //       numberOfLines={props.rows ?? props.numberOfLines}
+  //       onBlur={_onBlur}
+  //       onChange={_onChange}
+  //       onFocus={_onFocus}
+  //       /* $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}
+  //       style={_style}
+  //       text={text}
+  //       textBreakStrategy={props.textBreakStrategy}
+  //     />
+  //   );
+  // }
   return (
     <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
   );
@@ -1517,14 +1752,14 @@ const enterKeyHintToReturnTypeMap = {
 };
 
 const inputModeToKeyboardTypeMap = {
-  none: 'default',
-  text: 'default',
-  decimal: 'decimal-pad',
-  numeric: 'number-pad',
-  tel: 'phone-pad',
-  search: OS === 'ios' ? 'web-search' : 'default',
-  email: 'email-address',
-  url: 'url',
+  none: DELEGATE.getKeyboardTypeByInputMode('none'),
+  text: DELEGATE.getKeyboardTypeByInputMode('text'),
+  decimal: DELEGATE.getKeyboardTypeByInputMode('decimal'),
+  numeric: DELEGATE.getKeyboardTypeByInputMode('numeric'),
+  tel: DELEGATE.getKeyboardTypeByInputMode('tel'),
+  search: DELEGATE.getKeyboardTypeByInputMode('search'),
+  email: DELEGATE.getKeyboardTypeByInputMode('email'),
+  url: DELEGATE.getKeyboardTypeByInputMode('url'),
 };
 
 // Map HTML autocomplete values to Android autoComplete values
@@ -1565,7 +1800,20 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
 const autoCompleteWebToTextContentTypeMap = {
   'address-line1': 'streetAddressLine1',
   'address-line2': 'streetAddressLine2',
+  bday: 'birthdate',
+  'bday-day': 'birthdateDay',
+  'bday-month': 'birthdateMonth',
+  'bday-year': 'birthdateYear',
+  'cc-csc': 'creditCardSecurityCode',
+  'cc-exp-month': 'creditCardExpirationMonth',
+  'cc-exp-year': 'creditCardExpirationYear',
+  'cc-exp': 'creditCardExpiration',
+  'cc-given-name': 'creditCardGivenName',
+  'cc-additional-name': 'creditCardMiddleName',
+  'cc-family-name': 'creditCardFamilyName',
+  'cc-name': 'creditCardName',
   'cc-number': 'creditCardNumber',
+  'cc-type': 'creditCardType',
   'current-password': 'password',
   country: 'countryName',
   email: 'emailAddress',
@@ -1588,10 +1836,11 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 };
 
-const ExportedForwardRef: React.AbstractComponent<
-  React.ElementConfig<typeof InternalTextInput>,
-  TextInputInstance,
-> = React.forwardRef(function TextInput(
+const ExportedForwardRef: component(
+  ref: React.RefSetter<TextInputInstance>,
+  ...props: React.ElementConfig<typeof InternalTextInput>
+  // $FlowFixMe[incompatible-call]
+) = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
     rejectResponderTermination = true,
@@ -1609,25 +1858,14 @@ const ExportedForwardRef: React.AbstractComponent<
   },
   forwardedRef: ReactRefSetter<TextInputInstance>,
 ) {
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(restProps.style);
 
-  if (style?.verticalAlign != null) {
-    style.textAlignVertical =
-      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
-    delete style.verticalAlign;
-  }
-
-  // RNOH patch: invalid `keyboardType` prop values crash the app
+  // RNC_patch: invalid `keyboardType` prop values crash the app
   {
     // supported keyboard types from `textinput/conversions.h`
-  const SUPPORTED_KEYBOARD_TYPES = ["default", "email-address", "numeric", "phone-pad", "number-pad", "url", "decimal-pad", "ascii-capable", "numbers-and-punctuation", "name-phone-pad", "twitter", "web-search", "ascii-capable-number-pad", "visible-password"];
-  if (keyboardType && !SUPPORTED_KEYBOARD_TYPES.includes(keyboardType)) {
-    keyboardType = "default";
-  }
+    if (keyboardType && !DELEGATE.getSupportedKeyboardTypes().includes(keyboardType)) {
+      keyboardType = 'default';
+    }
   }
-  // END RNOH patch
-
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1644,40 +1882,34 @@ const ExportedForwardRef: React.AbstractComponent<
         inputMode == null ? showSoftInputOnFocus : inputMode !== 'none'
       }
       autoComplete={
-        OS === 'android'
-          ? // $FlowFixMe[invalid-computed-prop]
-            // $FlowFixMe[prop-missing]
-            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
-            autoComplete
-          : undefined
+        DELEGATE.getNativeAutocomplete(autoComplete)
+        // Platform.OS === 'android'
+        //   ? // $FlowFixMe[invalid-computed-prop]
+        //     // $FlowFixMe[prop-missing]
+        //     autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+        //     autoComplete
+        // : undefined
       }
       textContentType={
-        textContentType != null
-          ? textContentType
-          : OS === 'ios' &&
-            autoComplete &&
-            autoComplete in autoCompleteWebToTextContentTypeMap
-          ? // $FlowFixMe[invalid-computed-prop]
-            // $FlowFixMe[prop-missing]
-            autoCompleteWebToTextContentTypeMap[autoComplete]
-          : textContentType
+        DELEGATE.getNativeTextContentType(textContentType, {autocomplete: autoComplete, autocompleteWebToTextContentTypeMap: autoCompleteWebToTextContentTypeMap})
+        // textContentType != null
+        //   ? textContentType
+        //   : Platform.OS === 'ios' &&
+        //       autoComplete &&
+        //       autoComplete in autoCompleteWebToTextContentTypeMap
+        //     ? // $FlowFixMe[invalid-computed-prop]
+        //       // $FlowFixMe[prop-missing]
+        //       autoCompleteWebToTextContentTypeMap[autoComplete]
+        //     : textContentType
       }
       {...restProps}
       forwardedRef={forwardedRef}
-      style={style}
     />
   );
 });
 
 ExportedForwardRef.displayName = 'TextInput';
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-ExportedForwardRef.propTypes =
-  require('deprecated-react-native-prop-types').TextInputPropTypes;
-
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
@@ -1697,7 +1929,7 @@ export type TextInputComponentStatics = $ReadOnly<{|
 |}>;
 
 const styles = StyleSheet.create({
-  multilineInput: {
+  multilineDefault: {
     // This default top inset makes RCTMultilineTextInputView seem as close as possible
     // to single-line RCTSinglelineTextInputView defaults, using the system defaults
     // of font size 17 and a height of 31 points.