@office-iss/react-native-win32 0.0.0-canary.30 → 0.0.0-canary.300

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -1,179 +1,1108 @@
-/**
- * @providesModule TextInput
- */
-'use strict';
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-/**
- * This is a forked and slightly modified version of React Native's TextInput.
- * The fork is necessary as platform checks in the base implementation made the
- * control unusable on win32. In addition to cleaning up some of the code, this
- * fork also uses Typescript rather than Flow for type safety.
- *
- * More general documentation on this control can be found at
- * https://facebook.github.io/react-native/docs/textinput.html
- *
- * The original implementation can be found at
- * https://github.com/facebook/react-native/blob/1013a010492a7bef5ff58073a088ac924a986e9e/Libraries/Components/TextInput/TextInput.js
- *
- * This control does not support the full React Native TextInput interface yet.
- * Most of the work necessary to make that happen needs to happen on the native side.
- * Future work on the JS side may include:
- * 1. Expanded typings for some of the events
- * 2. Additional work to manage selection
- * 3. Any base/default styling work
- */
-var React = require("react");
-var react_native_1 = require("react-native");
-var TextAncestor = require('../../Text/TextAncestor');
-var TextInputState = require('./TextInputState');
-// RCTTextInput is the native component that win32 understands
-var RCTTextInput = react_native_1.requireNativeComponent('RCTTextInput');
-// Adding typings on ViewManagers is problematic as available functionality is not known until
-// registration at runtime and would require native and js to always be in sync.
-/*tslint:disable-next-line no-any*/
-var TextInputViewManager = react_native_1.NativeModules.UIManager.getViewManagerConfig('RCTTextInput');
-var TextInput = /** @class */ (function (_super) {
-    __extends(TextInput, _super);
-    function TextInput(props) {
-        var _this = _super.call(this, props) || this;
-        _this._eventCount = 0;
-        /**
-         * Focuses the TextInput
-         */
-        _this.focus = function () {
-            TextInputState.setFocusedTextInput(_this);
-            react_native_1.NativeModules.UIManager.
-                dispatchViewManagerCommand(react_native_1.findNodeHandle(_this), TextInputViewManager.Commands.focus, null);
-        };
-        /**
-         * Blurs the TextInput
-         */
-        _this.blur = function () {
-            TextInputState.blurTextInput(_this);
-            react_native_1.NativeModules.UIManager.
-                dispatchViewManagerCommand(react_native_1.findNodeHandle(_this), TextInputViewManager.Commands.blur, null);
-        };
-        /**
-         * Use clear for programmatic clearing of the text
-         */
-        _this.clear = function () {
-            _this.setNativeText('');
-        };
-        _this.setEventCount = function () {
-            react_native_1.NativeModules.UIManager.
-                dispatchViewManagerCommand(react_native_1.findNodeHandle(_this), TextInputViewManager.Commands.setEventCount, { eventCount: _this._eventCount });
-        };
-        _this.setNativeText = function (val) {
-            if (_this._lastNativeText !== val) {
-                react_native_1.NativeModules.UIManager.
-                    dispatchViewManagerCommand(react_native_1.findNodeHandle(_this), TextInputViewManager.Commands.setNativeText, { text: val });
-            }
-        };
-        _this._getText = function () {
-            return _this.props.value || (_this.props.defaultValue || null);
-        };
-        _this._onChange = function (e) {
-            var text = e.nativeEvent.text;
-            _this._eventCount = e.nativeEvent.eventCount;
-            _this.setEventCount();
-            _this.props.onChange && _this.props.onChange(e);
-            _this.props.onChangeText && _this.props.onChangeText(text);
-            _this._lastNativeText = text;
-            _this.forceUpdate();
-            return;
-        };
-        _this._onFocus = function (e) {
-            _this.focus();
-            _this.props.onFocus && _this.props.onFocus(e);
-        };
-        _this._onBlur = function (e) {
-            _this.props.onBlur && _this.props.onBlur(e);
-        };
-        _this._inputRef = React.createRef();
-        return _this;
-    }
-    /**
-     * On mount TextInput needs to register itself with TextInputState
-     * and conditionally request an animation frame for focus.
-     */
-    TextInput.prototype.componentDidMount = function () {
-        this._lastNativeText = this.props.value;
-        TextInputState.registerInput(this);
-        if (this.props.autoFocus) {
-            this._rafID = requestAnimationFrame(this.focus);
-        }
-    };
-    /**
-     * This is an unfortunate consequence of having controlled TextInputs.
-     * Tree diffing reconciliation will not always send down text values
-     * This sets text explicitly.
-     */
-    TextInput.prototype.componentDidUpdate = function () {
-        if ((this._lastNativeText !== this._getText())) {
-            this._getText() && this.setNativeText(this._getText());
-        }
-        return;
-    };
-    /**
-     * Pre-unmoun the TextInput should blur, unregister and clean up
-     * the animation frame for focus (edge cases)
-     */
-    TextInput.prototype.componentWillUnmount = function () {
-        // blur
-        if (this.isFocused()) {
-            this.blur();
-        }
-        // unregister
-        TextInputState.unregisterInput(this);
-        // cancel animationFrame
-        if (this._rafID !== null) {
-            cancelAnimationFrame(this._rafID);
-        }
-        if (this._rafID) {
-            return;
-        }
-        return;
-    };
-    TextInput.prototype.render = function () {
-        var props = __assign({}, this.props);
-        // By default fontScaling is turned on.
-        // win32 ignores this prop for the time being
-        props.allowFontScaling = (this.props.allowFontScaling === null
-            || this.props.allowFontScaling === undefined)
-            ? true : this.props.allowFontScaling;
-        return (React.createElement(TextAncestor.Provider, { value: true },
-            React.createElement(RCTTextInput, __assign({}, props, { ref: this._inputRef, text: this._getText(), onFocus: this._onFocus, onBlur: this._onBlur, onChange: this._onChange }))));
-    };
-    /**
-     * Returns true if the TextInput is focused
-     */
-    TextInput.prototype.isFocused = function () {
-        return TextInputState.currentlyFocusedInput() === this;
-    };
-    return TextInput;
-}(React.Component));
-module.exports = TextInput;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dElucHV0LndpbjMyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL0xpYnJhcmllcy9Db21wb25lbnRzL1RleHRJbnB1dC9UZXh0SW5wdXQud2luMzIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsWUFBWSxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRWI7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCRztBQUVILDZCQUErQjtBQUMvQiw2Q0FNc0I7QUFPdEIsSUFBTSxZQUFZLEdBQUcsT0FBTyxDQUFDLHlCQUF5QixDQUFDLENBQUM7QUFDeEQsSUFBTSxjQUFjLEdBQUcsT0FBTyxDQUFDLGtCQUFrQixDQUFDLENBQUM7QUFNbkQsOERBQThEO0FBQzlELElBQU0sWUFBWSxHQUFHLHFDQUFzQixDQUFvQixjQUFjLENBQUMsQ0FBQztBQUUvRSw4RkFBOEY7QUFDOUYsZ0ZBQWdGO0FBQ2hGLG1DQUFtQztBQUNuQyxJQUFNLG9CQUFvQixHQUFRLDRCQUFhLENBQUMsU0FBUyxDQUFDLG9CQUFvQixDQUFDLGNBQWMsQ0FBQyxDQUFDO0FBRS9GO0lBQXdCLDZCQUFtQztJQVd6RCxtQkFBWSxLQUFLO1FBQWpCLFlBQ0Usa0JBQU0sS0FBSyxDQUFDLFNBRWI7UUFMTyxpQkFBVyxHQUFHLENBQUMsQ0FBQztRQXVGeEI7O1dBRUc7UUFDSSxXQUFLLEdBQUc7WUFDYixjQUFjLENBQUMsbUJBQW1CLENBQUMsS0FBSSxDQUFDLENBQUM7WUFDekMsNEJBQWEsQ0FBQyxTQUFTO2dCQUNyQiwwQkFBMEIsQ0FBQyw2QkFBYyxDQUFDLEtBQUksQ0FBQyxFQUFFLG9CQUFvQixDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDaEcsQ0FBQyxDQUFBO1FBRUQ7O1dBRUc7UUFDSSxVQUFJLEdBQUc7WUFDWixjQUFjLENBQUMsYUFBYSxDQUFDLEtBQUksQ0FBQyxDQUFDO1lBQ25DLDRCQUFh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QUksQ0FBQyxRQUFRLEVBQ3ZCLE1BQU0sRUFBRyxJQUFJLENBQUMsT0FBTyxFQUNyQixRQUFRLEVBQUcsSUFBSSxDQUFDLFNBQVMsSUFDekIsQ0FDb0IsQ0FDekIsQ0FBQztJQUNKLENBQUM7SUFFRDs7T0FFRztJQUNJLDZCQUFTLEdBQWhCO1FBQ0UsT0FBTyxjQUFjLENBQUMscUJBQXFCLEVBQUUsS0FBSyxJQUFJLENBQUM7SUFDekQsQ0FBQztJQWtFSCxnQkFBQztBQUFELENBQUMsQUFoS0QsQ0FBd0IsS0FBSyxDQUFDLFNBQVMsR0FnS3RDO0FBRUQsaUJBQVMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAcHJvdmlkZXNNb2R1bGUgVGV4dElucHV0XG4gKi9cbid1c2Ugc3RyaWN0JztcblxuLyoqXG4gKiBUaGlzIGlzIGEgZm9ya2VkIGFuZCBzbGlnaHRseSBtb2RpZmllZCB2ZXJzaW9uIG9mIFJlYWN0IE5hdGl2ZSdzIFRleHRJbnB1dC5cbiAqIFRoZSBmb3JrIGlzIG5lY2Vzc2FyeSBhcyBwbGF0Zm9ybSBjaGVja3MgaW4gdGhlIGJhc2UgaW1wbGVtZW50YXRpb24gbWFkZSB0aGVcbiAqIGNvbnRyb2wgdW51c2FibGUgb24gd2luMzIuIEluIGFkZGl0aW9uIHRvIGNsZWFuaW5nIHVwIHNvbWUgb2YgdGhlIGNvZGUsIHRoaXNcbiAqIGZvcmsgYWxzbyB1c2VzIFR5cGVzY3JpcHQgcmF0aGVyIHRoYW4gRmxvdyBmb3IgdHlwZSBzYWZldHkuXG4gKlxuICogTW9yZSBnZW5lcmFsIGRvY3VtZW50YXRpb24gb24gdGhpcyBjb250cm9sIGNhbiBiZSBmb3VuZCBhdFxuICogaHR0cHM6Ly9mYWNlYm9vay5naXRodWIuaW8vcmVhY3QtbmF0aXZlL2RvY3MvdGV4dGlucHV0Lmh0bWxcbiAqXG4gKiBUaGUgb3JpZ2luYWwgaW1wbGVtZW50YXRpb24gY2FuIGJlIGZvdW5kIGF0XG4gKiBodHRwczovL2dpdGh1Yi5jb20vZmFjZWJvb2svcmVhY3QtbmF0aXZlL2Jsb2IvMTAxM2EwMTA0OTJhN2JlZjVmZjU4MDczYTA4OGFjOTI0YTk4NmU5ZS9MaWJyYXJpZXMvQ29tcG9uZW50cy9UZXh0SW5wdXQvVGV4dElucHV0LmpzXG4gKlxuICogVGhpcyBjb250cm9sIGRvZXMgbm90IHN1cHBvcnQgdGhlIGZ1bGwgUmVhY3QgTmF0aXZlIFRleHRJbnB1dCBpbnRlcmZhY2UgeWV0LlxuICogTW9zdCBvZiB0aGUgd29yayBuZWNlc3NhcnkgdG8gbWFrZSB0aGF0IGhhcHBlbiBuZWVkcyB0byBoYXBwZW4gb24gdGhlIG5hdGl2ZSBzaWRlLlxuICogRnV0dXJlIHdvcmsgb24gdGhlIEpTIHNpZGUgbWF5IGluY2x1ZGU6XG4gKiAxLiBFeHBhbmRlZCB0eXBpbmdzIGZvciBzb21lIG9mIHRoZSBldmVudHNcbiAqIDIuIEFkZGl0aW9uYWwgd29yayB0byBtYW5hZ2Ugc2VsZWN0aW9uXG4gKiAzLiBBbnkgYmFzZS9kZWZhdWx0IHN0eWxpbmcgd29ya1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7XG4gIGZpbmROb2RlSGFuZGxlLFxuICBOYXRpdmVNb2R1bGVzLFxuICByZXF1aXJlTmF0aXZlQ29tcG9uZW50LFxuICBUZXh0SW5wdXRQcm9wcyxcbiAgTmF0aXZlTWV0aG9kcyxcbn0gZnJvbSAncmVhY3QtbmF0aXZlJztcbmltcG9ydCB7XG4gIElCbHVyRXZlbnQsXG4gIElDaGFuZ2VFdmVudCxcbiAgSUZvY3VzRXZlbnQsXG59IGZyb20gJy4vVGV4dElucHV0LlR5cGVzLndpbjMyJztcblxuY29uc3QgVGV4dEFuY2VzdG9yID0gcmVxdWlyZSgnLi4vLi4vVGV4dC9UZXh0QW5jZXN0b3InKTtcbmNvbnN0IFRleHRJbnB1dFN0YXRlID0gcmVxdWlyZSgnLi9UZXh0SW5wdXRTdGF0ZScpO1xuXG50eXBlIFJDVFRleHRJbnB1dFByb3BzID0gVGV4dElucHV0UHJvcHMgJiB7XG4gIHRleHQ6IHN0cmluZztcbn07XG5cbi8vIFJDVFRleHRJbnB1dCBpcyB0aGUgbmF0aXZlIGNvbXBvbmVudCB0aGF0IHdpbjMyIHVuZGVyc3RhbmRzXG5jb25zdCBSQ1RUZXh0SW5wdXQgPSByZXF1aXJlTmF0aXZlQ29tcG9uZW50PFJDVFRleHRJbnB1dFByb3BzPignUkNUVGV4dElucHV0Jyk7XG5cbi8vIEFkZGluZyB0eXBpbmdzIG9uIFZpZXdNYW5hZ2VycyBpcyBwcm9ibGVtYXRpYyBhcyBhdmFpbGFibGUgZnVuY3Rpb25hbGl0eSBpcyBub3Qga25vd24gdW50aWxcbi8vIHJlZ2lzdHJhdGlvbiBhdCBydW50aW1lIGFuZCB3b3VsZCByZXF1aXJlIG5hdGl2ZSBhbmQganMgdG8gYWx3YXlzIGJlIGluIHN5bmMuXG4vKnRzbGludDpkaXNhYmxlLW5leHQtbGluZSBuby1hbnkqL1xuY29uc3QgVGV4dElucHV0Vmlld01hbmFnZXI6IGFueSA9IE5hdGl2ZU1vZHVsZXMuVUlNYW5hZ2VyLmdldFZpZXdNYW5hZ2VyQ29uZmlnKCdSQ1RUZXh0SW5wdXQnKTtcblxuY2xhc3MgVGV4dElucHV0IGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50PFRleHRJbnB1dFByb3BzLCB7fT4ge1xuICAvLyBUT0RPOiBPbmNlIHRoZSBuYXRpdmUgc2lkZSBiZWdpbnMgc3VwcG9ydGluZyBwcm9ncmFtbWF0aWMgc2VsZWN0aW9uXG4gIC8vIHRoaXMgd2lsbCBiZWNvbWUgaW1wb3J0YW50IGZvciBzZWxlY3Rpb24gbWFuYWdlbWVudFxuICAvLyBwcml2YXRlIF9sYXN0TmF0aXZlVGV4dFNlbGVjdGlvbjogYW55O1xuXG4gIHByaXZhdGUgX3JhZklEOiBudW1iZXI7XG5cbiAgcHJpdmF0ZSBfaW5wdXRSZWY6IFJlYWN0LlJlZk9iamVjdDxSZWFjdC5Db21wb25lbnQ8UkNUVGV4dElucHV0UHJvcHM+ICYgUmVhZG9ubHk8TmF0aXZlTWV0aG9kcz4+O1xuICBwcml2YXRlIF9sYXN0TmF0aXZlVGV4dDogc3RyaW5nO1xuICBwcml2YXRlIF9ldmVudENvdW50ID0gMDtcblxuICBjb25zdHJ1Y3Rvcihwcm9wcykge1xuICAgIHN1cGVyKHByb3BzKTtcbiAgICB0aGlzLl9pbnB1dFJlZiA9IFJlYWN0LmNyZWF0ZVJlZigpO1xuICB9XG5cbiAgLyoqXG4gICAqIE9uIG1vdW50IFRleHRJbnB1dCBuZWVkcyB0byByZWdpc3RlciBpdHNlbGYgd2l0aCBUZXh0SW5wdXRTdGF0ZVxuICAgKiBhbmQgY29uZGl0aW9uYWxseSByZXF1ZXN0IGFuIGFuaW1hdGlvbiBmcmFtZSBmb3IgZm9jdXMuXG4gICAqL1xuICBwdWJsaWMgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgdGhpcy5fbGFzdE5hdGl2ZVRleHQgPSB0aGlzLnByb3BzLnZhbHVlO1xuXG4gICAgVGV4dElucHV0U3RhdGUucmVnaXN0ZXJJbnB1dCh0aGlzKTtcblxuICAgIGlmICh0aGlzLnByb3BzLmF1dG9Gb2N1cykge1xuICAgICAgdGhpcy5fcmFmSUQgPSByZXF1ZXN0QW5pbWF0aW9uRnJhbWUodGhpcy5mb2N1cyk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFRoaXMgaXMgYW4gdW5mb3J0dW5hdGUgY29uc2VxdWVuY2Ugb2YgaGF2aW5nIGNvbnRyb2xsZWQgVGV4dElucHV0cy5cbiAgICogVHJlZSBkaWZmaW5nIHJlY29uY2lsaWF0aW9uIHdpbGwgbm90IGFsd2F5cyBzZW5kIGRvd24gdGV4dCB2YWx1ZXNcbiAgICogVGhpcyBzZXRzIHRleHQgZXhwbGljaXRseS5cbiAgICovXG4gIHB1YmxpYyBjb21wb25lbnREaWRVcGRhdGUoKSB7XG4gICAgaWYgKCh0aGlzLl9sYXN0TmF0aXZlVGV4dCAhPT0gdGhpcy5fZ2V0VGV4dCgpKSkge1xuICAgICAgdGhpcy5fZ2V0VGV4dCgpICYmIHRoaXMuc2V0TmF0aXZlVGV4dCh0aGlzLl9nZXRUZXh0KCkpO1xuICAgIH1cblxuICAgIHJldHVybjtcbiAgfVxuXG4gIC8qKlxuICAgKiBQcmUtdW5tb3VuIHRoZSBUZXh0SW5wdXQgc2hvdWxkIGJsdXIsIHVucmVnaXN0ZXIgYW5kIGNsZWFuIHVwXG4gICAqIHRoZSBhbmltYXRpb24gZnJhbWUgZm9yIGZvY3VzIChlZGdlIGNhc2VzKVxuICAgKi9cbiAgcHVibGljIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgIC8vIGJsdXJcbiAgICBpZiAodGhpcy5pc0ZvY3VzZWQoKSkge1xuICAgICAgdGhpcy5ibHVyKCk7XG4gICAgfVxuXG4gICAgLy8gdW5yZWdpc3RlclxuICAgIFRleHRJbnB1dFN0YXRlLnVucmVnaXN0ZXJJbnB1dCh0aGlzKTtcblxuICAgIC8vIGNhbmNlbCBhbmltYXRpb25GcmFtZVxuICAgIGlmICh0aGlzLl9yYWZJRCAhPT0gbnVsbCkge1xuICAgICAgY2FuY2VsQW5pbWF0aW9uRnJhbWUodGhpcy5fcmFmSUQpO1xuICAgIH1cbiAgICBpZiAodGhpcy5fcmFmSUQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgcmV0dXJuO1xuICB9XG5cbiAgcHVibGljIHJlbmRlcigpIHtcbiAgICBjb25zdCBwcm9wczogVGV4dElucHV0UHJvcHMgPSB7IC4uLnRoaXMucHJvcHMgfTtcblxuICAgIC8vIEJ5IGRlZmF1bHQgZm9udFNjYWxpbmcgaXMgdHVybmVkIG9uLlxuICAgIC8vIHdpbjMyIGlnbm9yZXMgdGhpcyBwcm9wIGZvciB0aGUgdGltZSBiZWluZ1xuICAgIHByb3BzLmFsbG93Rm9udFNjYWxpbmcgPSAodGhpcy5wcm9wcy5hbGxvd0ZvbnRTY2FsaW5nID09PSBudWxsXG4gICAgICB8fCB0aGlzLnByb3BzLmFsbG93Rm9udFNjYWxpbmcgPT09IHVuZGVmaW5lZClcbiAgICAgID8gdHJ1ZSA6IHRoaXMucHJvcHMuYWxsb3dGb250U2NhbGluZztcblxuICAgIHJldHVybiAoXG4gICAgICA8VGV4dEFuY2VzdG9yLlByb3ZpZGVyIHZhbHVlPXsgdHJ1ZSB9PlxuICAgICAgICA8UkNUVGV4dElucHV0XG4gICAgICAgICAgeyAuLi5wcm9wcyB9XG4gICAgICAgICAgcmVmPXsgdGhpcy5faW5wdXRSZWYgfVxuICAgICAgICAgIHRleHQ9eyB0aGlzLl9nZXRUZXh0KCkgfVxuICAgICAgICAgIG9uRm9jdXM9eyB0aGlzLl9vbkZvY3VzIH1cbiAgICAgICAgICBvbkJsdXI9eyB0aGlzLl9vbkJsdXIgfVxuICAgICAgICAgIG9uQ2hhbmdlPXsgdGhpcy5fb25DaGFuZ2UgfVxuICAgICAgICAvPlxuICAgICAgPC9UZXh0QW5jZXN0b3IuUHJvdmlkZXI+XG4gICAgKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZXR1cm5zIHRydWUgaWYgdGhlIFRleHRJbnB1dCBpcyBmb2N1c2VkXG4gICAqL1xuICBwdWJsaWMgaXNGb2N1c2VkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBUZXh0SW5wdXRTdGF0ZS5jdXJyZW50bHlGb2N1c2VkSW5wdXQoKSA9PT0gdGhpcztcbiAgfVxuXG4gIC8qKlxuICAgKiBGb2N1c2VzIHRoZSBUZXh0SW5wdXRcbiAgICovXG4gIHB1YmxpYyBmb2N1cyA9ICgpOiB2b2lkID0+IHtcbiAgICBUZXh0SW5wdXRTdGF0ZS5zZXRGb2N1c2VkVGV4dElucHV0KHRoaXMpO1xuICAgIE5hdGl2ZU1vZHVsZXMuVUlNYW5hZ2VyLlxuICAgICAgZGlzcGF0Y2hWaWV3TWFuYWdlckNvbW1hbmQoZmluZE5vZGVIYW5kbGUodGhpcyksIFRleHRJbnB1dFZpZXdNYW5hZ2VyLkNvbW1hbmRzLmZvY3VzLCBudWxsKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBCbHVycyB0aGUgVGV4dElucHV0XG4gICAqL1xuICBwdWJsaWMgYmx1ciA9ICgpOiB2b2lkID0+IHtcbiAgICBUZXh0SW5wdXRTdGF0ZS5ibHVyVGV4dElucHV0KHRoaXMpO1xuICAgIE5hdGl2ZU1vZHVsZXMuVUlNYW5hZ2VyLlxuICAgICAgZGlzcGF0Y2hWaWV3TWFuYWdlckNvbW1hbmQoZmluZE5vZGVIYW5kbGUodGhpcyksIFRleHRJbnB1dFZpZXdNYW5hZ2VyLkNvbW1hbmRzLmJsdXIsIG51bGwpO1xuICB9XG5cbiAgLyoqXG4gICAqIFVzZSBjbGVhciBmb3IgcHJvZ3JhbW1hdGljIGNsZWFyaW5nIG9mIHRoZSB0ZXh0XG4gICAqL1xuICBwdWJsaWMgY2xlYXIgPSAoKTogdm9pZCA9PiB7XG4gICAgdGhpcy5zZXROYXRpdmVUZXh0KCcnKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RXZlbnRDb3VudCA9ICgpOiB2b2lkID0+IHtcbiAgICBOYXRpdmVNb2R1bGVzLlVJTWFuYWdlci5cbiAgICAgIGRpc3BhdGNoVmlld01hbmFnZXJDb21tYW5kKGZpbmROb2RlSGFuZGxlKHRoaXMpLCBUZXh0SW5wdXRWaWV3TWFuYWdlci5Db21tYW5kcy5zZXRFdmVudENvdW50LFxuICAgICAgICB7IGV2ZW50Q291bnQ6IHRoaXMuX2V2ZW50Q291bnQgfSk7XG4gIH1cblxuICBwcml2YXRlIHNldE5hdGl2ZVRleHQgPSAodmFsOiBzdHJpbmcpOiB2b2lkID0+IHtcbiAgICBpZiAodGhpcy5fbGFzdE5hdGl2ZVRleHQgIT09IHZhbCkge1xuICAgICAgTmF0aXZlTW9kdWxlcy5VSU1hbmFnZXIuXG4gICAgICAgIGRpc3BhdGNoVmlld01hbmFnZXJDb21tYW5kKGZpbmROb2RlSGFuZGxlKHRoaXMpLCBUZXh0SW5wdXRWaWV3TWFuYWdlci5Db21tYW5kcy5zZXROYXRpdmVUZXh0LFxuICAgICAgICAgIHsgdGV4dDogdmFsIH0pO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX2dldFRleHQgPSAoKTogc3RyaW5nIHwgbnVsbCA9PiB7XG4gICAgcmV0dXJuIHRoaXMucHJvcHMudmFsdWUgfHwgKHRoaXMucHJvcHMuZGVmYXVsdFZhbHVlIHx8IG51bGwpO1xuICB9XG5cbiAgcHJpdmF0ZSBfb25DaGFuZ2UgPSAoZTogSUNoYW5nZUV2ZW50KTogdm9pZCA9PiB7XG4gICAgY29uc3QgdGV4dCA9IGUubmF0aXZlRXZlbnQudGV4dDtcbiAgICB0aGlzLl9ldmVudENvdW50ID0gZS5uYXRpdmVFdmVudC5ldmVudENvdW50O1xuICAgIHRoaXMuc2V0RXZlbnRDb3VudCgpO1xuXG4gICAgdGhpcy5wcm9wcy5vbkNoYW5nZSAmJiB0aGlzLnByb3BzLm9uQ2hhbmdlKGUpO1xuICAgIHRoaXMucHJvcHMub25DaGFuZ2VUZXh0ICYmIHRoaXMucHJvcHMub25DaGFuZ2VUZXh0KHRleHQpO1xuICAgIHRoaXMuX2xhc3ROYXRpdmVUZXh0ID0gdGV4dDtcblxuICAgIHRoaXMuZm9yY2VVcGRhdGUoKTtcbiAgICByZXR1cm47XG4gIH1cblxuICBwcml2YXRlIF9vbkZvY3VzID0gKGU6IElGb2N1c0V2ZW50KTogdm9pZCA9PiB7XG4gICAgdGhpcy5mb2N1cygpO1xuICAgIHRoaXMucHJvcHMub25Gb2N1cyAmJiB0aGlzLnByb3BzLm9uRm9jdXMoZSk7XG4gIH1cblxuICBwcml2YXRlIF9vbkJsdXIgPSAoZTogSUJsdXJFdmVudCk6IHZvaWQgPT4ge1xuICAgIHRoaXMucHJvcHMub25CbHVyICYmIHRoaXMucHJvcHMub25CbHVyKGUpO1xuICB9XG59XG5cbmV4cG9ydCA9IFRleHRJbnB1dDtcbiJdfQ==
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {HostInstance} from '../../../src/private/types/HostInstance';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
+import type {
+  BlurEvent,
+  FocusEvent,
+  GestureResponderEvent,
+  ScrollEvent,
+} from '../../Types/CoreEventTypes';
+import type {
+  AutoCapitalize,
+  EnterKeyHintType,
+  EnterKeyHintTypeAndroid,
+  EnterKeyHintTypeIOS,
+  EnterKeyHintTypeOptions,
+  InputModeOptions,
+  KeyboardType,
+  KeyboardTypeAndroid,
+  KeyboardTypeIOS,
+  KeyboardTypeOptions,
+  ReturnKeyType,
+  ReturnKeyTypeAndroid,
+  ReturnKeyTypeIOS,
+  ReturnKeyTypeOptions,
+  Selection,
+  SubmitBehavior,
+  TextContentType,
+  TextInputAndroidProps,
+  TextInputBlurEvent,
+  TextInputChangeEvent,
+  TextInputContentSizeChangeEvent,
+  TextInputEditingEvent,
+  TextInputEndEditingEvent,
+  TextInputEvent,
+  TextInputFocusEvent,
+  TextInputInstance,
+  TextInputIOSProps,
+  TextInputKeyPressEvent,
+  TextInputProps,
+  TextInputSelectionChangeEvent,
+  TextInputSubmitEditingEvent,
+  TextInputType,
+  TextInputWindowsProps, // [Windows]
+} from './TextInput.flow.win32';
+
+import usePressability from '../../Pressability/usePressability';
+import flattenStyle from '../../StyleSheet/flattenStyle';
+import StyleSheet, {type TextStyleProp} from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import TextAncestor from '../../Text/TextAncestor';
+import Platform from '../../Utilities/Platform';
+import useMergeRefs from '../../Utilities/useMergeRefs';
+import TextInputState from './TextInputState';
+import invariant from 'invariant';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
+
+let AndroidTextInput;
+let AndroidTextInputCommands;
+let RCTSinglelineTextInputView;
+let RCTSinglelineTextInputNativeCommands;
+let RCTMultilineTextInputView;
+let RCTMultilineTextInputNativeCommands;
+let WindowsTextInput; // [Windows]
+let WindowsTextInputCommands; // [Windows]
+import type {KeyEvent} from '../../Types/CoreEventTypes'; // [Windows]
+
+// [Windows
+if (Platform.OS === 'android') {
+  AndroidTextInput = require('./AndroidTextInputNativeComponent').default;
+  AndroidTextInputCommands =
+    require('./AndroidTextInputNativeComponent').Commands;
+} else if (Platform.OS === 'ios') {
+  RCTSinglelineTextInputView =
+    require('./RCTSingelineTextInputNativeComponent').default;
+  RCTSinglelineTextInputNativeCommands =
+    require('./RCTSingelineTextInputNativeComponent').Commands;
+  RCTMultilineTextInputView =
+    require('./RCTMultilineTextInputNativeComponent').default;
+  RCTMultilineTextInputNativeCommands =
+    require('./RCTMultilineTextInputNativeComponent').Commands;
+}
+// [Windows
+else if (Platform.OS === 'win32') {
+  WindowsTextInput = require('./Win32TextInputNativeComponent').default;
+  WindowsTextInputCommands =
+    require('./Win32TextInputNativeComponent').Commands;
+}
+// Windows]
+
+export type {
+  AutoCapitalize,
+  BlurEvent,
+  EnterKeyHintType,
+  EnterKeyHintTypeAndroid,
+  EnterKeyHintTypeIOS,
+  EnterKeyHintTypeOptions,
+  FocusEvent,
+  InputModeOptions,
+  KeyboardType,
+  KeyboardTypeAndroid,
+  KeyboardTypeIOS,
+  KeyboardTypeOptions,
+  ReturnKeyType,
+  ReturnKeyTypeAndroid,
+  ReturnKeyTypeIOS,
+  ReturnKeyTypeOptions,
+  SubmitBehavior,
+  TextContentType,
+  TextInputAndroidProps,
+  TextInputBlurEvent,
+  TextInputChangeEvent,
+  TextInputContentSizeChangeEvent,
+  TextInputEditingEvent,
+  TextInputEndEditingEvent,
+  TextInputEvent,
+  TextInputFocusEvent,
+  TextInputIOSProps,
+  TextInputKeyPressEvent,
+  TextInputProps,
+  TextInputSelectionChangeEvent,
+  TextInputSubmitEditingEvent,
+  TextInputWindowsProps, // [Windows]
+};
+
+type TextInputStateType = $ReadOnly<{
+  /**
+   * @deprecated Use currentlyFocusedInput
+   * Returns the ID of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedField: () => ?number,
+
+  /**
+   * Returns the ref of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedInput: () => ?HostInstance,
+
+  /**
+   * @param textField ref of the text field to focus
+   * Focuses the specified text field
+   * noop if the text field was already focused
+   */
+  focusTextInput: (textField: ?HostInstance) => void,
+
+  /**
+   * @param textField ref of the text field to focus
+   * Unfocuses the specified text field
+   * noop if it wasn't focused
+   */
+  blurTextInput: (textField: ?HostInstance) => void,
+}>;
+
+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({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: TextInputProps,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | TextInputInstance>,
+  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};
+}
+
+/**
+ * A foundational component for inputting text into the app via a
+ * keyboard. Props provide configurability for several features, such as
+ * auto-correction, auto-capitalization, placeholder text, and different keyboard
+ * types, such as a numeric keypad.
+ *
+ * The simplest use case is to plop down a `TextInput` and subscribe to the
+ * `onChangeText` events to read the user input. There are also other events,
+ * such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple
+ * example:
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react';
+ * import { AppRegistry, TextInput } from 'react-native';
+ *
+ * export default class UselessTextInput extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = { text: 'Useless Placeholder' };
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <TextInput
+ *         style={{height: 40, borderColor: 'gray', borderWidth: 1}}
+ *         onChangeText={(text) => this.setState({text})}
+ *         value={this.state.text}
+ *       />
+ *     );
+ *   }
+ * }
+ *
+ * // skip this line if using Create React Native App
+ * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
+ * ```
+ *
+ * Two methods exposed via the native element are .focus() and .blur() that
+ * will focus or blur the TextInput programmatically.
+ *
+ * Note that some props are only available with `multiline={true/false}`.
+ * Additionally, border styles that apply to only one side of the element
+ * (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if
+ * `multiline=false`. To achieve the same effect, you can wrap your `TextInput`
+ * in a `View`:
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react';
+ * import { AppRegistry, View, TextInput } from 'react-native';
+ *
+ * class UselessTextInput extends Component {
+ *   render() {
+ *     return (
+ *       <TextInput
+ *         {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
+ *         editable={true}
+ *         maxLength={40}
+ *       />
+ *     );
+ *   }
+ * }
+ *
+ * export default class UselessTextInputMultiline extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       text: 'Useless Multiline Placeholder',
+ *     };
+ *   }
+ *
+ *   // If you type something in the text box that is a color, the background will change to that
+ *   // color.
+ *   render() {
+ *     return (
+ *      <View style={{
+ *        backgroundColor: this.state.text,
+ *        borderBottomColor: '#000000',
+ *        borderBottomWidth: 1 }}
+ *      >
+ *        <UselessTextInput
+ *          multiline={true}
+ *          numberOfLines={4}
+ *          onChangeText={(text) => this.setState({text})}
+ *          value={this.state.text}
+ *        />
+ *      </View>
+ *     );
+ *   }
+ * }
+ *
+ * // skip these lines if using Create React Native App
+ * AppRegistry.registerComponent(
+ *  'AwesomeProject',
+ *  () => UselessTextInputMultiline
+ * );
+ * ```
+ *
+ * `TextInput` has by default a border at the bottom of its view. This border
+ * has its padding set by the background image provided by the system, and it
+ * cannot be changed. Solutions to avoid this is to either not set height
+ * explicitly, case in which the system will take care of displaying the border
+ * in the correct position, or to not display the border by setting
+ * `underlineColorAndroid` to transparent.
+ *
+ * Note that on Android performing text selection in input can change
+ * app's activity `windowSoftInputMode` param to `adjustResize`.
+ * This may cause issues with components that have position: 'absolute'
+ * while keyboard is active. To avoid this behavior either specify `windowSoftInputMode`
+ * in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html )
+ * or control this param programmatically with native code.
+ *
+ */
+function InternalTextInput(props: TextInputProps): React.Node {
+  const {
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
+    'aria-multiselectable': ariaMultiselectable, // Win32
+    'aria-required': ariaRequired, // Win32
+    accessibilityState,
+    id,
+    tabIndex,
+    selection: propsSelection,
+    selectionColor,
+    selectionHandleColor,
+    cursorColor,
+    ...otherProps
+  } = props;
+
+  const inputRef = useRef<null | TextInputInstance>(null);
+
+  const selection: ?Selection =
+    propsSelection == null
+      ? null
+      : {
+          start: propsSelection.start,
+          end: propsSelection.end ?? propsSelection.start,
+        };
+
+  const text =
+    typeof props.value === 'string'
+      ? props.value
+      : typeof props.defaultValue === 'string'
+        ? props.defaultValue
+        : undefined;
+
+  const viewCommands =
+    WindowsTextInputCommands || // [Windows]
+    AndroidTextInputCommands ||
+    (props.multiline === true
+      ? RCTMultilineTextInputNativeCommands
+      : RCTSinglelineTextInputNativeCommands);
+
+  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
+  const {setLastNativeText, setLastNativeSelection} =
+    useTextInputStateSynchronization({
+      props,
+      inputRef,
+      mostRecentEventCount,
+      selection,
+      text,
+      // $FlowFixMe[incompatible-call]
+      viewCommands,
+    });
+
+  useLayoutEffect(() => {
+    const inputRefValue = inputRef.current;
+
+    if (inputRefValue != null) {
+      TextInputState.registerInput(inputRefValue);
+
+      return () => {
+        TextInputState.unregisterInput(inputRefValue);
+
+        if (TextInputState.currentlyFocusedInput() === inputRefValue) {
+          nullthrows(inputRefValue).blur();
+        }
+      };
+    }
+  }, []);
+
+  const setLocalRef = useCallback(
+    (instance: HostInstance | null) => {
+      // $FlowExpectedError[incompatible-type]
+      inputRef.current = instance;
+
+      /*
+      Hi reader from the future. I'm sorry for this.
+
+      This is a hack. Ideally we would forwardRef to the underlying
+      host component. However, since TextInput has it's own methods that can be
+      called as well, if we used the standard forwardRef then these
+      methods wouldn't be accessible and thus be a breaking change.
+
+      We have a couple of options of how to handle this:
+      - Return a new ref with everything we methods from both. This is problematic
+        because we need React to also know it is a host component which requires
+        internals of the class implementation of the ref.
+      - Break the API and have some other way to call one set of the methods or
+        the other. This is our long term approach as we want to eventually
+        get the methods on host components off the ref. So instead of calling
+        ref.measure() you might call ReactNative.measure(ref). This would hopefully
+        let the ref for TextInput then have the methods like `.clear`. Or we do it
+        the other way and make it TextInput.clear(textInputRef) which would be fine
+        too. Either way though is a breaking change that is longer term.
+      - Mutate this ref. :( Gross, but accomplishes what we need in the meantime
+        before we can get to the long term breaking change.
+      */
+      if (instance != null) {
+        // $FlowFixMe[prop-missing] - See the explanation above.
+        // $FlowFixMe[unsafe-object-assign]
+        Object.assign(instance, {
+          clear(): void {
+            if (inputRef.current != null) {
+              viewCommands.setTextAndSelection(
+                inputRef.current,
+                mostRecentEventCount,
+                '',
+                0,
+                0,
+              );
+            }
+          },
+          isFocused(): boolean {
+            const currentlyFocusedInput =
+              TextInputState.currentlyFocusedInput();
+            return (
+              currentlyFocusedInput !== null &&
+              currentlyFocusedInput === inputRef.current
+            );
+          },
+          getNativeRef(): ?TextInputInstance {
+            return inputRef.current;
+          },
+          setSelection(start: number, end: number): void {
+            if (inputRef.current != null) {
+              viewCommands.setTextAndSelection(
+                inputRef.current,
+                mostRecentEventCount,
+                null,
+                start,
+                end,
+              );
+            }
+          },
+        });
+      }
+    },
+    [mostRecentEventCount, viewCommands],
+  );
+
+  // $FlowExpectedError[incompatible-call]
+  const ref = useMergeRefs<HostInstance>(setLocalRef, props.forwardedRef);
+
+  const _onChange = (event: TextInputChangeEvent) => {
+    const currentText = event.nativeEvent.text;
+    props.onChange && props.onChange(event);
+    props.onChangeText && props.onChangeText(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: TextInputSelectionChangeEvent) => {
+    props.onSelectionChange && props.onSelectionChange(event);
+
+    if (inputRef.current == null) {
+      // calling `props.onSelectionChange`
+      // may clean up the input itself. Exits here.
+      return;
+    }
+
+    setLastNativeSelection({
+      selection: event.nativeEvent.selection,
+      mostRecentEventCount,
+    });
+  };
+
+  const _onFocus = (event: FocusEvent) => {
+    TextInputState.focusInput(inputRef.current);
+    if (props.onFocus) {
+      props.onFocus(event);
+    }
+  };
+
+  const _onBlur = (event: BlurEvent) => {
+    TextInputState.blurInput(inputRef.current);
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  };
+
+  const _onScroll = (event: ScrollEvent) => {
+    props.onScroll && props.onScroll(event);
+  };
+
+  let textInput = null;
+
+  const multiline = props.multiline ?? false;
+
+  let submitBehavior: SubmitBehavior;
+  if (props.submitBehavior != null) {
+    // `submitBehavior` is set explicitly
+    if (!multiline && props.submitBehavior === 'newline') {
+      // For single line text inputs, `'newline'` is not a valid option
+      submitBehavior = 'blurAndSubmit';
+    } else {
+      submitBehavior = props.submitBehavior;
+    }
+  } else if (multiline) {
+    if (props.blurOnSubmit === true) {
+      submitBehavior = 'blurAndSubmit';
+    } else {
+      submitBehavior = 'newline';
+    }
+  } else {
+    // Single line
+    if (props.blurOnSubmit !== false) {
+      submitBehavior = 'blurAndSubmit';
+    } else {
+      submitBehavior = 'submit';
+    }
+  }
+
+  const accessible = props.accessible !== false;
+
+  const accessibilityErrorMessage =
+    props.accessibilityInvalid === true
+      ? props.accessibilityErrorMessage
+      : null;
+
+  const focusable = props.focusable !== false;
+
+  const {
+    editable,
+    hitSlop,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+  } = props;
+
+  const config = useMemo(
+    () => ({
+      hitSlop,
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (editable !== false) {
+          if (inputRef.current != null) {
+            inputRef.current.focus();
+          }
+        }
+      },
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
+    }),
+    [
+      editable,
+      hitSlop,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
+    ],
+  );
+
+  // 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);
+  const eventPhase = Object.freeze({Capturing: 1, Bubbling: 3});
+  const _keyDown = (event: KeyEvent) => {
+    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
+      // $FlowFixMe - keyDownEvents was already checked to not be undefined
+      for (const el of props.keyDownEvents) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === eventPhase.Bubbling
+        ) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyDown && props.onKeyDown(event);
+  };
+
+  const _keyUp = (event: KeyEvent) => {
+    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
+      // $FlowFixMe - keyDownEvents was already checked to not be undefined
+      for (const el of props.keyUpEvents) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === 3
+        ) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyUp && props.onKeyUp(event);
+  };
+
+  const _keyDownCapture = (event: KeyEvent) => {
+    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
+      // $FlowFixMe - keyDownEvents was already checked to not be undefined
+      for (const el of props.keyDownEvents) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === 1
+        ) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyDownCapture && props.onKeyDownCapture(event);
+  };
+
+  const _keyUpCapture = (event: KeyEvent) => {
+    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
+      // $FlowFixMe - keyDownEvents was already checked to not be undefined
+      for (const el of props.keyUpEvents) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === 1
+        ) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyUpCapture && props.onKeyUpCapture(event);
+  };
+
+  let _accessibilityState;
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaMultiselectable != null ||
+    ariaRequired != null ||
+    ariaSelected != null
+  ) {
+    _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      multiselectable:
+        ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
+      required: ariaRequired ?? accessibilityState?.required, // Win32
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
+
+  // 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']);
+    }
+
+    if (flattenedStyle.verticalAlign != null) {
+      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides.textAlignVertical =
+        verticalAlignToTextAlignVerticalMap[flattenedStyle.verticalAlign];
+      overrides.verticalAlign = undefined;
+    }
+
+    if (overrides != null) {
+      // $FlowFixMe[incompatible-type]
+      _style = [_style, overrides];
+    }
+  }
+
+  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
+        // Figure out imperative + forward refs.
+        ref={(ref: $FlowFixMe)}
+        {...otherProps}
+        {...eventHandlers}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
+        accessibilityErrorMessage={accessibilityErrorMessage}
+        accessibilityState={_accessibilityState}
+        accessible={accessible}
+        submitBehavior={submitBehavior}
+        caretHidden={caretHidden}
+        dataDetectorTypes={props.dataDetectorTypes}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
+        numberOfLines={props.rows ?? props.numberOfLines}
+        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
+        // Figure out imperative + forward refs.
+        ref={(ref: $FlowFixMe)}
+        {...otherProps}
+        {...colorProps}
+        {...eventHandlers}
+        accessibilityErrorMessage={accessibilityErrorMessage}
+        accessibilityState={_accessibilityState}
+        accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessible={accessible}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
+        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}
+      />
+    );
+  } // [Windows
+  else if (Platform.OS === 'win32') {
+    textInput = (
+      <WindowsTextInput
+        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+        ref={ref}
+        {...props}
+        accessible={accessible}
+        focusable={focusable}
+        dataDetectorTypes={props.dataDetectorTypes}
+        mostRecentEventCount={mostRecentEventCount}
+        onBlur={_onBlur}
+        onChange={_onChange}
+        onContentSizeChange={props.onContentSizeChange}
+        onFocus={_onFocus}
+        onScroll={_onScroll}
+        onSelectionChange={_onSelectionChange}
+        onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
+        selection={selection}
+        text={text}
+        onKeyDown={_keyDown}
+        onKeyDownCapture={_keyDownCapture}
+        onKeyUp={_keyUp}
+        onKeyUpCapture={_keyUpCapture}
+      />
+    );
+  } // Windows]
+  return (
+    <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
+  );
+}
+
+const enterKeyHintToReturnTypeMap = {
+  enter: 'default',
+  done: 'done',
+  go: 'go',
+  next: 'next',
+  previous: 'previous',
+  search: 'search',
+  send: 'send',
+} as const;
+
+const inputModeToKeyboardTypeMap = {
+  none: 'default',
+  text: 'default',
+  decimal: 'decimal-pad',
+  numeric: 'number-pad',
+  tel: 'phone-pad',
+  search:
+    Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
+  email: 'email-address',
+  url: 'url',
+} as const;
+
+// Map HTML autocomplete values to Android autoComplete values
+const autoCompleteWebToAutoCompleteAndroidMap = {
+  'address-line1': 'postal-address-region',
+  'address-line2': 'postal-address-locality',
+  bday: 'birthdate-full',
+  'bday-day': 'birthdate-day',
+  'bday-month': 'birthdate-month',
+  'bday-year': 'birthdate-year',
+  'cc-csc': 'cc-csc',
+  'cc-exp': 'cc-exp',
+  'cc-exp-month': 'cc-exp-month',
+  'cc-exp-year': 'cc-exp-year',
+  'cc-number': 'cc-number',
+  country: 'postal-address-country',
+  'current-password': 'password',
+  email: 'email',
+  'honorific-prefix': 'name-prefix',
+  'honorific-suffix': 'name-suffix',
+  name: 'name',
+  'additional-name': 'name-middle',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
+  'new-password': 'password-new',
+  off: 'off',
+  'one-time-code': 'sms-otp',
+  'postal-code': 'postal-code',
+  sex: 'gender',
+  'street-address': 'street-address',
+  tel: 'tel',
+  'tel-country-code': 'tel-country-code',
+  'tel-national': 'tel-national',
+  username: 'username',
+} as const;
+
+// Map HTML autocomplete values to iOS textContentType values
+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',
+  name: 'name',
+  'additional-name': 'middleName',
+  'family-name': 'familyName',
+  'given-name': 'givenName',
+  nickname: 'nickname',
+  'honorific-prefix': 'namePrefix',
+  'honorific-suffix': 'nameSuffix',
+  'new-password': 'newPassword',
+  off: 'none',
+  'one-time-code': 'oneTimeCode',
+  organization: 'organizationName',
+  'organization-title': 'jobTitle',
+  'postal-code': 'postalCode',
+  'street-address': 'fullStreetAddress',
+  tel: 'telephoneNumber',
+  url: 'URL',
+  username: 'username',
+} as const;
+
+const TextInput: component(
+  ref?: React.RefSetter<TextInputInstance>,
+  ...props: React.ElementConfig<typeof InternalTextInput>
+) = function TextInput({
+  ref: forwardedRef,
+  allowFontScaling = true,
+  rejectResponderTermination = true,
+  underlineColorAndroid = 'transparent',
+  autoComplete,
+  textContentType,
+  readOnly,
+  editable,
+  enterKeyHint,
+  returnKeyType,
+  inputMode,
+  showSoftInputOnFocus,
+  keyboardType,
+  ...restProps
+}: {
+  ref?: React.RefSetter<TextInputInstance>,
+  ...React.ElementConfig<typeof InternalTextInput>,
+}) {
+  return (
+    <InternalTextInput
+      allowFontScaling={allowFontScaling}
+      rejectResponderTermination={rejectResponderTermination}
+      underlineColorAndroid={underlineColorAndroid}
+      editable={readOnly !== undefined ? !readOnly : editable}
+      returnKeyType={
+        enterKeyHint ? enterKeyHintToReturnTypeMap[enterKeyHint] : returnKeyType
+      }
+      keyboardType={
+        inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
+      }
+      showSoftInputOnFocus={
+        inputMode == null ? showSoftInputOnFocus : inputMode !== 'none'
+      }
+      autoComplete={
+        Platform.OS === 'android'
+          ? // $FlowFixMe[invalid-computed-prop]
+            // $FlowFixMe[prop-missing]
+            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+            autoComplete
+          : undefined
+      }
+      textContentType={
+        textContentType != null
+          ? textContentType
+          : Platform.OS === 'ios' &&
+              autoComplete &&
+              autoComplete in autoCompleteWebToTextContentTypeMap
+            ? // $FlowFixMe[prop-missing]
+              autoCompleteWebToTextContentTypeMap[autoComplete]
+            : textContentType
+      }
+      {...restProps}
+      forwardedRef={forwardedRef}
+    />
+  );
+};
+
+TextInput.displayName = 'TextInput';
+
+// $FlowFixMe[prop-missing]
+TextInput.State = {
+  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
+
+  currentlyFocusedField: TextInputState.currentlyFocusedField,
+  focusTextInput: TextInputState.focusTextInput,
+  blurTextInput: TextInputState.blurTextInput,
+};
+
+export type TextInputComponentStatics = $ReadOnly<{
+  State: TextInputStateType,
+}>;
+
+const styles = StyleSheet.create({
+  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.
+    paddingTop: 5,
+  },
+});
+
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+} as const;
+
+// $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
+export default TextInput as any as TextInputType;