From 2bc705a3ea658f43b12a7d743debcd346413c33f Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Fri, 23 Feb 2024 10:30:27 +0100
Subject: [PATCH] [TS migration] Migrate
 'ReimbursementAccountLoadingIndicator.js' component

---
 ...=> ReimbursementAccountLoadingIndicator.tsx} | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)
 rename src/components/{ReimbursementAccountLoadingIndicator.js => ReimbursementAccountLoadingIndicator.tsx} (75%)

diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.tsx
similarity index 75%
rename from src/components/ReimbursementAccountLoadingIndicator.js
rename to src/components/ReimbursementAccountLoadingIndicator.tsx
index 141e056afd93..cc9beb513002 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
@@ -10,14 +9,15 @@ import LottieAnimations from './LottieAnimations';
 import ScreenWrapper from './ScreenWrapper';
 import Text from './Text';
 
-const propTypes = {
+type ReimbursementAccountLoadingIndicatorProps = {
     /** Method to trigger when pressing back button of the header */
-    onBackButtonPress: PropTypes.func.isRequired,
+    onBackButtonPress: () => void;
 };
 
-function ReimbursementAccountLoadingIndicator(props) {
+function ReimbursementAccountLoadingIndicator({onBackButtonPress}: ReimbursementAccountLoadingIndicatorProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
@@ -26,10 +26,10 @@ function ReimbursementAccountLoadingIndicator(props) {
         >
             <HeaderWithBackButton
                 title={translate('reimbursementAccountLoadingAnimation.oneMoment')}
-                onBackButtonPress={props.onBackButtonPress}
+                onBackButtonPress={onBackButtonPress}
             />
             <FullPageOfflineBlockingView>
-                <View style={[styles.pageWrapper]}>
+                <View style={styles.pageWrapper}>
                     <Lottie
                         source={LottieAnimations.ReviewingBankInfo}
                         autoPlay
@@ -37,8 +37,8 @@ function ReimbursementAccountLoadingIndicator(props) {
                         style={styles.loadingVBAAnimation}
                         webStyle={styles.loadingVBAAnimationWeb}
                     />
-                    <View style={[styles.ph6]}>
-                        <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
+                    <View style={styles.ph6}>
+                        <Text style={styles.textAlignCenter}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
                     </View>
                 </View>
             </FullPageOfflineBlockingView>
@@ -46,7 +46,6 @@ function ReimbursementAccountLoadingIndicator(props) {
     );
 }
 
-ReimbursementAccountLoadingIndicator.propTypes = propTypes;
 ReimbursementAccountLoadingIndicator.displayName = 'ReimbursementAccountLoadingIndicator';
 
 export default ReimbursementAccountLoadingIndicator;