diff --git a/src/components/Form.js b/src/components/Form.js
index c169113f809..ac9aaf1673f 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -154,7 +154,7 @@ class Form extends React.Component {
                     this.setTouchedInput(inputID);
                     this.validate(this.inputValues);
                 },
-                onChange: (value) => {
+                onInputChange: (value) => {
                     this.inputValues[inputID] = value;
                     if (child.props.shouldSaveDraft) {
                         FormActions.setDraftValues(this.props.formID, {[inputID]: value});
diff --git a/src/components/RoomNameInput.js b/src/components/RoomNameInput.js
index 430572844a2..acbdfcdc36d 100644
--- a/src/components/RoomNameInput.js
+++ b/src/components/RoomNameInput.js
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
-import styles from '../styles/styles';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import withFullPolicy, {fullPolicyDefaultProps, fullPolicyPropTypes} from '../pages/workspace/withFullPolicy';
-import TextInputWithPrefix from './TextInputWithPrefix';
+import TextInput from './TextInput';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -103,12 +102,11 @@ class RoomNameInput extends Component {
 
     render() {
         return (
-            <TextInputWithPrefix
+            <TextInput
                 disabled={this.props.disabled}
                 label={this.props.translate('newRoomPage.roomName')}
-                prefixCharacter="#"
+                prefixCharacter={CONST.POLICY.ROOM_PREFIX}
                 placeholder={this.props.translate('newRoomPage.social')}
-                containerStyles={[styles.mb5]}
                 onChange={this.setModifiedRoomName}
                 value={this.state.roomName.substring(1)}
                 errorText={this.props.errorText}
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 2aa61153e42..283bfa5a9ba 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -20,7 +20,7 @@ class BaseTextInput extends Component {
         super(props);
 
         this.value = props.value || props.defaultValue || '';
-        const activeLabel = props.forceActiveLabel || this.value.length > 0;
+        const activeLabel = props.forceActiveLabel || this.value.length > 0 || props.prefixCharacter;
 
         this.state = {
             isFocused: false,
@@ -28,6 +28,7 @@ class BaseTextInput extends Component {
             labelScale: new Animated.Value(activeLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE),
             passwordHidden: props.secureTextEntry,
             textInputWidth: 0,
+            prefixWidth: 0,
         };
 
         this.input = null;
@@ -38,6 +39,7 @@ class BaseTextInput extends Component {
         this.setValue = this.setValue.bind(this);
         this.togglePasswordVisibility = this.togglePasswordVisibility.bind(this);
         this.dismissKeyboardWhenBackgrounded = this.dismissKeyboardWhenBackgrounded.bind(this);
+        this.storePrefixLayoutDimensions = this.storePrefixLayoutDimensions.bind(this);
     }
 
     componentDidMount() {
@@ -120,8 +122,8 @@ class BaseTextInput extends Component {
      * @memberof BaseTextInput
      */
     setValue(value) {
-        if (this.props.onChange) {
-            this.props.onChange(value);
+        if (this.props.onInputChange) {
+            this.props.onInputChange(value);
         }
         this.value = value;
         Str.result(this.props.onChangeText, value);
@@ -141,7 +143,7 @@ class BaseTextInput extends Component {
     }
 
     deactivateLabel() {
-        if (this.props.forceActiveLabel || this.value.length !== 0) {
+        if (this.props.forceActiveLabel || this.value.length !== 0 || this.props.prefixCharacter) {
             return;
         }
 
@@ -176,6 +178,10 @@ class BaseTextInput extends Component {
         this.setState(prevState => ({passwordHidden: !prevState.passwordHidden}));
     }
 
+    storePrefixLayoutDimensions(event) {
+        this.setState({prefixWidth: Math.abs(event.nativeEvent.layout.width)});
+    }
+
     render() {
         // eslint-disable-next-line react/forbid-foreign-prop-types
         const inputProps = _.omit(this.props, _.keys(baseTextInputPropTypes.propTypes));
@@ -215,7 +221,20 @@ class BaseTextInput extends Component {
                                         />
                                     </>
                                 ) : null}
-                                <View style={[styles.textInputAndIconContainer]}>
+                                <View style={[styles.textInputAndIconContainer]} pointerEvents="box-none">
+                                    {Boolean(this.props.prefixCharacter) && (
+                                        <Text
+                                            pointerEvents="none"
+                                            selectable={false}
+                                            style={[
+                                                styles.textInputPrefix,
+                                                !hasLabel && styles.pv0,
+                                            ]}
+                                            onLayout={this.storePrefixLayoutDimensions}
+                                        >
+                                            {this.props.prefixCharacter}
+                                        </Text>
+                                    )}
                                     <RNTextInput
                                         ref={(ref) => {
                                             if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); }
@@ -224,7 +243,7 @@ class BaseTextInput extends Component {
                                         // eslint-disable-next-line
                                         {...inputProps}
                                         defaultValue={this.value}
-                                        placeholder={(this.state.isFocused || !this.props.label) ? this.props.placeholder : null}
+                                        placeholder={(this.props.prefixCharacter || this.state.isFocused || !this.props.label) ? this.props.placeholder : null}
                                         placeholderTextColor={themeColors.placeholderText}
                                         underlineColorAndroid="transparent"
                                         style={[
@@ -232,6 +251,7 @@ class BaseTextInput extends Component {
                                             styles.w100,
                                             this.props.inputStyle,
                                             !hasLabel && styles.pv0,
+                                            this.props.prefixCharacter && StyleUtils.getPaddingLeft(this.state.prefixWidth + styles.pl1.paddingLeft),
                                             this.props.secureTextEntry && styles.pr2,
                                         ]}
                                         multiline={this.props.multiline}
diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js
index 1454049c495..e6a612d7320 100644
--- a/src/components/TextInput/baseTextInputPropTypes.js
+++ b/src/components/TextInput/baseTextInputPropTypes.js
@@ -47,6 +47,17 @@ const propTypes = {
     /** Forward the inner ref */
     innerRef: PropTypes.func,
 
+    /** Maximum characters allowed */
+    maxLength: PropTypes.number,
+
+    /** Hint text to display below the TextInput */
+    hint: PropTypes.string,
+
+    /** Prefix character */
+    prefixCharacter: PropTypes.string,
+
+    /** Form props */
+
     /** Indicates that the input is being used with the Form component */
     isFormInput: PropTypes.bool,
 
@@ -61,11 +72,8 @@ const propTypes = {
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft: PropTypes.bool,
 
-    /** Maximum characters allowed */
-    maxLength: PropTypes.number,
-
-    /** Hint text to display below the TextInput */
-    hint: PropTypes.string,
+    /** Callback to update the value on Form when input is used in the Form component. */
+    onInputChange: PropTypes.func,
 };
 
 const defaultProps = {
@@ -94,6 +102,8 @@ const defaultProps = {
     shouldSaveDraft: false,
     maxLength: null,
     hint: '',
+    prefixCharacter: '',
+    onInputChange: () => {},
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/TextInputWithPrefix/index.android.js b/src/components/TextInputWithPrefix/index.android.js
deleted file mode 100644
index b04f68bd149..00000000000
--- a/src/components/TextInputWithPrefix/index.android.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import {View} from 'react-native';
-import _ from 'underscore';
-import React from 'react';
-import RNTextInput from '../RNTextInput';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import InlineErrorText from '../InlineErrorText';
-
-const propTypes = {
-    /** Prefix character */
-    prefixCharacter: PropTypes.string.isRequired,
-
-    /** Text to show if there is an error */
-    errorText: PropTypes.string,
-
-    /** Whether to disable the field and style */
-    disabled: PropTypes.bool,
-
-};
-
-const defaultProps = {
-    errorText: '',
-    disabled: false,
-};
-
-const TextInputWithPrefix = props => (
-    <>
-        <View
-            style={[
-                styles.textInputWithPrefix.container,
-                {paddingTop: 0},
-                props.disabled && styles.inputDisabled,
-                props.errorText && styles.errorOutline,
-            ]}
-        >
-            <Text style={[styles.textInputWithPrefix.prefix, {paddingTop: 10}]}>{props.prefixCharacter}</Text>
-            <RNTextInput
-                style={[
-                    styles.textInputWithPrefix.textInput,
-                    styles.noOutline,
-                    {height: 40},
-                ]}
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {..._.omit(props, ['prefixCharacter', 'errorText'])}
-            />
-        </View>
-        {!_.isEmpty(props.errorText) && (
-            <InlineErrorText>
-                {props.errorText}
-            </InlineErrorText>
-        )}
-    </>
-);
-
-TextInputWithPrefix.propTypes = propTypes;
-TextInputWithPrefix.defaultProps = defaultProps;
-export default TextInputWithPrefix;
diff --git a/src/components/TextInputWithPrefix/index.js b/src/components/TextInputWithPrefix/index.js
deleted file mode 100644
index fc64d65a737..00000000000
--- a/src/components/TextInputWithPrefix/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import {View} from 'react-native';
-import _ from 'underscore';
-import React from 'react';
-import RNTextInput from '../RNTextInput';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import InlineErrorText from '../InlineErrorText';
-
-const propTypes = {
-    /** Prefix character */
-    prefixCharacter: PropTypes.string.isRequired,
-
-    /** Text to show if there is an error */
-    errorText: PropTypes.string,
-
-    /** Whether to disable the field and style */
-    disabled: PropTypes.bool,
-
-};
-
-const defaultProps = {
-    errorText: '',
-    disabled: false,
-};
-
-const TextInputWithPrefix = props => (
-    <>
-        <View
-            style={[
-                styles.textInputWithPrefix.container,
-                props.disabled ? styles.inputDisabled : undefined,
-                props.errorText ? styles.errorOutline : undefined,
-            ]}
-        >
-            <Text style={styles.textInputWithPrefix.prefix}>{props.prefixCharacter}</Text>
-            <RNTextInput
-                style={[
-                    styles.textInputWithPrefix.textInput,
-                    styles.noOutline,
-                ]}
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {..._.omit(props, ['prefixCharacter', 'errorText'])}
-            />
-        </View>
-        {!_.isEmpty(props.errorText) && (
-            <InlineErrorText>
-                {props.errorText}
-            </InlineErrorText>
-        )}
-    </>
-);
-
-TextInputWithPrefix.propTypes = propTypes;
-TextInputWithPrefix.defaultProps = defaultProps;
-export default TextInputWithPrefix;
diff --git a/src/pages/ReportSettingsPage.js b/src/pages/ReportSettingsPage.js
index ab9b6e7130f..724c1a013dd 100644
--- a/src/pages/ReportSettingsPage.js
+++ b/src/pages/ReportSettingsPage.js
@@ -188,7 +188,7 @@ class ReportSettingsPage extends Component {
                         <Text style={[styles.formLabel]} numberOfLines={1}>
                             {this.props.translate('newRoomPage.roomName')}
                         </Text>
-                        <View style={[styles.flexRow]}>
+                        <View style={[styles.flexRow, styles.mb1]}>
                             <View style={[styles.flex3]}>
                                 <RoomNameInput
                                     initialValue={this.state.newRoomName}
@@ -199,12 +199,13 @@ class ReportSettingsPage extends Component {
                                 />
                             </View>
                             <Button
+                                large
                                 success={!shouldDisableRename}
                                 text={this.props.translate('common.save')}
                                 onPress={this.validateAndRenameReport}
                                 style={[styles.ml2, styles.flex1]}
                                 textStyles={[styles.label]}
-                                innerStyles={[styles.reportSettingsChangeNameButton]}
+                                innerStyles={[styles.ph5]}
                                 isLoading={this.props.isLoadingRenamePolicyRoom}
                                 isDisabled={shouldDisableRename}
                             />
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 0340dcf17de..780bf75f487 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -158,7 +158,6 @@ class WorkspaceNewRoomPage extends React.Component {
                     />
                     <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
                         <View style={styles.mb5}>
-                            <Text style={[styles.formLabel]}>{this.props.translate('newRoomPage.roomName')}</Text>
                             <RoomNameInput
                                 initialValue={this.state.roomName}
                                 policyID={this.state.policyID}
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index a9f2ffbd5e5..d09bd2e0360 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import TextInput from '../components/TextInput';
 import AddressSearch from '../components/AddressSearch';
 import Form from '../components/Form';
 import * as FormActions from '../libs/actions/FormActions';
 import styles from '../styles/styles';
+import Text from '../components/Text';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -50,6 +51,36 @@ const Template = (args) => {
     );
 };
 
+/**
+ * Story to exhibit the native event handlers for TextInput in the Form Component
+ * @param {Object} args
+ * @returns {JSX}
+ */
+const WithNativeEventHandler = (args) => {
+    const [log, setLog] = useState('');
+
+    // Form consumes data from Onyx, so we initialize Onyx with the necessary data here
+    FormActions.setIsSubmitting(args.formID, args.formState.isSubmitting);
+    FormActions.setServerErrorMessage(args.formID, args.formState.serverErrorMessage);
+    FormActions.setDraftValues(args.formID, args.draftValues);
+
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <Form {...args}>
+            <TextInput
+                label="Routing number"
+                inputID="routingNumber"
+                onChangeText={setLog}
+                isFormInput
+                shouldSaveDraft
+            />
+            <Text>
+                {`Entered routing number: ${log}`}
+            </Text>
+        </Form>
+    );
+};
+
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Default = Template.bind({});
@@ -90,6 +121,7 @@ Default.args = defaultArgs;
 Loading.args = {...defaultArgs, formState: {isSubmitting: true}};
 ServerError.args = {...defaultArgs, formState: {isSubmitting: false, serverErrorMessage: 'There was an unexpected error. Please try again later.'}};
 InputError.args = {...defaultArgs, draftValues: {routingNumber: '', accountNumber: ''}};
+WithNativeEventHandler.args = {...defaultArgs, draftValues: {routingNumber: '', accountNumber: ''}};
 
 export default story;
 export {
@@ -97,4 +129,5 @@ export {
     Loading,
     ServerError,
     InputError,
+    WithNativeEventHandler,
 };
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 038ed6b5f5d..ae1e9f310c9 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -404,6 +404,17 @@ function parseStyleAsArray(styleParam) {
     return _.isArray(styleParam) ? styleParam : [styleParam];
 }
 
+/**
+ * Get variable padding-left as style
+ * @param {Number} paddingLeft
+ * @returns {Object}
+ */
+function getPaddingLeft(paddingLeft) {
+    return {
+        paddingLeft,
+    };
+}
+
 export {
     getSafeAreaPadding,
     getSafeAreaMargins,
@@ -428,4 +439,5 @@ export {
     getMiniReportActionContextMenuWrapperStyle,
     getPaymentMethodMenuWidth,
     parseStyleAsArray,
+    getPaddingLeft,
 };
diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js
index 9ee222cd733..db9ba66fe08 100644
--- a/src/styles/addOutlineWidth/index.js
+++ b/src/styles/addOutlineWidth/index.js
@@ -17,7 +17,7 @@ function withOutlineWidth(obj, val, error = false) {
     return {
         ...obj,
         outlineWidth: val,
-        boxShadow: `0px 0px 0px ${val}px ${error ? themeDefault.badgeDangerBG : themeDefault.borderFocus}`,
+        boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${error ? themeDefault.badgeDangerBG : themeDefault.borderFocus}` : 'none',
     };
 }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2edbe8d6ea8..82b6e3b7d18 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -729,40 +729,18 @@ const styles = {
         textAlignVertical: 'center',
     },
 
-    textInputWithPrefix: {
-        container: {
-            backgroundColor: themeColors.componentBG,
-            borderColor: themeColors.border,
-            borderWidth: 1,
-            borderRadius: variables.componentBorderRadiusNormal,
-            color: themeColors.text,
-            display: 'flex',
-            flexDirection: 'row',
-            fontFamily: fontFamily.GTA,
-            fontSize: variables.fontSizeNormal,
-            height: variables.inputComponentSizeNormal,
-            marginBottom: 4,
-            paddingBottom: 10,
-            paddingLeft: 12,
-            paddingRight: 12,
-            paddingTop: 10,
-            textAlignVertical: 'center',
-        },
-        textInput: {
-            outlineStyle: 'none',
-            color: themeColors.text,
-            fontFamily: fontFamily.GTA,
-            fontSize: variables.fontSizeNormal,
-            textAlignVertical: 'center',
-            flex: 1,
-        },
-        prefix: {
-            paddingRight: 10,
-            color: themeColors.text,
-            fontFamily: fontFamily.GTA,
-            fontSize: variables.fontSizeNormal,
-            textAlignVertical: 'center',
-        },
+    textInputPrefix: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        height: '100%',
+        paddingLeft: 11,
+        paddingTop: 23,
+        paddingBottom: 8,
+        color: themeColors.text,
+        fontFamily: fontFamily.GTA,
+        fontSize: variables.fontSizeNormal,
+        textAlignVertical: 'center',
     },
 
     pickerContainer: {
@@ -1762,11 +1740,6 @@ const styles = {
         ...flex.alignItemsCenter,
     },
 
-    reportSettingsChangeNameButton: {
-        height: 42,
-        paddingHorizontal: 20,
-    },
-
     reportSettingsVisibilityText: {
         textTransform: 'capitalize',
     },
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 4e18848fd18..d298f0e0ac6 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -286,6 +286,10 @@ export default {
         paddingRight: 60,
     },
 
+    pl1: {
+        paddingLeft: 4,
+    },
+
     pl5: {
         paddingLeft: 20,
     },