diff --git a/src/components/withKeyboardState.js b/src/components/withKeyboardState.js
deleted file mode 100755
index d89a4a8228bf..000000000000
--- a/src/components/withKeyboardState.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {createContext, forwardRef, useEffect, useMemo, useState} from 'react';
-import {Keyboard} from 'react-native';
-import getComponentDisplayName from '@libs/getComponentDisplayName';
-
-const KeyboardStateContext = createContext(null);
-const keyboardStatePropTypes = {
-    /** Whether or not the keyboard is open */
-    isKeyboardShown: PropTypes.bool.isRequired,
-};
-
-const keyboardStateProviderPropTypes = {
-    /* Actual content wrapped by this component */
-    children: PropTypes.node.isRequired,
-};
-
-function KeyboardStateProvider(props) {
-    const {children} = props;
-    const [isKeyboardShown, setIsKeyboardShown] = useState(false);
-    useEffect(() => {
-        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-            setIsKeyboardShown(true);
-        });
-        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-            setIsKeyboardShown(false);
-        });
-
-        return () => {
-            keyboardDidShowListener.remove();
-            keyboardDidHideListener.remove();
-        };
-    }, []);
-
-    const contextValue = useMemo(
-        () => ({
-            isKeyboardShown,
-        }),
-        [isKeyboardShown],
-    );
-    return <KeyboardStateContext.Provider value={contextValue}>{children}</KeyboardStateContext.Provider>;
-}
-
-KeyboardStateProvider.propTypes = keyboardStateProviderPropTypes;
-
-/**
- * @param {React.Component} WrappedComponent
- * @returns {React.Component}
- */
-export default function withKeyboardState(WrappedComponent) {
-    const WithKeyboardState = forwardRef((props, ref) => (
-        <KeyboardStateContext.Consumer>
-            {(keyboardStateProps) => (
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...keyboardStateProps}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
-                    ref={ref}
-                />
-            )}
-        </KeyboardStateContext.Consumer>
-    ));
-
-    WithKeyboardState.displayName = `withKeyboardState(${getComponentDisplayName(WrappedComponent)})`;
-    return WithKeyboardState;
-}
-
-export {KeyboardStateProvider, keyboardStatePropTypes, KeyboardStateContext};
diff --git a/src/components/withKeyboardState.tsx b/src/components/withKeyboardState.tsx
new file mode 100755
index 000000000000..0c168a4537f5
--- /dev/null
+++ b/src/components/withKeyboardState.tsx
@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import React, {ComponentType, createContext, ForwardedRef, forwardRef, ReactElement, RefAttributes, useEffect, useMemo, useState} from 'react';
+import {Keyboard} from 'react-native';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type KeyboardStateContextValue = {
+    /** Whether the keyboard is open */
+    isKeyboardShown: boolean;
+};
+
+// TODO: Remove - left for backwards compatibility with existing components (https://github.com/Expensify/App/issues/25151)
+const keyboardStatePropTypes = {
+    /** Whether the keyboard is open */
+    isKeyboardShown: PropTypes.bool.isRequired,
+};
+
+const KeyboardStateContext = createContext<KeyboardStateContextValue | null>(null);
+
+function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
+    const [isKeyboardShown, setIsKeyboardShown] = useState(false);
+
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+            setIsKeyboardShown(true);
+        });
+        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+            setIsKeyboardShown(false);
+        });
+
+        return () => {
+            keyboardDidShowListener.remove();
+            keyboardDidHideListener.remove();
+        };
+    }, []);
+
+    const contextValue = useMemo(
+        () => ({
+            isKeyboardShown,
+        }),
+        [isKeyboardShown],
+    );
+    return <KeyboardStateContext.Provider value={contextValue}>{children}</KeyboardStateContext.Provider>;
+}
+
+export default function withKeyboardState<TProps extends KeyboardStateContextValue, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: Omit<TProps, keyof KeyboardStateContextValue> & React.RefAttributes<TRef>) => ReactElement | null {
+    function WithKeyboardState(props: Omit<TProps, keyof KeyboardStateContextValue>, ref: ForwardedRef<TRef>) {
+        return (
+            <KeyboardStateContext.Consumer>
+                {(keyboardStateProps) => (
+                    <WrappedComponent
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...keyboardStateProps}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...(props as TProps)}
+                        ref={ref}
+                    />
+                )}
+            </KeyboardStateContext.Consumer>
+        );
+    }
+    WithKeyboardState.displayName = `withKeyboardState(${getComponentDisplayName(WrappedComponent)})`;
+    return forwardRef(WithKeyboardState);
+}
+
+export {KeyboardStateProvider, keyboardStatePropTypes, type KeyboardStateContextValue, KeyboardStateContext};
diff --git a/src/hooks/useKeyboardState.js b/src/hooks/useKeyboardState.js
deleted file mode 100644
index 68e9dbfc2b13..000000000000
--- a/src/hooks/useKeyboardState.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {useContext} from 'react';
-import {KeyboardStateContext} from '@components/withKeyboardState';
-
-/**
- * Hook for getting current state of keyboard
- * whether or not the keyboard is open
- * @returns {Object}
- */
-export default function useKeyboardState() {
-    return useContext(KeyboardStateContext);
-}
diff --git a/src/hooks/useKeyboardState.ts b/src/hooks/useKeyboardState.ts
new file mode 100644
index 000000000000..edcbaa32cc9e
--- /dev/null
+++ b/src/hooks/useKeyboardState.ts
@@ -0,0 +1,10 @@
+import {useContext} from 'react';
+import {KeyboardStateContext, KeyboardStateContextValue} from '@components/withKeyboardState';
+
+/**
+ * Hook for getting current state of keyboard
+ * whether the keyboard is open
+ */
+export default function useKeyboardState(): KeyboardStateContextValue | null {
+    return useContext(KeyboardStateContext);
+}