diff --git a/src/components/Badge.js b/src/components/Badge.js
deleted file mode 100644
index 49b330ae37b2..000000000000
--- a/src/components/Badge.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import styles from '@styles/styles';
-import * as StyleUtils from '@styles/StyleUtils';
-import CONST from '@src/CONST';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
-import Text from './Text';
-
-const propTypes = {
-    /** Is Success type */
-    success: PropTypes.bool,
-
-    /** Is Error type */
-    error: PropTypes.bool,
-
-    /** Whether badge is clickable */
-    pressable: PropTypes.bool,
-
-    /** Text to display in the Badge */
-    text: PropTypes.string.isRequired,
-
-    /** Text to display in the Badge */
-    environment: PropTypes.string,
-
-    /** Styles for Badge */
-    // eslint-disable-next-line react/forbid-prop-types
-    badgeStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Styles for Badge Text */
-    // eslint-disable-next-line react/forbid-prop-types
-    textStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Callback to be called on onPress */
-    onPress: PropTypes.func,
-};
-
-const defaultProps = {
-    success: false,
-    error: false,
-    pressable: false,
-    badgeStyles: [],
-    textStyles: [],
-    onPress: undefined,
-    environment: CONST.ENVIRONMENT.DEV,
-};
-
-function Badge(props) {
-    const textStyles = props.success || props.error ? styles.textWhite : undefined;
-    const Wrapper = props.pressable ? PressableWithoutFeedback : View;
-    const wrapperStyles = ({pressed}) => [
-        styles.badge,
-        styles.ml2,
-        StyleUtils.getBadgeColorStyle(props.success, props.error, pressed, props.environment === CONST.ENVIRONMENT.ADHOC),
-        ...props.badgeStyles,
-    ];
-
-    return (
-        <Wrapper
-            style={props.pressable ? wrapperStyles : wrapperStyles(false)}
-            onPress={props.onPress}
-            role={props.pressable ? CONST.ACCESSIBILITY_ROLE.BUTTON : CONST.ACCESSIBILITY_ROLE.TEXT}
-            accessibilityLabel={props.pressable ? props.text : undefined}
-            aria-label={!props.pressable ? props.text : undefined}
-        >
-            <Text
-                style={[styles.badgeText, textStyles, ...props.textStyles]}
-                numberOfLines={1}
-            >
-                {props.text}
-            </Text>
-        </Wrapper>
-    );
-}
-
-Badge.displayName = 'Badge';
-Badge.propTypes = propTypes;
-Badge.defaultProps = defaultProps;
-export default Badge;
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 000000000000..2ccd41575073
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,65 @@
+import React, {useCallback} from 'react';
+import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import Text from './Text';
+
+type BadgeProps = {
+    /** Is Success type */
+    success?: boolean;
+
+    /** Is Error type */
+    error?: boolean;
+
+    /** Whether badge is clickable */
+    pressable?: boolean;
+
+    /** Text to display in the Badge */
+    text: string;
+
+    /** Text to display in the Badge */
+    environment?: string;
+
+    /** Styles for Badge */
+    badgeStyles?: StyleProp<ViewStyle>;
+
+    /** Styles for Badge Text */
+    textStyles?: StyleProp<TextStyle>;
+
+    /** Callback to be called on onPress */
+    onPress: (event?: GestureResponderEvent | KeyboardEvent) => void;
+};
+
+function Badge({success = false, error = false, pressable = false, text, environment = CONST.ENVIRONMENT.DEV, badgeStyles, textStyles, onPress = () => {}}: BadgeProps) {
+    const textColorStyles = success || error ? styles.textWhite : undefined;
+    const Wrapper = pressable ? PressableWithoutFeedback : View;
+
+    const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
+        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
+        [success, error, environment, badgeStyles],
+    );
+
+    return (
+        <Wrapper
+            style={pressable ? wrapperStyles : wrapperStyles({focused: false, hovered: false, isDisabled: false, isScreenReaderActive: false, pressed: false})}
+            onPress={onPress}
+            role={pressable ? CONST.ACCESSIBILITY_ROLE.BUTTON : CONST.ACCESSIBILITY_ROLE.TEXT}
+            accessibilityLabel={pressable ? text : undefined}
+            aria-label={!pressable ? text : undefined}
+            accessible={false}
+        >
+            <Text
+                style={[styles.badgeText, textColorStyles, textStyles]}
+                numberOfLines={1}
+            >
+                {text}
+            </Text>
+        </Wrapper>
+    );
+}
+
+Badge.displayName = 'Badge';
+
+export default Badge;