diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
similarity index 75%
rename from src/components/ReportActionsSkeletonView/SkeletonViewLines.js
rename to src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index 51ae4c1034a5..5a5d1011db38 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
@@ -6,21 +5,17 @@ import styles from '@styles/styles';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type SkeletonViewLinesProps = {
     /** Number of rows to show in Skeleton UI block */
-    numberOfRows: PropTypes.number.isRequired,
-    shouldAnimate: PropTypes.bool,
+    numberOfRows: 1 | 2 | 3;
+    shouldAnimate?: boolean;
 };
 
-const defaultTypes = {
-    shouldAnimate: true,
-};
-
-function SkeletonViewLines(props) {
+function SkeletonViewLines({numberOfRows, shouldAnimate = true}: SkeletonViewLinesProps) {
     return (
         <SkeletonViewContentLoader
-            animate={props.shouldAnimate}
-            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+            animate={shouldAnimate}
+            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[numberOfRows]}
             backgroundColor={themeColors.skeletonLHNIn}
             foregroundColor={themeColors.skeletonLHNOut}
             style={styles.mr5}
@@ -42,7 +37,7 @@ function SkeletonViewLines(props) {
                 width="100%"
                 height="8"
             />
-            {props.numberOfRows > 1 && (
+            {numberOfRows > 1 && (
                 <Rect
                     x="72"
                     y="51"
@@ -50,7 +45,7 @@ function SkeletonViewLines(props) {
                     height="8"
                 />
             )}
-            {props.numberOfRows > 2 && (
+            {numberOfRows > 2 && (
                 <Rect
                     x="72"
                     y="71"
@@ -63,6 +58,4 @@ function SkeletonViewLines(props) {
 }
 
 SkeletonViewLines.displayName = 'SkeletonViewLines';
-SkeletonViewLines.propTypes = propTypes;
-SkeletonViewLines.defaultProps = defaultTypes;
 export default SkeletonViewLines;
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.tsx
similarity index 78%
rename from src/components/ReportActionsSkeletonView/index.js
rename to src/components/ReportActionsSkeletonView/index.tsx
index 6087510a53b0..ccabf39a9c39 100644
--- a/src/components/ReportActionsSkeletonView/index.js
+++ b/src/components/ReportActionsSkeletonView/index.tsx
@@ -1,25 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Dimensions, View} from 'react-native';
 import CONST from '@src/CONST';
 import SkeletonViewLines from './SkeletonViewLines';
 
-const propTypes = {
+type ReportActionsSkeletonViewProps = {
     /** Whether to animate the skeleton view */
-    shouldAnimate: PropTypes.bool,
+    shouldAnimate?: boolean;
 
     /** Number of possible visible content items */
-    possibleVisibleContentItems: PropTypes.number,
+    possibleVisibleContentItems?: number;
 };
 
-const defaultProps = {
-    shouldAnimate: true,
-    possibleVisibleContentItems: 0,
-};
-
-function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) {
+function ReportActionsSkeletonView({shouldAnimate = true, possibleVisibleContentItems = 0}: ReportActionsSkeletonViewProps) {
     const contentItems = possibleVisibleContentItems || Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
-    const skeletonViewLines = [];
+    const skeletonViewLines: React.ReactNode[] = [];
     for (let index = 0; index < contentItems; index++) {
         const iconIndex = (index + 1) % 4;
         switch (iconIndex) {
@@ -55,6 +49,4 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems})
 }
 
 ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
-ReportActionsSkeletonView.propTypes = propTypes;
-ReportActionsSkeletonView.defaultProps = defaultProps;
 export default ReportActionsSkeletonView;
diff --git a/src/components/SkeletonViewContentLoader/index.js b/src/components/SkeletonViewContentLoader/index.js
deleted file mode 100644
index 335611c6f5cb..000000000000
--- a/src/components/SkeletonViewContentLoader/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import SkeletonViewContentLoader from 'react-content-loader';
-
-export default SkeletonViewContentLoader;
diff --git a/src/components/SkeletonViewContentLoader/index.native.js b/src/components/SkeletonViewContentLoader/index.native.js
deleted file mode 100644
index bdcea964e52c..000000000000
--- a/src/components/SkeletonViewContentLoader/index.native.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import SkeletonViewContentLoader from 'react-content-loader/native';
-
-export default SkeletonViewContentLoader;
diff --git a/src/components/SkeletonViewContentLoader/index.native.tsx b/src/components/SkeletonViewContentLoader/index.native.tsx
new file mode 100644
index 000000000000..370eb2f669f1
--- /dev/null
+++ b/src/components/SkeletonViewContentLoader/index.native.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import SkeletonViewContentLoaderProps from './types';
+
+function ContentLoader(props: SkeletonViewContentLoaderProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SkeletonViewContentLoader {...props} />;
+}
+
+export default ContentLoader;
diff --git a/src/components/SkeletonViewContentLoader/index.tsx b/src/components/SkeletonViewContentLoader/index.tsx
new file mode 100644
index 000000000000..105e677ad7c1
--- /dev/null
+++ b/src/components/SkeletonViewContentLoader/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import SkeletonViewContentLoader from 'react-content-loader';
+import SkeletonViewContentLoaderProps from './types';
+
+function ContentLoader(props: SkeletonViewContentLoaderProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SkeletonViewContentLoader {...props} />;
+}
+
+export default ContentLoader;
diff --git a/src/components/SkeletonViewContentLoader/types.ts b/src/components/SkeletonViewContentLoader/types.ts
new file mode 100644
index 000000000000..23f0a051e518
--- /dev/null
+++ b/src/components/SkeletonViewContentLoader/types.ts
@@ -0,0 +1,6 @@
+import {IContentLoaderProps} from 'react-content-loader';
+import {IContentLoaderProps as NativeIContentLoaderProps} from 'react-content-loader/native';
+
+type SkeletonViewContentLoaderProps = IContentLoaderProps & NativeIContentLoaderProps;
+
+export default SkeletonViewContentLoaderProps;