From db66206d282d910f719f5d794e50cc353a8a2248 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 09:11:09 +0100
Subject: [PATCH 01/10] ref: adjusted types and finish ts migration

---
 src/components/Button/{index.js => index.tsx} | 234 ++++++++----------
 .../Button/validateSubmitShortcut/index.js    |  19 --
 .../validateSubmitShortcut/index.native.js    |  17 --
 .../validateSubmitShortcut/index.native.ts    |  20 ++
 .../Button/validateSubmitShortcut/index.ts    |  22 ++
 .../Button/validateSubmitShortcut/types.ts    |   3 +
 6 files changed, 143 insertions(+), 172 deletions(-)
 rename src/components/Button/{index.js => index.tsx} (68%)
 delete mode 100644 src/components/Button/validateSubmitShortcut/index.js
 delete mode 100644 src/components/Button/validateSubmitShortcut/index.native.js
 create mode 100644 src/components/Button/validateSubmitShortcut/index.native.ts
 create mode 100644 src/components/Button/validateSubmitShortcut/index.ts
 create mode 100644 src/components/Button/validateSubmitShortcut/types.ts

diff --git a/src/components/Button/index.js b/src/components/Button/index.tsx
similarity index 68%
rename from src/components/Button/index.js
rename to src/components/Button/index.tsx
index 5fe7dd1fe812..9e0e35b914e6 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.tsx
@@ -1,11 +1,10 @@
 import {useIsFocused} from '@react-navigation/native';
