chore: tighten types across mobile surface areas

app/src/components/buttons/AbstractButton.tsx

@@ -3,7 +3,11 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
-import type { GestureResponderEvent, ViewStyle } from 'react-native';
+import type {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  ViewStyle,
+} from 'react-native';
 import { Platform, StyleSheet } from 'react-native';
 import type { ViewProps } from 'tamagui';
 import { Button, Text } from 'tamagui';
@@ -16,6 +20,7 @@ export interface ButtonProps extends ViewProps {
   children: React.ReactNode;
   animatedComponent?: React.ReactNode;
   trackEvent?: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
 }
 
 interface AbstractButtonProps extends ButtonProps {

app/src/components/buttons/PrimaryButtonLongHold.tsx

@@ -93,7 +93,6 @@ export function HeldPrimaryButton({
       {...props}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
-      // @ts-expect-error actually it is there
       onLayout={getButtonSize}
       animatedComponent={renderAnimatedComponent()}
     >

app/src/components/buttons/PrimaryButtonLongHold.web.tsx

@@ -83,7 +83,6 @@ export function HeldPrimaryButton({
       {...props}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
-      // @ts-expect-error actually it is there
       onLayout={getButtonSize}
       animatedComponent={renderAnimatedComponent()}
     >

app/src/components/homeScreen/SvgXmlWrapper.native.tsx

@@ -2,17 +2,12 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import React, { forwardRef } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ComponentProps } from 'react';
+import React from 'react';
 import { SvgXml as RNSvgXml } from 'react-native-svg';
 
-type Props = {
-  xml: string;
-  width?: number;
-  height?: number;
-  style?: StyleProp<ViewStyle>;
-};
+type Props = ComponentProps<typeof RNSvgXml>;
 
-export const SvgXml = forwardRef<any, Props>((p, _ref) => <RNSvgXml {...p} />);
+export const SvgXml: React.FC<Props> = props => <RNSvgXml {...props} />;
 SvgXml.displayName = 'SvgXml';
 export default SvgXml;

app/src/components/homeScreen/SvgXmlWrapper.web.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import DOMPurify from 'dompurify';
+import createDOMPurify from 'dompurify';
 import {
   createElement,
   type CSSProperties,
@@ -20,7 +20,7 @@ type Props = {
 export const SvgXml = forwardRef<HTMLDivElement, Props>(
   ({ xml, width, height, style, ...props }, ref) => {
     // Initialize DOMPurify for web browser environment
-    const purify = DOMPurify(window);
+    const purify = createDOMPurify(window);
     const safe = purify.sanitize(xml, {
       USE_PROFILES: { svg: true, svgFilters: true },
     });

app/src/components/native/PassportCamera.tsx

@@ -69,9 +69,13 @@ export const PassportCamera: React.FC<PassportCameraProps> = ({
       if (!isMounted) {
         return;
       }
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      const { error, errorMessage, stackTrace } = event.nativeEvent;
+      const {
+        error: nativeError,
+        errorMessage,
+        stackTrace,
+      } = event.nativeEvent;
       const e = new Error(errorMessage);
+      e.name = nativeError;
       e.stack = stackTrace;
       onPassportRead(e);
     },

app/src/components/native/QRCodeScanner.tsx

@@ -53,9 +53,13 @@ export const QRCodeScannerView: React.FC<QRCodeScannerViewProps> = ({
       if (!isMounted) {
         return;
       }
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      const { error, errorMessage, stackTrace } = event.nativeEvent;
+      const {
+        error: nativeError,
+        errorMessage,
+        stackTrace,
+      } = event.nativeEvent;
       const e = new Error(errorMessage);
+      e.name = nativeError;
       e.stack = stackTrace;
       onQRData(e);
     },

app/src/hooks/useAppUpdates.ts

@@ -6,14 +6,17 @@ import { useEffect, useState } from 'react';
 import { Linking } from 'react-native';
 import { checkVersion } from 'react-native-check-version';
 import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { AppEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
 
+import type { RootStackParamList } from '@/navigation';
 import { registerModalCallbacks } from '@/utils/modalCallbackRegistry';
 
 export const useAppUpdates = (): [boolean, () => void, boolean] => {
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [newVersionUrl, setNewVersionUrl] = useState<string | null>(null);
   const [isModalDismissed, setIsModalDismissed] = useState(false);
   const selfClient = useSelfClient();

app/src/hooks/useAppUpdates.web.ts

@@ -4,14 +4,17 @@
 
 import { useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { AppEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
 
+import type { RootStackParamList } from '@/navigation';
 import { registerModalCallbacks } from '@/utils/modalCallbackRegistry';
 
 export const useAppUpdates = (): [boolean, () => void, boolean] => {
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [isModalDismissed, setIsModalDismissed] = useState(false);
   const { trackEvent } = useSelfClient();
   const showAppUpdateModal = () => {

app/src/hooks/useModal.ts

@@ -4,7 +4,9 @@
 
 import { useCallback, useRef, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
+import type { RootStackParamList } from '@/navigation';
 import type { ModalParams } from '@/screens/system/ModalScreen';
 import {
   getModalCallbacks,
@@ -14,7 +16,8 @@ import {
 
 export const useModal = (params: ModalParams) => {
   const [visible, setVisible] = useState(false);
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const callbackIdRef = useRef<number>();
 
   const showModal = useCallback(() => {

app/src/navigation/document.ts

@@ -37,11 +37,6 @@ const documentScreens = {
       headerShown: false,
       animation: 'slide_from_bottom',
     } as NativeStackNavigationOptions,
-    initialParams: {
-      passportNumber: '',
-      dateOfBirth: '',
-      dateOfExpiry: '',
-    },
   },
   DocumentNFCTrouble: {
     screen: DocumentNFCTroubleScreen,
@@ -68,6 +63,10 @@ const documentScreens = {
       countryCode: null,
       documentCategory: null,
     },
+    params: {} as {
+      countryCode: string | null;
+      documentCategory: string | null;
+    },
   },
   DocumentNFCMethodSelection: {
     screen: DocumentNFCMethodSelectionScreen,

app/src/navigation/home.ts

@@ -78,6 +78,7 @@ const homeScreens = {
     initialParams: {
       errorType: 'general',
     },
+    params: {} as { errorType: 'general' | 'expired' },
   },
 };
 

app/src/navigation/index.tsx

@@ -10,6 +10,7 @@ import {
   createNavigationContainerRef,
   createStaticNavigation,
 } from '@react-navigation/native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
@@ -46,12 +47,16 @@ const AppNavigation = createNativeStackNavigator({
 });
 
 export type RootStackParamList = StaticParamList<typeof AppNavigation>;
+export type RootStackScreenProps<T extends keyof RootStackParamList> =
+  NativeStackScreenProps<RootStackParamList, T>;
 
 // Create a ref that we can use to access the navigation state
 export const navigationRef = createNavigationContainerRef<RootStackParamList>();
 
 declare global {
   namespace ReactNavigation {
+    // Allow React Navigation helpers to infer route params from our stack
+    // Use interface merging to avoid duplicate identifier errors
     // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     interface RootParamList extends RootStackParamList {}
   }

app/src/navigation/system.tsx

@@ -11,6 +11,7 @@ import type { DocumentCategory } from '@selfxyz/common/utils/types';
 import DeferredLinkingInfoScreen from '@/screens/system/DeferredLinkingInfoScreen';
 import LaunchScreen from '@/screens/system/LaunchScreen';
 import LoadingScreen from '@/screens/system/Loading';
+import type { ModalNavigationParams } from '@/screens/system/ModalScreen';
 import ModalScreen from '@/screens/system/ModalScreen';
 import SplashScreen from '@/screens/system/SplashScreen';
 
@@ -40,6 +41,7 @@ const systemScreens = {
       animation: 'fade',
       contentStyle: { backgroundColor: 'transparent' },
     } as NativeStackNavigationOptions,
+    params: {} as ModalNavigationParams,
   },
   DeferredLinkingInfo: {
     screen: DeferredLinkingInfoScreen,

app/src/providers/selfClientProvider.tsx

@@ -16,7 +16,7 @@ import {
   type WsConn,
 } from '@selfxyz/mobile-sdk-alpha';
 
-import { navigationRef } from '@/navigation';
+import { navigationRef, type RootStackParamList } from '@/navigation';
 import { unsafe_getPrivateKey } from '@/providers/authProvider';
 import { selfClientDocumentsAdapter } from '@/providers/passportDataProvider';
 import { logNFCEvent, logProofEvent } from '@/Sentry';
@@ -25,6 +25,11 @@ import analytics from '@/utils/analytics';
 
 type GlobalCrypto = { crypto?: { subtle?: Crypto['subtle'] } };
 
+type RouteParams<RouteName extends keyof RootStackParamList> = Extract<
+  RootStackParamList[RouteName],
+  object
+>;
+
 /**
  * Provides a configured Self SDK client instance to all descendants.
  *
@@ -33,6 +38,21 @@ type GlobalCrypto = { crypto?: { subtle?: Crypto['subtle'] } };
  * - `fetch`/`WebSocket` for network communication
  * - Web Crypto hashing with a stub signer
  */
+const navigateIfReady = <
+  RouteName extends keyof RootStackParamList,
+  Params extends RootStackParamList[RouteName],
+>(
+  ...args: undefined extends Params
+    ? [route: RouteName, params?: Params]
+    : [route: RouteName, params: Params]
+) => {
+  if (navigationRef.isReady()) {
+    const [route, params] = args;
+    // @ts-expect-error-next-line
+    navigationRef.navigate(route, params);
+  }
+};
+
 export const SelfClientProvider = ({ children }: PropsWithChildren) => {
   const config = useMemo(() => ({}), []);
   const adapters: Adapters = useMemo(
@@ -134,13 +154,17 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
 
     addListener(
       SdkEvents.PROVING_PASSPORT_NOT_SUPPORTED,
-      ({ countryCode, documentCategory }) => {
-        if (navigationRef.isReady()) {
-          navigationRef.navigate('ComingSoon', {
-            countryCode,
-            documentCategory,
-          } as any);
-        }
+      ({
+        countryCode,
+        documentCategory,
+      }: {
+        countryCode: string | null;
+        documentCategory: string | null;
+      }) => {
+        navigateIfReady('ComingSoon', {
+          countryCode,
+          documentCategory,
+        } as never);
       },
     );
 
@@ -207,10 +231,10 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
       }
     });
     addListener(SdkEvents.PROVING_AADHAAR_UPLOAD_FAILURE, ({ errorType }) => {
-      if (navigationRef.isReady()) {
-        // @ts-expect-error
-        navigationRef.navigate('AadhaarUploadError', { errorType });
-      }
+      const params: RouteParams<'AadhaarUploadError'> = {
+        errorType,
+      } as RouteParams<'AadhaarUploadError'>;
+      navigateIfReady('AadhaarUploadError', params);
     });
 
     return map;

app/src/screens/dev/CreateMockScreen.tsx

@@ -20,6 +20,7 @@ import {
   YStack,
 } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ChevronDown, Minus, Plus, X } from '@tamagui/lucide-icons';
 
 import { countryCodes } from '@selfxyz/common/constants';
@@ -37,6 +38,7 @@ import { useMockDataForm } from '@/hooks/useMockDataForm';
 import SelfDevCard from '@/images/card-dev.svg';
 import IdIcon from '@/images/icons/id_icon.svg';
 import NoteIcon from '@/images/icons/note.svg';
+import type { RootStackParamList } from '@/navigation';
 import { storePassportData } from '@/providers/passportDataProvider';
 import {
   black,
@@ -159,7 +161,8 @@ const FormSection: React.FC<FormSectionProps> = ({
 
 const CreateMockScreen: React.FC = () => {
   const { trackEvent } = useSelfClient();
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const {
     age,
     setAge,

app/src/screens/dev/CreateMockScreenDeepLink.tsx

@@ -9,6 +9,7 @@ import { ActivityIndicator, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScrollView, Text, XStack, YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { countryCodes } from '@selfxyz/common/constants';
 import type { IdDocInput } from '@selfxyz/common/utils';
@@ -20,13 +21,15 @@ import ButtonsContainer from '@/components/ButtonsContainer';
 import { BodyText } from '@/components/typography/BodyText';
 import Description from '@/components/typography/Description';
 import { Title } from '@/components/typography/Title';
+import type { RootStackParamList } from '@/navigation';
 import { storePassportData } from '@/providers/passportDataProvider';
 import useUserStore from '@/stores/userStore';
 import { black, borderColor, white } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';
 
 const CreateMockScreenDeepLink: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   const [selectedCountry, setSelectedCountry] = useState('USA');