[TS migration] Migrate 'App.js' file to TypeScript

package.json

@@ -148,7 +148,7 @@
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",
     "react-native-permissions": "^3.9.3",
-    "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#7a407cd4174d9838a944c1c2e1cb4a9737ac69c5",
+    "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#42b334d0c4e71d225601f72828d3dedd0bc22212",
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",

src/App.js → src/App.tsx

@@ -74,6 +74,7 @@ function App() {
                 <CustomStatusBarAndBackground />
                 <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
                     <ColorSchemeWrapper>
+                        {/* @ts-expect-error TODO: Remove this once Expensify (https://github.com/Expensify/App/issues/25231) is migrated to TypeScript. */}
                         <Expensify />
                     </ColorSchemeWrapper>
                 </ErrorBoundary>

src/components/CustomStatusBarAndBackground/index.tsx

@@ -10,7 +10,7 @@ import updateStatusBarAppearance from './updateStatusBarAppearance';
 type CustomStatusBarAndBackgroundProps = {
     /** Whether the CustomStatusBar is nested within another CustomStatusBar.
      *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
-    isNested: boolean;
+    isNested?: boolean;
 };
 
 function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) {

src/components/ThemeProvider.tsx

@@ -1,17 +1,10 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride';
 // eslint-disable-next-line no-restricted-imports
 import themes from '@styles/theme';
 import ThemeContext from '@styles/theme/context/ThemeContext';
 import type {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 
-const propTypes = {
-    /** Rendered child component */
-    children: PropTypes.node.isRequired,
-};
-
 type ThemeProviderProps = React.PropsWithChildren & {
     theme?: ThemePreferenceWithoutSystem;
 };
@@ -24,7 +17,6 @@ function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderPr
     return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 
-ThemeProvider.propTypes = propTypes;
 ThemeProvider.displayName = 'ThemeProvider';
 
 export default ThemeProvider;

src/pages/home/report/ReportAttachmentsContext.js → src/pages/home/report/ReportAttachmentsContext.tsx

@@ -1,17 +1,20 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const ReportAttachmentsContext = React.createContext();
-
-const propTypes = {
-    /** Rendered child component */
-    children: PropTypes.node.isRequired,
+type ReportAttachmentsContextValue = {
+    isAttachmentHidden: (reportActionID: string) => boolean;
+    updateHiddenAttachments: (reportActionID: string, isHidden: boolean) => void;
 };
 
-function ReportAttachmentsProvider(props) {
+const ReportAttachmentsContext = React.createContext<ReportAttachmentsContextValue>({
+    isAttachmentHidden: () => false,
+    updateHiddenAttachments: () => {},
+});
+
+function ReportAttachmentsProvider({children}: ChildrenProps) {
     const currentReportID = useCurrentReportID();
-    const hiddenAttachments = useRef({});
+    const hiddenAttachments = useRef<Record<string, boolean>>({});
 
     useEffect(() => {
         // We only want to store the attachment visibility for the current report.
@@ -21,8 +24,8 @@ function ReportAttachmentsProvider(props) {
 
     const contextValue = useMemo(
         () => ({
-            isAttachmentHidden: (reportActionID) => hiddenAttachments.current[reportActionID],
-            updateHiddenAttachments: (reportActionID, value) => {
+            isAttachmentHidden: (reportActionID: string) => hiddenAttachments.current[reportActionID],
+            updateHiddenAttachments: (reportActionID: string, value: boolean) => {
                 hiddenAttachments.current = {
                     ...hiddenAttachments.current,
                     [reportActionID]: value,
@@ -32,10 +35,9 @@ function ReportAttachmentsProvider(props) {
         [],
     );
 
-    return <ReportAttachmentsContext.Provider value={contextValue}>{props.children}</ReportAttachmentsContext.Provider>;
+    return <ReportAttachmentsContext.Provider value={contextValue}>{children}</ReportAttachmentsContext.Provider>;
 }
 
-ReportAttachmentsProvider.propTypes = propTypes;
 ReportAttachmentsProvider.displayName = 'ReportAttachmentsProvider';
 
 export default ReportAttachmentsContext;

src/types/global.d.ts

@@ -32,4 +32,6 @@ declare module '*.lottie' {
 interface Window {
     enableMemoryOnlyKeys: () => void;
     disableMemoryOnlyKeys: () => void;
+    setSupportToken: (token: string, email: string, accountID: number) => void;
+    Onyx: Record<string, unknown>;
 }