-import PropTypes from 'prop-types';
-import React, {useCallback} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import React, {ForwardedRef, useCallback} from 'react';
+import {ActivityIndicator, GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import refPropTypes from '@components/refPropTypes';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
@@ -16,195 +15,155 @@ import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
-const propTypes = {
+type ButtonProps = {
     /** Should the press event bubble across multiple instances when Enter key triggers it. */
-    allowBubble: PropTypes.bool,
+    allowBubble?: boolean;
 
     /** The text for the button label */
-    text: PropTypes.string,
+    text?: string;
 
     /** Boolean whether to display the right icon */
-    shouldShowRightIcon: PropTypes.bool,
+    shouldShowRightIcon?: boolean;
 
     /** The icon asset to display to the left of the text */
-    icon: PropTypes.func,
+    icon?: React.FC<SvgProps> | null;
 
     /** The icon asset to display to the right of the text */
-    iconRight: PropTypes.func,
+    iconRight?: React.FC<SvgProps>;
 
     /** The fill color to pass into the icon. */
-    iconFill: PropTypes.string,
+    iconFill?: string;
 
     /** Any additional styles to pass to the left icon container. */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconStyles: PropTypes.arrayOf(PropTypes.object),
+    iconStyles?: Array<StyleProp<ViewStyle>>;
 
     /** Any additional styles to pass to the right icon container. */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconRightStyles: PropTypes.arrayOf(PropTypes.object),
+    iconRightStyles?: Array<StyleProp<ViewStyle>>;
 
     /** Small sized button */
-    small: PropTypes.bool,
+    small?: boolean;
 
     /** Large sized button */
-    large: PropTypes.bool,
+    large?: boolean;
 
-    /** medium sized button */
-    medium: PropTypes.bool,
+    /** Medium sized button */
+    medium?: boolean;
 
     /** Indicates whether the button should be disabled and in the loading state */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 
     /** Indicates whether the button should be disabled */
-    isDisabled: PropTypes.bool,
+    isDisabled?: boolean;
 
     /** A function that is called when the button is clicked on */
-    onPress: PropTypes.func,
+    onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void;
 
     /** A function that is called when the button is long pressed */
-    onLongPress: PropTypes.func,
+    onLongPress?: (e?: GestureResponderEvent) => void;
 
     /** A function that is called when the button is pressed */
-    onPressIn: PropTypes.func,
+    onPressIn?: () => void;
 
     /** A function that is called when the button is released */
-    onPressOut: PropTypes.func,
+    onPressOut?: () => void;
 
     /** Callback that is called when mousedown is triggered. */
-    onMouseDown: PropTypes.func,
+    onMouseDown?: () => void;
 
     /** Call the onPress function when Enter key is pressed */
-    pressOnEnter: PropTypes.bool,
+    pressOnEnter?: boolean;
 
     /** The priority to assign the enter key event listener. 0 is the highest priority. */
-    enterKeyEventListenerPriority: PropTypes.number,
+    enterKeyEventListenerPriority?: number;
 
     /** Additional styles to add after local styles. Applied to Pressable portion of button */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    style?: ViewStyle | ViewStyle[];
 
-    /** Additional button styles. Specific to the OpacityView of button */
-    // eslint-disable-next-line react/forbid-prop-types
-    innerStyles: PropTypes.arrayOf(PropTypes.object),
+    /** Additional button styles. Specific to the OpacityView of the button */
+    innerStyles?: Array<StyleProp<ViewStyle>>;
 
     /** Additional text styles */
-    // eslint-disable-next-line react/forbid-prop-types
-    textStyles: PropTypes.arrayOf(PropTypes.object),
+    textStyles?: Array<StyleProp<TextStyle>>;
 
     /** Whether we should use the default hover style */
-    shouldUseDefaultHover: PropTypes.bool,
+    shouldUseDefaultHover?: boolean;
 
     /** Whether we should use the success theme color */
-    success: PropTypes.bool,
+    success?: boolean;
 
     /** Whether we should use the danger theme color */
-    danger: PropTypes.bool,
+    danger?: boolean;
 
-    /** Children to replace all inner contents of button */
-    children: PropTypes.node,
+    /** Children to replace all inner contents of the button */
+    children?: React.ReactNode;
 
     /** Should we remove the right border radius top + bottom? */
-    shouldRemoveRightBorderRadius: PropTypes.bool,
+    shouldRemoveRightBorderRadius?: boolean;
 
     /** Should we remove the left border radius top + bottom? */
-    shouldRemoveLeftBorderRadius: PropTypes.bool,
+    shouldRemoveLeftBorderRadius?: boolean;
 
     /** Should enable the haptic feedback? */
-    shouldEnableHapticFeedback: PropTypes.bool,
+    shouldEnableHapticFeedback?: boolean;
 
     /** Id to use for this button */
-    id: PropTypes.string,
+    id?: string;
 
     /** Accessibility label for the component */
-    accessibilityLabel: PropTypes.string,
+    accessibilityLabel?: string;
 
     /** A ref to forward the button */
-    forwardedRef: refPropTypes,
-};
-
-const defaultProps = {
-    allowBubble: false,
-    text: '',
-    shouldShowRightIcon: false,
-    icon: null,
-    iconRight: Expensicons.ArrowRight,
-    iconFill: themeColors.textLight,
-    iconStyles: [],
-    iconRightStyles: [],
-    isLoading: false,
-    isDisabled: false,
-    small: false,
-    large: false,
-    medium: false,
-    onPress: () => {},
-    onLongPress: () => {},
-    onPressIn: () => {},
-    onPressOut: () => {},
-    onMouseDown: undefined,
-    pressOnEnter: false,
-    enterKeyEventListenerPriority: 0,
-    style: [],
-    innerStyles: [],
-    textStyles: [],
-    shouldUseDefaultHover: true,
-    success: false,
-    danger: false,
-    children: null,
-    shouldRemoveRightBorderRadius: false,
-    shouldRemoveLeftBorderRadius: false,
-    shouldEnableHapticFeedback: false,
-    id: '',
-    accessibilityLabel: '',
-    forwardedRef: undefined,
+    forwardedRef?: React.ForwardedRef<View>;
 };
 
 function Button({
-    allowBubble,
-    text,
-    shouldShowRightIcon,
-
-    icon,
-    iconRight,
-    iconFill,
-    iconStyles,
-    iconRightStyles,
-
-    small,
-    large,
-    medium,
-
-    isLoading,
-    isDisabled,
-
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    onMouseDown,
-
-    pressOnEnter,
-    enterKeyEventListenerPriority,
-
-    style,
-    innerStyles,
-    textStyles,
-
-    shouldUseDefaultHover,
-    success,
-    danger,
-    children,
-
-    shouldRemoveRightBorderRadius,
-    shouldRemoveLeftBorderRadius,
-    shouldEnableHapticFeedback,
-
-    id,
-    accessibilityLabel,
-    forwardedRef,
-}) {
+    allowBubble = false,
+    text = '',
+    shouldShowRightIcon = false,
+
+    icon = null,
+    iconRight = Expensicons.ArrowRight,
+    iconFill = themeColors.textLight,
+    iconStyles = [],
+    iconRightStyles = [],
+
+    small = false,
+    large = false,
+    medium = false,
+
+    isLoading = false,
+    isDisabled = false,
+
+    onPress = () => {},
+    onLongPress = () => {},
+    onPressIn = () => {},
+    onPressOut = () => {},
+    onMouseDown = undefined,
+
+    pressOnEnter = false,
+    enterKeyEventListenerPriority = 0,
+
+    style = [],
+    innerStyles = [],
+    textStyles = [],
+
+    shouldUseDefaultHover = true,
+    success = false,
+    danger = false,
+    children = null,
+
+    shouldRemoveRightBorderRadius = false,
+    shouldRemoveLeftBorderRadius = false,
+    shouldEnableHapticFeedback = false,
+
+    id = '',
+    accessibilityLabel = '',
+    forwardedRef = undefined,
+}: ButtonProps) {
     const isFocused = useIsFocused();
 
     const keyboardShortcutCallback = useCallback(
-        (event) => {
+        (event: GestureResponderEvent | KeyboardEvent) => {
             if (!validateSubmitShortcut(isFocused, isDisabled, isLoading, event)) {
                 return;
             }
@@ -246,6 +205,7 @@ function Button({
             </Text>
         );
 
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (icon || shouldShowRightIcon) {
             return (
                 <View style={[styles.justifyContentBetween, styles.flexRow]}>
@@ -282,7 +242,8 @@ function Button({
             ref={forwardedRef}
             onPress={(event) => {
                 if (event && event.type === 'click') {
-                    event.currentTarget.blur();
+                    const currentTarget = event?.currentTarget as HTMLElement;
+                    currentTarget?.blur();
                 }
 
                 if (shouldEnableHapticFeedback) {
@@ -318,6 +279,7 @@ function Button({
                 isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
                 shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                 shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 icon || shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                 ...innerStyles,
             ]}
@@ -342,18 +304,18 @@ function Button({
     );
 }
 
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 Button.displayName = 'Button';
 
-const ButtonWithRef = React.forwardRef((props, ref) => (
-    <Button
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
+function ButtonWithRef(props: ButtonProps, ref: ForwardedRef<View>) {
+    return (
+        <Button
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            forwardedRef={ref}
+        />
+    );
+}
 
 ButtonWithRef.displayName = 'ButtonWithRef';
 
-export default withNavigationFallback(ButtonWithRef);
+export default withNavigationFallback(React.forwardRef(ButtonWithRef));
diff --git a/src/components/Button/validateSubmitShortcut/index.js b/src/components/Button/validateSubmitShortcut/index.js
deleted file mode 100644
index bfe5c79483fa..000000000000
--- a/src/components/Button/validateSubmitShortcut/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Validate if the submit shortcut should be triggered depending on the button state
- *
- * @param {boolean} isFocused Whether Button is on active screen
- * @param {boolean} isDisabled Indicates whether the button should be disabled
- * @param {boolean} isLoading Indicates whether the button should be disabled and in the loading state
- * @param {Object} event Focused input event
- * @returns {boolean} Returns `true` if the shortcut should be triggered
- */
-function validateSubmitShortcut(isFocused, isDisabled, isLoading, event) {
-    if (!isFocused || isDisabled || isLoading || (event && event.target.nodeName === 'TEXTAREA')) {
-        return false;
-    }
-
-    event.preventDefault();
-    return true;
-}
-
-export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/index.native.js b/src/components/Button/validateSubmitShortcut/index.native.js
deleted file mode 100644
index 2822fa56d590..000000000000
--- a/src/components/Button/validateSubmitShortcut/index.native.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Validate if the submit shortcut should be triggered depending on the button state
- *
- * @param {boolean} isFocused Whether Button is on active screen
- * @param {boolean} isDisabled Indicates whether the button should be disabled
- * @param {boolean} isLoading Indicates whether the button should be disabled and in the loading state
- * @returns {boolean} Returns `true` if the shortcut should be triggered
- */
-function validateSubmitShortcut(isFocused, isDisabled, isLoading) {
-    if (!isFocused || isDisabled || isLoading) {
-        return false;
-    }
-
-    return true;
-}
-
-export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/index.native.ts b/src/components/Button/validateSubmitShortcut/index.native.ts
new file mode 100644
index 000000000000..7687855f109b
--- /dev/null
+++ b/src/components/Button/validateSubmitShortcut/index.native.ts
@@ -0,0 +1,20 @@
+import ValidateSubmitShortcut from './types';
+
+/**
+ * Validate if the submit shortcut should be triggered depending on the button state
+ *
+ * @param isFocused Whether Button is on active screen
+ * @param isDisabled Indicates whether the button should be disabled
+ * @param isLoading Indicates whether the button should be disabled and in the loading state
+ * @return Returns `true` if the shortcut should be triggered
+ */
+
+const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading) => {
+    if (!isFocused || isDisabled || isLoading) {
+        return false;
+    }
+
+    return true;
+};
+
+export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/index.ts b/src/components/Button/validateSubmitShortcut/index.ts
new file mode 100644
index 000000000000..a66700bacd64
--- /dev/null
+++ b/src/components/Button/validateSubmitShortcut/index.ts
@@ -0,0 +1,22 @@
+import ValidateSubmitShortcut from './types';
+
+/**
+ * Validate if the submit shortcut should be triggered depending on the button state
+ *
+ * @param isFocused Whether Button is on active screen
+ * @param isDisabled Indicates whether the button should be disabled
+ * @param isLoading Indicates whether the button should be disabled and in the loading state
+ * @param event Focused input event
+ * @returns Returns `true` if the shortcut should be triggered
+ */
+
+const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading, event) => {
+    if (!isFocused || isDisabled || isLoading || (event && event.target.nodeName === 'TEXTAREA')) {
+        return false;
+    }
+
+    event.preventDefault();
+    return true;
+};
+
+export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/types.ts b/src/components/Button/validateSubmitShortcut/types.ts
new file mode 100644
index 000000000000..61aa3d721d95
--- /dev/null
+++ b/src/components/Button/validateSubmitShortcut/types.ts
@@ -0,0 +1,3 @@
+type ValidateSubmitShortcut = (isFocused: boolean, isDisabled: boolean, isLoading: boolean, event?: any) => boolean;
+
+export default ValidateSubmitShortcut;

From ec3f466cd8c8331644c836045e8d4d0064f0e46d Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 11:58:32 +0100
Subject: [PATCH 02/10] fix: lint and type issues

---
 src/components/Button/validateSubmitShortcut/index.ts | 5 +++--
 src/components/Button/validateSubmitShortcut/types.ts | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/validateSubmitShortcut/index.ts b/src/components/Button/validateSubmitShortcut/index.ts
index a66700bacd64..55b3e44192e4 100644
--- a/src/components/Button/validateSubmitShortcut/index.ts
+++ b/src/components/Button/validateSubmitShortcut/index.ts
@@ -11,11 +11,12 @@ import ValidateSubmitShortcut from './types';
  */
 
 const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading, event) => {
-    if (!isFocused || isDisabled || isLoading || (event && event.target.nodeName === 'TEXTAREA')) {
+    const eventTarget = event?.target as HTMLElement;
+    if (!isFocused || isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA') {
         return false;
     }
 
-    event.preventDefault();
+    event?.preventDefault();
     return true;
 };
 
diff --git a/src/components/Button/validateSubmitShortcut/types.ts b/src/components/Button/validateSubmitShortcut/types.ts
index 61aa3d721d95..9970e1478a4c 100644
--- a/src/components/Button/validateSubmitShortcut/types.ts
+++ b/src/components/Button/validateSubmitShortcut/types.ts
@@ -1,3 +1,5 @@
-type ValidateSubmitShortcut = (isFocused: boolean, isDisabled: boolean, isLoading: boolean, event?: any) => boolean;
+import {GestureResponderEvent} from 'react-native';
+
+type ValidateSubmitShortcut = (isFocused: boolean, isDisabled: boolean, isLoading: boolean, event?: GestureResponderEvent | KeyboardEvent) => boolean;
 
 export default ValidateSubmitShortcut;

From 766c7d5d79de07de1a0917c286c2706eed1efb21 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 12:06:23 +0100
Subject: [PATCH 03/10] chore: rerun jobs

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 9e0e35b914e6..4d25bdc1188b 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -178,7 +178,7 @@ function Button({
         priority: enterKeyEventListenerPriority,
         shouldPreventDefault: false,
     });
-
+    console.log('hej');
     const renderContent = () => {
         if (children) {
             return children;

From 4315feee31402c173c7f25ec7f8ed40ab31d1037 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 12:06:48 +0100
Subject: [PATCH 04/10] fix: removed log

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 4d25bdc1188b..9e0e35b914e6 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -178,7 +178,7 @@ function Button({
         priority: enterKeyEventListenerPriority,
         shouldPreventDefault: false,
     });
-    console.log('hej');
+
     const renderContent = () => {
         if (children) {
             return children;

From 060fc5bf832ee7bfaaa0e4ff4fa2f7ce03909564 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 12:16:48 +0100
Subject: [PATCH 05/10] fix: types issues

---
 src/hooks/useKeyboardShortcut.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useKeyboardShortcut.ts b/src/hooks/useKeyboardShortcut.ts
index e4a7a16f4cfc..a5921ba37e4a 100644
--- a/src/hooks/useKeyboardShortcut.ts
+++ b/src/hooks/useKeyboardShortcut.ts
@@ -1,4 +1,5 @@
 import {useEffect} from 'react';
+import {GestureResponderEvent} from 'react-native';
 import {ValueOf} from 'type-fest';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import CONST from '@src/CONST';
@@ -23,7 +24,7 @@ type KeyboardShortcutConfig = {
  * Register a keyboard shortcut handler.
  * Recommendation: To ensure stability, wrap the `callback` function with the useCallback hook before using it with this hook.
  */
-export default function useKeyboardShortcut(shortcut: Shortcut, callback: () => void, config: KeyboardShortcutConfig | Record<string, never> = {}) {
+export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: GestureResponderEvent | KeyboardEvent) => void, config: KeyboardShortcutConfig | Record<string, never> = {}) {
     const {
         captureOnInputs = true,
         shouldBubble = false,

From a3531753fcecd1fb60ad8e57005dad6902a3070e Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 12:27:04 +0100
Subject: [PATCH 06/10] fix: type issue

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 9e0e35b914e6..b0e326df5035 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -163,7 +163,7 @@ function Button({
     const isFocused = useIsFocused();
 
     const keyboardShortcutCallback = useCallback(
-        (event: GestureResponderEvent | KeyboardEvent) => {
+        (event?: GestureResponderEvent | KeyboardEvent) => {
             if (!validateSubmitShortcut(isFocused, isDisabled, isLoading, event)) {
                 return;
             }

From defdcac34aded1a062d5bf3332d0f87cf2c13cd1 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 12:47:05 +0100
Subject: [PATCH 07/10] fix: resolve comments

---
 src/components/Button/index.tsx | 131 ++++++++++++++------------------
 1 file changed, 59 insertions(+), 72 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index b0e326df5035..7cbee1ce30bb 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -35,10 +35,10 @@ type ButtonProps = {
     iconFill?: string;
 
     /** Any additional styles to pass to the left icon container. */
-    iconStyles?: Array<StyleProp<ViewStyle>>;
+    iconStyles?: StyleProp<ViewStyle>;
 
     /** Any additional styles to pass to the right icon container. */
-    iconRightStyles?: Array<StyleProp<ViewStyle>>;
+    iconRightStyles?: StyleProp<ViewStyle>;
 
     /** Small sized button */
     small?: boolean;
@@ -56,10 +56,10 @@ type ButtonProps = {
     isDisabled?: boolean;
 
     /** A function that is called when the button is clicked on */
-    onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void;
+    onPress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
 
     /** A function that is called when the button is long pressed */
-    onLongPress?: (e?: GestureResponderEvent) => void;
+    onLongPress?: (event?: GestureResponderEvent) => void;
 
     /** A function that is called when the button is pressed */
     onPressIn?: () => void;
@@ -80,10 +80,10 @@ type ButtonProps = {
     style?: ViewStyle | ViewStyle[];
 
     /** Additional button styles. Specific to the OpacityView of the button */
-    innerStyles?: Array<StyleProp<ViewStyle>>;
+    innerStyles?: StyleProp<ViewStyle>;
 
     /** Additional text styles */
-    textStyles?: Array<StyleProp<TextStyle>>;
+    textStyles?: StyleProp<TextStyle>;
 
     /** Whether we should use the default hover style */
     shouldUseDefaultHover?: boolean;
@@ -111,55 +111,54 @@ type ButtonProps = {
 
     /** Accessibility label for the component */
     accessibilityLabel?: string;
-
-    /** A ref to forward the button */
-    forwardedRef?: React.ForwardedRef<View>;
 };
 
-function Button({
-    allowBubble = false,
-    text = '',
-    shouldShowRightIcon = false,
-
-    icon = null,
-    iconRight = Expensicons.ArrowRight,
-    iconFill = themeColors.textLight,
-    iconStyles = [],
-    iconRightStyles = [],
-
-    small = false,
-    large = false,
-    medium = false,
-
-    isLoading = false,
-    isDisabled = false,
-
-    onPress = () => {},
-    onLongPress = () => {},
-    onPressIn = () => {},
-    onPressOut = () => {},
-    onMouseDown = undefined,
-
-    pressOnEnter = false,
-    enterKeyEventListenerPriority = 0,
-
-    style = [],
-    innerStyles = [],
-    textStyles = [],
-
-    shouldUseDefaultHover = true,
-    success = false,
-    danger = false,
-    children = null,
-
-    shouldRemoveRightBorderRadius = false,
-    shouldRemoveLeftBorderRadius = false,
-    shouldEnableHapticFeedback = false,
-
-    id = '',
-    accessibilityLabel = '',
-    forwardedRef = undefined,
-}: ButtonProps) {
+function Button(
+    {
+        allowBubble = false,
+        text = '',
+        shouldShowRightIcon = false,
+
+        icon = null,
+        iconRight = Expensicons.ArrowRight,
+        iconFill = themeColors.textLight,
+        iconStyles = [],
+        iconRightStyles = [],
+
+        small = false,
+        large = false,
+        medium = false,
+
+        isLoading = false,
+        isDisabled = false,
+
+        onPress = () => {},
+        onLongPress = () => {},
+        onPressIn = () => {},
+        onPressOut = () => {},
+        onMouseDown = undefined,
+
+        pressOnEnter = false,
+        enterKeyEventListenerPriority = 0,
+
+        style = [],
+        innerStyles = [],
+        textStyles = [],
+
+        shouldUseDefaultHover = true,
+        success = false,
+        danger = false,
+        children = null,
+
+        shouldRemoveRightBorderRadius = false,
+        shouldRemoveLeftBorderRadius = false,
+        shouldEnableHapticFeedback = false,
+
+        id = '',
+        accessibilityLabel = '',
+    }: ButtonProps,
+    ref: ForwardedRef<View>,
+) {
     const isFocused = useIsFocused();
 
     const keyboardShortcutCallback = useCallback(
@@ -197,7 +196,7 @@ function Button({
                     success && styles.buttonSuccessText,
                     danger && styles.buttonDangerText,
                     icon && styles.textAlignLeft,
-                    ...textStyles,
+                    textStyles,
                 ]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
@@ -211,7 +210,7 @@ function Button({
                 <View style={[styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {icon && (
-                            <View style={[styles.mr1, ...iconStyles]}>
+                            <View style={[styles.mr1, iconStyles]}>
                                 <Icon
                                     src={icon}
                                     fill={iconFill}
@@ -222,7 +221,7 @@ function Button({
                         {textComponent}
                     </View>
                     {shouldShowRightIcon && (
-                        <View style={[styles.justifyContentCenter, styles.ml1, ...iconRightStyles]}>
+                        <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
                                 fill={iconFill}
@@ -239,9 +238,9 @@ function Button({
 
     return (
         <PressableWithFeedback
-            ref={forwardedRef}
+            ref={ref}
             onPress={(event) => {
-                if (event && event.type === 'click') {
+                if (event?.type === 'click') {
                     const currentTarget = event?.currentTarget as HTMLElement;
                     currentTarget?.blur();
                 }
@@ -281,7 +280,7 @@ function Button({
                 shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 icon || shouldShowRightIcon ? styles.alignItemsStretch : undefined,
-                ...innerStyles,
+                innerStyles,
             ]}
             hoverStyle={[
                 shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -306,16 +305,4 @@ function Button({
 
 Button.displayName = 'Button';
 
-function ButtonWithRef(props: ButtonProps, ref: ForwardedRef<View>) {
-    return (
-        <Button
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    );
-}
-
-ButtonWithRef.displayName = 'ButtonWithRef';
-
-export default withNavigationFallback(React.forwardRef(ButtonWithRef));
+export default withNavigationFallback(React.forwardRef(Button));

From 5c707c1d4e9cd77a907e0f94e7b97d9bf375649a Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 16:19:58 +0100
Subject: [PATCH 08/10] fix: resolved comments

---
 src/components/Button/index.tsx | 34 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 7cbee1ce30bb..f8be94a7ccd9 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -10,23 +10,25 @@ import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
 import styles from '@styles/styles';
-import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
-type ButtonProps = {
-    /** Should the press event bubble across multiple instances when Enter key triggers it. */
-    allowBubble?: boolean;
-
+type ButtonWithText = {
     /** The text for the button label */
-    text?: string;
+    text: string;
 
     /** Boolean whether to display the right icon */
     shouldShowRightIcon?: boolean;
 
     /** The icon asset to display to the left of the text */
     icon?: React.FC<SvgProps> | null;
+};
+
+type ButtonProps = (ButtonWithText | ChildrenProps) & {
+    /** Should the press event bubble across multiple instances when Enter key triggers it. */
+    allowBubble?: boolean;
 
     /** The icon asset to display to the right of the text */
     iconRight?: React.FC<SvgProps>;
@@ -77,7 +79,7 @@ type ButtonProps = {
     enterKeyEventListenerPriority?: number;
 
     /** Additional styles to add after local styles. Applied to Pressable portion of button */
-    style?: ViewStyle | ViewStyle[];
+    style?: StyleProp<ViewStyle>;
 
     /** Additional button styles. Specific to the OpacityView of the button */
     innerStyles?: StyleProp<ViewStyle>;
@@ -94,9 +96,6 @@ type ButtonProps = {
     /** Whether we should use the danger theme color */
     danger?: boolean;
 
-    /** Children to replace all inner contents of the button */
-    children?: React.ReactNode;
-
     /** Should we remove the right border radius top + bottom? */
     shouldRemoveRightBorderRadius?: boolean;
 
@@ -116,10 +115,7 @@ type ButtonProps = {
 function Button(
     {
         allowBubble = false,
-        text = '',
-        shouldShowRightIcon = false,
 
-        icon = null,
         iconRight = Expensicons.ArrowRight,
         iconFill = themeColors.textLight,
         iconStyles = [],
@@ -148,7 +144,6 @@ function Button(
         shouldUseDefaultHover = true,
         success = false,
         danger = false,
-        children = null,
 
         shouldRemoveRightBorderRadius = false,
         shouldRemoveLeftBorderRadius = false,
@@ -156,6 +151,7 @@ function Button(
 
         id = '',
         accessibilityLabel = '',
+        ...rest
     }: ButtonProps,
     ref: ForwardedRef<View>,
 ) {
@@ -179,10 +175,12 @@ function Button(
     });
 
     const renderContent = () => {
-        if (children) {
-            return children;
+        if ('children' in rest) {
+            return rest.children;
         }
 
+        const {text = '', icon = null, shouldShowRightIcon = false} = rest;
+
         const textComponent = (
             <Text
                 numberOfLines={1}
@@ -265,7 +263,7 @@ function Button(
                 styles.buttonContainer,
                 shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                 shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                ...StyleUtils.parseStyleAsArray(style),
+                style,
             ]}
             style={[
                 styles.button,
@@ -279,7 +277,7 @@ function Button(
                 shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                 shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                icon || shouldShowRightIcon ? styles.alignItemsStretch : undefined,
+                'text' in rest && (rest?.icon || rest?.shouldShowRightIcon) ? styles.alignItemsStretch : undefined,
                 innerStyles,
             ]}
             hoverStyle={[

From 0f86446e4d3718facca8b4245295c74fb1d114dd Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Thu, 9 Nov 2023 16:52:15 +0100
Subject: [PATCH 09/10] fix: removed unnecessary hoc

---
 src/components/Button/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index f8be94a7ccd9..1aaa15887e11 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -6,7 +6,6 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
-import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
 import styles from '@styles/styles';
@@ -303,4 +302,4 @@ function Button(
 
 Button.displayName = 'Button';
 
-export default withNavigationFallback(React.forwardRef(Button));
+export default React.forwardRef(Button);

From 46825fdc726bf868384c3e29bfbc9fcb5e73c9c4 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 22 Nov 2023 17:57:50 +0100
Subject: [PATCH 10/10] fix: reassure tests

---
 src/components/Button/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 8e2b0a0947fd..02f743b6a1b6 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {ForwardedRef, useCallback} from 'react';
 import {ActivityIndicator, GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
@@ -6,6 +5,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
+import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
 import themeColors from '@styles/themes/default';
@@ -110,6 +110,7 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
 
     /** Accessibility label for the component */
     accessibilityLabel?: string;
+    isFocused: boolean;
 };
 
 function Button(
@@ -148,6 +149,7 @@ function Button(
         shouldRemoveRightBorderRadius = false,
         shouldRemoveLeftBorderRadius = false,
         shouldEnableHapticFeedback = false,
+        isFocused,
 
         id = '',
         accessibilityLabel = '',
@@ -157,7 +159,6 @@ function Button(
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const isFocused = useIsFocused();
 
     const keyboardShortcutCallback = useCallback(
         (event?: GestureResponderEvent | KeyboardEvent) => {
@@ -305,4 +306,4 @@ function Button(
 
 Button.displayName = 'Button';
 
-export default React.forwardRef(Button);
+export default withNavigationFallback(React.forwardRef(Button));