diff --git a/src/components/QRCode/index.js b/src/components/QRCode/index.js
deleted file mode 100644
index f27cf28066ef..000000000000
--- a/src/components/QRCode/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import QRCodeLibrary from 'react-native-qrcode-svg';
-import PropTypes from 'prop-types';
-import defaultTheme from '../../styles/themes/default';
-import CONST from '../../CONST';
-
-const propTypes = {
-    /**
-     * The QR code URL
-     */
-    url: PropTypes.string.isRequired,
-    /**
-     * The logo which will be displayed in the middle of the QR code.
-     * Follows ImageProps href from react-native-svg that is used by react-native-qrcode-svg.
-     */
-    logo: PropTypes.oneOfType([PropTypes.shape({uri: PropTypes.string}), PropTypes.number, PropTypes.string]),
-    /**
-     * The size ratio of logo to QR code
-     */
-    logoRatio: PropTypes.number,
-    /**
-     * The size ratio of margin around logo to QR code
-     */
-    logoMarginRatio: PropTypes.number,
-    /**
-     * The QRCode size
-     */
-    size: PropTypes.number,
-    /**
-     * The QRCode color
-     */
-    color: PropTypes.string,
-    /**
-     * The QRCode background color
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     * Function to retrieve the internal component ref and be able to call it's
-     * methods
-     */
-    getRef: PropTypes.func,
-};
-
-const defaultProps = {
-    logo: undefined,
-    size: 120,
-    color: defaultTheme.text,
-    backgroundColor: defaultTheme.highlightBG,
-    getRef: undefined,
-    logoRatio: CONST.QR.DEFAULT_LOGO_SIZE_RATIO,
-    logoMarginRatio: CONST.QR.DEFAULT_LOGO_MARGIN_RATIO,
-};
-
-function QRCode(props) {
-    return (
-        <QRCodeLibrary
-            getRef={props.getRef}
-            value={props.url}
-            size={props.size}
-            logo={props.logo}
-            logoBackgroundColor={props.backgroundColor}
-            logoSize={props.size * props.logoRatio}
-            logoMargin={props.size * props.logoMarginRatio}
-            logoBorderRadius={props.size}
-            backgroundColor={props.backgroundColor}
-            color={props.color}
-        />
-    );
-}
-
-QRCode.displayName = 'QRCode';
-QRCode.propTypes = propTypes;
-QRCode.defaultProps = defaultProps;
-
-export default QRCode;
diff --git a/src/components/QRCode/index.tsx b/src/components/QRCode/index.tsx
new file mode 100644
index 000000000000..bca45c02fffa
--- /dev/null
+++ b/src/components/QRCode/index.tsx
@@ -0,0 +1,71 @@
+import React, {Ref} from 'react';
+import QRCodeLibrary from 'react-native-qrcode-svg';
+import {ImageSourcePropType} from 'react-native';
+import defaultTheme from '../../styles/themes/default';
+import CONST from '../../CONST';
+
+type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO;
+
+type LogoMarginRatio = typeof CONST.QR.DEFAULT_LOGO_MARGIN_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO;
+
+type QRCodeProps = {
+    /** The QR code URL */
+    url: string;
+
+    /**
+     * The logo which will be displayed in the middle of the QR code.
+     * Follows ImageProps href from react-native-svg that is used by react-native-qrcode-svg.
+     */
+    logo?: ImageSourcePropType;
+
+    /** The size ratio of logo to QR code */
+    logoRatio?: LogoRatio;
+
+    /** The size ratio of margin around logo to QR code */
+    logoMarginRatio?: LogoMarginRatio;
+
+    /** The QRCode size */
+    size?: number;
+
+    /** The QRCode color */
+    color?: string;
+
+    /** The QRCode background color */
+    backgroundColor?: string;
+
+    /**
+     * Function to retrieve the internal component ref and be able to call it's
+     * methods
+     */
+    getRef?: (ref: Ref<SVGElement>) => Ref<SVGElement>;
+};
+
+function QRCode({
+    url,
+    logo,
+    getRef,
+    size = 120,
+    color = defaultTheme.text,
+    backgroundColor = defaultTheme.highlightBG,
+    logoRatio = CONST.QR.DEFAULT_LOGO_SIZE_RATIO,
+    logoMarginRatio = CONST.QR.DEFAULT_LOGO_MARGIN_RATIO,
+}: QRCodeProps) {
+    return (
+        <QRCodeLibrary
+            getRef={getRef}
+            value={url}
+            size={size}
+            logo={logo}
+            logoBackgroundColor={backgroundColor}
+            logoSize={size * logoRatio}
+            logoMargin={size * logoMarginRatio}
+            logoBorderRadius={size}
+            backgroundColor={backgroundColor}
+            color={color}
+        />
+    );
+}
+
+QRCode.displayName = 'QRCode';
+
+export default QRCode;