Replace safe bottom padding hook

app/jest.config.cjs

@@ -42,8 +42,6 @@ module.exports = {
       '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/index.cjs',
     '^@selfxyz/mobile-sdk-alpha/components$':
       '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/components/index.cjs',
-    '^@selfxyz/mobile-sdk-alpha/hooks$':
-      '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/hooks/index.cjs',
     '^@selfxyz/mobile-sdk-alpha/onboarding/(.*)$':
       '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/flows/onboarding/$1.cjs',
     '^@selfxyz/mobile-sdk-alpha/disclosing/(.*)$':

app/src/screens/dev/DevSettingsScreen.tsx

@@ -16,6 +16,7 @@ import { Button, Sheet, Text, XStack, YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { Check, ChevronDown, ChevronRight } from '@tamagui/lucide-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   red500,
@@ -30,7 +31,6 @@ import {
   yellow500,
 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
-import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 
 import BugIcon from '@/assets/icons/bug_icon.svg';
 import IdIcon from '@/assets/icons/id_icon.svg';
@@ -298,7 +298,8 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
   const setLoggingSeverity = useSettingStore(state => state.setLoggingSeverity);
   const [hasNotificationPermission, setHasNotificationPermission] =
     useState(false);
-  const paddingBottom = useSafeBottomPadding(20);
+  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = bottom + 20;
 
   // Check notification permissions on mount
   useEffect(() => {

app/src/screens/documents/aadhaar/AadhaarUploadErrorScreen.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { XStack, YStack } from 'tamagui';
 import type { RouteProp } from '@react-navigation/native';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
@@ -17,7 +18,6 @@ import {
   slate500,
   white,
 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
-import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 import { getErrorMessages } from '@selfxyz/mobile-sdk-alpha/onboarding/import-aadhaar';
 
 import WarningIcon from '@/assets/images/warning.svg';
@@ -33,7 +33,8 @@ type AadhaarUploadErrorRoute = RouteProp<
 >;
 
 const AadhaarUploadErrorScreen: React.FC = () => {
-  const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
+  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = bottom + extraYPadding + 35;
   const navigation = useNavigation();
   const route = useRoute<AadhaarUploadErrorRoute>();
   const { trackEvent } = useSelfClient();

app/src/screens/documents/aadhaar/AadhaarUploadScreen.tsx

@@ -8,6 +8,7 @@ import { Linking } from 'react-native';
 import { Image, XStack, YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
@@ -19,7 +20,6 @@ import {
   slate500,
   white,
 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
-import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 import { useAadhaar } from '@selfxyz/mobile-sdk-alpha/onboarding/import-aadhaar';
 
 import AadhaarImage from '@/assets/images/512w.png';
@@ -32,7 +32,8 @@ import type { RootStackParamList } from '@/navigation';
 import { extraYPadding } from '@/utils/styleUtils';
 
 const AadhaarUploadScreen: React.FC = () => {
-  const paddingBottom = useSafeBottomPadding(extraYPadding + 50);
+  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = bottom + extraYPadding + 50;
 
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();

app/src/screens/documents/aadhaar/AadhaarUploadedSuccessScreen.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
@@ -17,14 +18,14 @@ import {
   slate500,
   white,
 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
-import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 
 import BlueCheckIcon from '@/assets/images/blue_check.svg';
 import type { RootStackParamList } from '@/navigation';
 import { extraYPadding } from '@/utils/styleUtils';
 
 const AadhaarUploadedSuccessScreen: React.FC = () => {
-  const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
+  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = bottom + extraYPadding + 35;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { trackEvent } = useSelfClient();

app/src/screens/home/HomeScreen.tsx

@@ -19,6 +19,7 @@ import {
   useRoute,
 } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { DocumentCatalog, IDDocument } from '@selfxyz/common/utils/types';
 import type { DocumentMetadata } from '@selfxyz/mobile-sdk-alpha';
@@ -34,7 +35,6 @@ import {
   slate300,
 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
-import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 
 import LogoInversed from '@/assets/images/logo_inversed.svg';
 import UnverifiedHumanImage from '@/assets/images/unverified_human.png';
@@ -155,7 +155,8 @@ const HomeScreen: React.FC = () => {
   }, [documentCatalog]);
 
   // Calculate bottom padding to prevent button bleeding into system navigation
-  const bottomPadding = useSafeBottomPadding(20);
+  const { bottom } = useSafeAreaInsets();
+  const bottomPadding = bottom + 20;
 
   // Create a stable reference to avoid hook dependency issues
   const onEarnPointsPressRef = useRef<

packages/mobile-sdk-alpha/package.json

@@ -69,18 +69,6 @@
       "import": "./dist/esm/components/index.js",
       "require": "./dist/cjs/components/index.cjs"
     },
-    "./hooks": {
-      "types": "./dist/esm/hooks/index.d.ts",
-      "react-native": "./dist/esm/hooks/index.js",
-      "import": "./dist/esm/hooks/index.js",
-      "require": "./dist/cjs/hooks/index.cjs"
-    },
-    "./hooks/useSafeBottomPadding": {
-      "types": "./dist/esm/hooks/useSafeBottomPadding.d.ts",
-      "react-native": "./dist/esm/hooks/useSafeBottomPadding.js",
-      "import": "./dist/esm/hooks/useSafeBottomPadding.js",
-      "require": "./dist/cjs/hooks/useSafeBottomPadding.cjs"
-    },
     "./utils/utils": {
       "types": "./dist/esm/utils/utils.d.ts",
       "react-native": "./dist/esm/utils/utils.js",
@@ -195,6 +183,7 @@
     "react-native-blur-effect": "^1.1.3",
     "react-native-haptic-feedback": "*",
     "react-native-localize": "*",
+    "react-native-safe-area-context": "^5.6.1",
     "react-native-svg": "*",
     "react-native-webview": "^13.16.0"
   },

packages/mobile-sdk-alpha/src/flows/onboarding/confirm-identification.tsx

@@ -4,6 +4,7 @@
 
 import { useCallback, useEffect } from 'react';
 import { StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { DocumentCategory } from '@selfxyz/common/utils/types';
 
@@ -17,7 +18,6 @@ import { black, white } from '../../constants/colors';
 import { useSelfClient } from '../../context';
 import { loadSelectedDocument } from '../../documents/utils';
 import { notificationSuccess } from '../../haptic';
-import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
 import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
 import { SdkEvents } from '../../types/events';
 import type { SelfClient } from '../../types/public';
@@ -41,7 +41,8 @@ export const ConfirmIdentificationScreen = ({ onBeforeConfirm }: { onBeforeConfi
 
   // Calculate bottom padding to prevent button bleeding into system navigation
   // ExpandableBottomLayout.BottomSection handles safe areas internally
-  const paddingBottom = useSafeBottomPadding(20);
+  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = bottom + 20;
 
   return (
     <ExpandableBottomLayout.Layout backgroundColor={black}>

packages/mobile-sdk-alpha/src/hooks/index.ts

@@ -1,5 +0,0 @@
-// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
-// SPDX-License-Identifier: BUSL-1.1
-// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
-
-export { useSafeBottomPadding } from './useSafeBottomPadding';

packages/mobile-sdk-alpha/src/hooks/useSafeBottomPadding.ts

@@ -1,34 +0,0 @@
-// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
-// SPDX-License-Identifier: BUSL-1.1
-// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
-
-import { useMemo } from 'react';
-import { Dimensions } from 'react-native';
-
-/**
- * Custom hook to calculate bottom padding that prevents UI elements from bleeding
- * into the system navigation area on smaller screens.
- *
- * This hook uses screen height detection to add extra padding for smaller screens
- * (< 900px height) to account for system navigation bars and safe areas.
- *
- * @param basePadding - Base padding to add (default: 20)
- * @returns Total bottom padding value
- *
- * @example
- * ```tsx
- * // For use with ExpandableBottomLayout.BottomSection
- * const bottomPadding = useSafeBottomPadding(20);
- * <ExpandableBottomLayout.BottomSection paddingBottom={bottomPadding} />
- * ```
- *
- */
-export const useSafeBottomPadding = (basePadding: number = 20): number => {
-  const { height: windowHeight } = Dimensions.get('window');
-
-  return useMemo(() => {
-    const isSmallScreen = windowHeight < 900;
-    const fallbackPadding = isSmallScreen ? 50 : 0;
-    return basePadding + fallbackPadding;
-  }, [windowHeight, basePadding]);
-};

packages/mobile-sdk-alpha/tsup.config.ts

@@ -41,8 +41,6 @@ const entry = {
   'constants/colors': 'src/constants/colors.ts',
   'constants/fonts': 'src/constants/fonts.ts',
   'components/index': 'src/components/index.ts',
-  'hooks/index': 'src/hooks/index.ts',
-  'hooks/useSafeBottomPadding': 'src/hooks/useSafeBottomPadding.ts',
   stores: 'src/stores/index.ts',
   'utils/utils': 'src/utils/utils.ts',
   ...flowEntries,
@@ -78,6 +76,7 @@ export default defineConfig([
       'lottie-react-native',
       'react-native-haptic-feedback',
       'react-native-localize',
+      'react-native-safe-area-context',
       // SVG files should be handled by React Native's SVG transformer
       /\.svg$/,
     ],
@@ -129,6 +128,7 @@ export default defineConfig([
       'lottie-react-native',
       'react-native-haptic-feedback',
       'react-native-localize',
+      'react-native-safe-area-context',
       // SVG files should be handled by React Native's SVG transformer
       /\.svg$/,
     ],