App polish for 2.9 rd1 (#1359)

* add useSafeBottomPadding

* add bottom padding to dev screen

* use safe bottom padding

* skip uploading if building android bundle locally

* fix tests

* cache fix script

* clean up country picker, fix font color

* sort package jsons, add watcher for mobile sdk

* formatting

* only bump versions for successfull builds

* move all css

* cleaner script

* kill watchers before starting new one

app/src/screens/dev/DevSettingsScreen.tsx

@@ -17,6 +17,8 @@ import { useNavigation } from '@react-navigation/native';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { Check, ChevronDown, ChevronRight } from '@tamagui/lucide-icons';
 
+import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
+
 import BugIcon from '@/images/icons/bug_icon.svg';
 import IdIcon from '@/images/icons/id_icon.svg';
 import WarningIcon from '@/images/icons/warning.svg';
@@ -295,6 +297,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
   const subscribedTopics = useSettingStore(state => state.subscribedTopics);
   const [hasNotificationPermission, setHasNotificationPermission] =
     useState(false);
+  const paddingBottom = useSafeBottomPadding(20);
 
   // Check notification permissions on mount
   useEffect(() => {
@@ -466,6 +469,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
         flex={1}
         paddingHorizontal="$4"
         paddingTop="$4"
+        paddingBottom={paddingBottom}
       >
         <ParameterSection
           icon={<IdIcon />}

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

@@ -14,10 +14,10 @@ import {
   SecondaryButton,
 } from '@selfxyz/mobile-sdk-alpha/components';
 import { AadhaarEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
+import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 import { getErrorMessages } from '@selfxyz/mobile-sdk-alpha/onboarding/import-aadhaar';
 
 import WarningIcon from '@/images/warning.svg';
-import { useSafeAreaInsets } from '@/mocks/react-native-safe-area-context';
 import { black, slate100, slate200, slate500, white } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';
 
@@ -31,7 +31,7 @@ type AadhaarUploadErrorRoute = RouteProp<
 >;
 
 const AadhaarUploadErrorScreen: React.FC = () => {
-  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
   const navigation = useNavigation();
   const route = useRoute<AadhaarUploadErrorRoute>();
   const { trackEvent } = useSelfClient();
@@ -78,7 +78,7 @@ const AadhaarUploadErrorScreen: React.FC = () => {
       <YStack
         paddingHorizontal={25}
         backgroundColor={white}
-        paddingBottom={bottom + extraYPadding + 35}
+        paddingBottom={paddingBottom}
         paddingTop={25}
       >
         <XStack gap="$3" alignItems="stretch">

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

@@ -12,11 +12,11 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
 import { AadhaarEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
+import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 import { useAadhaar } from '@selfxyz/mobile-sdk-alpha/onboarding/import-aadhaar';
 
 import { useModal } from '@/hooks/useModal';
 import AadhaarImage from '@/images/512w.png';
-import { useSafeAreaInsets } from '@/mocks/react-native-safe-area-context';
 import type { RootStackParamList } from '@/navigation';
 import { slate100, slate200, slate400, slate500, white } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';
@@ -26,7 +26,7 @@ import {
 } from '@/utils/qrScanner';
 
 const AadhaarUploadScreen: React.FC = () => {
-  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = useSafeBottomPadding(extraYPadding + 50);
 
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -140,11 +140,7 @@ const AadhaarUploadScreen: React.FC = () => {
   ]);
 
   return (
-    <YStack
-      flex={1}
-      backgroundColor={slate100}
-      paddingBottom={bottom + extraYPadding + 50}
-    >
+    <YStack flex={1} backgroundColor={slate100} paddingBottom={paddingBottom}>
       <YStack flex={1} paddingHorizontal={20} paddingTop={20}>
         <YStack
           flex={1}

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

@@ -10,15 +10,15 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
 import { AadhaarEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
+import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 
 import BlueCheckIcon from '@/images/blue_check.svg';
-import { useSafeAreaInsets } from '@/mocks/react-native-safe-area-context';
 import type { RootStackParamList } from '@/navigation';
 import { black, slate100, slate200, slate500, white } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';
 
 const AadhaarUploadedSuccessScreen: React.FC = () => {
-  const { bottom } = useSafeAreaInsets();
+  const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { trackEvent } = useSelfClient();
@@ -62,7 +62,7 @@ const AadhaarUploadedSuccessScreen: React.FC = () => {
       <YStack
         paddingHorizontal={25}
         backgroundColor={white}
-        paddingBottom={bottom + extraYPadding + 35}
+        paddingBottom={paddingBottom}
         paddingTop={25}
       >
         <PrimaryButton