diff --git a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.ts
similarity index 51%
rename from src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
rename to src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.ts
index bddb639655a0..083fbda58b70 100644
--- a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
+++ b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.ts
@@ -1,6 +1,7 @@
 import variables from '../variables';
+import GetNavigationModalCardStyles from './types';
 
-export default ({isSmallScreenWidth}) => ({
+const getBaseNavigationModalCardStyles: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({
     position: 'absolute',
     top: 0,
     right: 0,
@@ -8,3 +9,5 @@ export default ({isSmallScreenWidth}) => ({
     backgroundColor: 'transparent',
     height: '100%',
 });
+
+export default getBaseNavigationModalCardStyles;
diff --git a/src/styles/getNavigationModalCardStyles/index.js b/src/styles/getNavigationModalCardStyles/index.ts
similarity index 100%
rename from src/styles/getNavigationModalCardStyles/index.js
rename to src/styles/getNavigationModalCardStyles/index.ts
diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.ts
similarity index 71%
rename from src/styles/getNavigationModalCardStyles/index.website.js
rename to src/styles/getNavigationModalCardStyles/index.website.ts
index f5668f955111..0c47536fc57c 100644
--- a/src/styles/getNavigationModalCardStyles/index.website.js
+++ b/src/styles/getNavigationModalCardStyles/index.website.ts
@@ -1,6 +1,7 @@
 import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles';
+import GetNavigationModalCardStyles from './types';
 
-export default ({isSmallScreenWidth}) => ({
+const getNavigationModalCardStyles: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({
     ...getBaseNavigationModalCardStyles({isSmallScreenWidth}),
 
     // position: fixed is set instead of position absolute to workaround Safari known issues of updating heights in DOM.
@@ -10,3 +11,5 @@ export default ({isSmallScreenWidth}) => ({
     // https://github.com/Expensify/App/issues/20709
     position: 'fixed',
 });
+
+export default getNavigationModalCardStyles;
diff --git a/src/styles/getNavigationModalCardStyles/types.ts b/src/styles/getNavigationModalCardStyles/types.ts
new file mode 100644
index 000000000000..504b659c87b7
--- /dev/null
+++ b/src/styles/getNavigationModalCardStyles/types.ts
@@ -0,0 +1,9 @@
+import {CSSProperties} from 'react';
+import {ViewStyle} from 'react-native';
+import {Merge} from 'type-fest';
+
+type GetNavigationModalCardStylesParams = {isSmallScreenWidth: number};
+
+type GetNavigationModalCardStyles = (params: GetNavigationModalCardStylesParams) => Merge<ViewStyle, Pick<CSSProperties, 'position'>>;
+
+export default GetNavigationModalCardStyles;