diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
deleted file mode 100644
index 25e1ce6f05ec..000000000000
--- a/src/components/AmountTextInput.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
-import refPropTypes from './refPropTypes';
-import TextInput from './TextInput';
-
-const propTypes = {
- /** Formatted amount in local currency */
- formattedAmount: PropTypes.string.isRequired,
-
- /** A ref to forward to amount text input */
- forwardedRef: refPropTypes,
-
- /** Function to call when amount in text input is changed */
- onChangeAmount: PropTypes.func.isRequired,
-
- /** Placeholder value for amount text input */
- placeholder: PropTypes.string.isRequired,
-
- /** Selection Object */
- selection: PropTypes.shape({
- start: PropTypes.number,
- end: PropTypes.number,
- }),
-
- /** Function to call when selection in text input is changed */
- onSelectionChange: PropTypes.func,
-
- /** Style for the input */
- style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
- /** Style for the container */
- containerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
- /** Function to call to handle key presses in the text input */
- onKeyPress: PropTypes.func,
-};
-
-const defaultProps = {
- forwardedRef: undefined,
- selection: undefined,
- onSelectionChange: () => {},
- onKeyPress: () => {},
- style: {},
- containerStyles: {},
-};
-
-function AmountTextInput(props) {
- const styles = useThemeStyles();
- const StyleUtils = useStyleUtils();
- return (
-
- );
-}
-
-AmountTextInput.propTypes = propTypes;
-AmountTextInput.defaultProps = defaultProps;
-AmountTextInput.displayName = 'AmountTextInput';
-
-const AmountTextInputWithRef = React.forwardRef((props, ref) => (
-
-));
-
-AmountTextInputWithRef.displayName = 'AmountTextInputWithRef';
-
-export default AmountTextInputWithRef;
diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx
new file mode 100644
index 000000000000..d524bced5a2d
--- /dev/null
+++ b/src/components/AmountTextInput.tsx
@@ -0,0 +1,74 @@
+import type {ForwardedRef} from 'react';
+import React from 'react';
+import type {StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type TextInputSelection from '@src/types/utils/TextInputSelection';
+import TextInputComponent from './TextInput';
+
+type AmountTextInputProps = {
+ /** Formatted amount in local currency */
+ formattedAmount: string;
+
+ /** A ref to forward to amount text input */
+ forwardedRef?: ForwardedRef;
+
+ /** Function to call when amount in text input is changed */
+ onChangeAmount: (amount: string) => void;
+
+ /** Placeholder value for amount text input */
+ placeholder: string;
+
+ /** Selection Object */
+ selection?: TextInputSelection;
+
+ /** Function to call when selection in text input is changed */
+ onSelectionChange?: () => void;
+
+ /** Style for the input */
+ style?: StyleProp;
+
+ /** Style for the container */
+ containerStyles?: StyleProp;
+
+ /** Function to call to handle key presses in the text input */
+ onKeyPress?: () => void;
+};
+
+function AmountTextInput({
+ formattedAmount,
+ forwardedRef = undefined,
+ onChangeAmount,
+ placeholder,
+ selection = undefined,
+ onSelectionChange = () => {},
+ style = {},
+ containerStyles = {},
+ onKeyPress = () => {},
+}: AmountTextInputProps) {
+ const styles = useThemeStyles();
+ return (
+
+ );
+}
+
+AmountTextInput.displayName = 'AmountTextInput';
+
+export default React.forwardRef(AmountTextInput);
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index f8376219d80f..7530e7cbc2c4 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -24,7 +24,7 @@ type CustomBaseTextInputProps = {
errorText?: MaybePhraseKey;
/** Icon to display in right side of text input */
- icon: IconAsset | null;
+ icon?: IconAsset | null;
/** Customize the TextInput container */
textInputContainerStyles?: StyleProp;
diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts
index 32ebca9afee8..4f93c267a3fc 100644
--- a/src/libs/ComposerUtils/index.ts
+++ b/src/libs/ComposerUtils/index.ts
@@ -1,16 +1,12 @@
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type TextInputSelection from '@src/types/utils/TextInputSelection';
import getNumberOfLines from './getNumberOfLines';
import updateNumberOfLines from './updateNumberOfLines';
-type Selection = {
- start: number;
- end: number;
-};
-
/**
* Replace substring between selection with a text.
*/
-function insertText(text: string, selection: Selection, textToInsert: string): string {
+function insertText(text: string, selection: TextInputSelection, textToInsert: string): string {
return text.slice(0, selection.start) + textToInsert + text.slice(selection.end, text.length);
}
diff --git a/src/types/utils/TextInputSelection.ts b/src/types/utils/TextInputSelection.ts
new file mode 100644
index 000000000000..8c7671a60ccc
--- /dev/null
+++ b/src/types/utils/TextInputSelection.ts
@@ -0,0 +1,6 @@
+type TextInputSelection = {
+ start: number;
+ end: number;
+};
+
+export default TextInputSelection;