Reality2byte
diff --git a/‎android/gradle.properties‎
Lines changed: 3 additions & 1 deletion b/‎android/gradle.properties‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎app/components/Nav/App/App.tsx‎
Lines changed: 62 additions & 27 deletions b/‎app/components/Nav/App/App.tsx‎
Lines changed: 62 additions & 27 deletions
diff --git a/‎app/components/UI/FoxAnimation/FoxAnimation.test.tsx‎
Lines changed: 103 additions & 1 deletion b/‎app/components/UI/FoxAnimation/FoxAnimation.test.tsx‎
Lines changed: 103 additions & 1 deletion
diff --git a/‎app/components/UI/FoxAnimation/FoxAnimation.tsx‎
Lines changed: 55 additions & 39 deletions b/‎app/components/UI/FoxAnimation/FoxAnimation.tsx‎
Lines changed: 55 additions & 39 deletions
@@ -55,6 +55,8 @@ expo.useLegacyPackaging=false
 # Use this property to enable edge-to-edge display support.
 # This allows your app to draw behind system bars for an immersive UI.
 # Note: Only works with ReactActivity and should not be used with custom Activity.
-edgeToEdgeEnabled=false
+# Required for onboarding cream canvas / fox to reach the Android gesture area
+# (targetSdk 36 treats the nav bar as transparent over the window background).
+edgeToEdgeEnabled=true
 reactNativeDir=../node_modules/react-native
 REACT_NATIVE_DIR=../node_modules/react-native
@@ -306,16 +306,27 @@ const OnboardingSuccessFlow = () => {
  * Create Wallet and Import from Secret Recovery Phrase
  */
 const OnboardingNav = () => {
-  const { colors } = useTheme();
+  const { themeAppearance } = useTheme();
+  const onboardingCanvasColor =
+    themeAppearance === 'dark'
+      ? importedColors.gettingStartedTextColor
+      : importedColors.gettingStartedPageBackgroundColorLightMode;
 
   return (
     <NativeStack.Navigator
       initialRouteName={'Onboarding'}
       screenOptions={{
-        contentStyle: { backgroundColor: colors.background.default },
+        contentStyle: { backgroundColor: onboardingCanvasColor },
       }}
     >
-      <NativeStack.Screen name="Onboarding" component={Onboarding} />
+      <NativeStack.Screen
+        name="Onboarding"
+        component={Onboarding}
+        options={{
+          headerShown: false,
+          contentStyle: { backgroundColor: onboardingCanvasColor },
+        }}
+      />
       <NativeStack.Screen
         name={Routes.ONBOARDING.SOCIAL_LOGIN_SUCCESS_NEW_USER}
         component={SocialLoginSuccessNewUser}
@@ -453,29 +464,42 @@ const SimpleWebviewScreen = () => (
   </NativeStack.Navigator>
 );
 
-const OnboardingRootNav = () => (
-  <NativeStack.Navigator
-    initialRouteName={Routes.ONBOARDING.NAV}
-    screenOptions={{ headerShown: false }}
-  >
-    <NativeStack.Screen name="OnboardingNav" component={OnboardingNav} />
-    <NativeStack.Screen
-      name={Routes.QR_TAB_SWITCHER}
-      component={QRTabSwitcherWithMessenger}
-      options={{ presentation: 'modal' }}
-    />
-    <NativeStack.Screen
-      name={Routes.SHEET.ADD_DEVICE_VERIFICATION_CODE}
-      component={VerificationCodeBottomSheet}
-      options={addDeviceVerificationCodeScreenOptions}
-    />
-    <NativeStack.Screen
-      name={Routes.WEBVIEW.MAIN}
-      component={SimpleWebviewScreen}
-      options={{ presentation: 'modal' }}
-    />
-  </NativeStack.Navigator>
-);
+const OnboardingRootNav = () => {
+  const { themeAppearance } = useTheme();
+  const onboardingCanvasColor =
+    themeAppearance === 'dark'
+      ? importedColors.gettingStartedTextColor
+      : importedColors.gettingStartedPageBackgroundColorLightMode;
+
+  return (
+    <NativeStack.Navigator
+      initialRouteName={Routes.ONBOARDING.NAV}
+      screenOptions={{
+        headerShown: false,
+        // Keep stack chrome cream/purple so Android gesture inset never flashes
+        // the default white window background behind Onboarding.
+        contentStyle: { backgroundColor: onboardingCanvasColor },
+      }}
+    >
+      <NativeStack.Screen name="OnboardingNav" component={OnboardingNav} />
+      <NativeStack.Screen
+        name={Routes.QR_TAB_SWITCHER}
+        component={QRTabSwitcherWithMessenger}
+        options={{ presentation: 'modal' }}
+      />
+      <NativeStack.Screen
+        name={Routes.SHEET.ADD_DEVICE_VERIFICATION_CODE}
+        component={VerificationCodeBottomSheet}
+        options={addDeviceVerificationCodeScreenOptions}
+      />
+      <NativeStack.Screen
+        name={Routes.WEBVIEW.MAIN}
+        component={SimpleWebviewScreen}
+        options={{ presentation: 'modal' }}
+      />
+    </NativeStack.Navigator>
+  );
+};
 
 const VaultRecoveryFlow = () => {
   const { colors } = useTheme();
@@ -1140,7 +1164,11 @@ const ModalSwitchAccountType = () => (
 );
 
 const AppFlow = () => {
-  const { colors } = useTheme();
+  const { colors, themeAppearance } = useTheme();
+  const onboardingCanvasColor =
+    themeAppearance === 'dark'
+      ? importedColors.gettingStartedTextColor
+      : importedColors.gettingStartedPageBackgroundColorLightMode;
 
   return (
     <NativeStack.Navigator
@@ -1172,6 +1200,13 @@ const AppFlow = () => {
       <NativeStack.Screen
         name="OnboardingRootNav"
         component={OnboardingRootNav}
+        options={{
+          // Opaque card: AppFlow defaults to transparentModal, which lets the
+          // activity window's white theme color show in the Android gesture
+          // inset under the fox ("paper cut").
+          presentation: 'card',
+          contentStyle: { backgroundColor: onboardingCanvasColor },
+        }}
       />
       <NativeStack.Screen
         name={Routes.ONBOARDING.SUCCESS_FLOW}
 
@@ -1,6 +1,7 @@
 import React from 'react';
+import { Platform } from 'react-native';
 import { render, act } from '@testing-library/react-native';
-import FoxAnimation from './FoxAnimation';
+import FoxAnimation, { getSafeBottomPosition } from './FoxAnimation';
 import Logger from '../../../util/Logger';
 import Device from '../../../util/device';
 import {
@@ -16,6 +17,107 @@ jest.mock('../../../util/device');
 const mockedLogger = Logger as jest.Mocked<typeof Logger>;
 const mockedDevice = Device as jest.Mocked<typeof Device>;
 
+const insets = (bottom: number) => ({
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom,
+});
+
+describe('getSafeBottomPosition', () => {
+  const originalOS = Platform.OS;
+
+  afterEach(() => {
+    Object.defineProperty(Platform, 'OS', {
+      configurable: true,
+      get: () => originalOS,
+    });
+  });
+
+  const setPlatformOS = (os: typeof Platform.OS) => {
+    Object.defineProperty(Platform, 'OS', {
+      configurable: true,
+      get: () => os,
+    });
+  };
+
+  it('returns iOS footer offset using bottom inset plus 60', () => {
+    setPlatformOS('ios');
+
+    expect(getSafeBottomPosition(true, insets(50))).toBe(110);
+  });
+
+  it('returns minimum 100 for iOS footer when inset is small', () => {
+    setPlatformOS('ios');
+
+    expect(getSafeBottomPosition(true, insets(0))).toBe(100);
+  });
+
+  it('returns Android footer offset with large inset', () => {
+    setPlatformOS('android');
+
+    expect(getSafeBottomPosition(true, insets(48))).toBe(108);
+  });
+
+  it('returns Android footer offset with small inset', () => {
+    setPlatformOS('android');
+
+    expect(getSafeBottomPosition(true, insets(10))).toBe(100);
+  });
+
+  it('returns 100 for footer on non-iOS non-Android platforms', () => {
+    setPlatformOS('web');
+
+    expect(getSafeBottomPosition(true, insets(0))).toBe(100);
+  });
+
+  it('returns negative iOS offset when home indicator inset is present', () => {
+    setPlatformOS('ios');
+
+    expect(getSafeBottomPosition(false, insets(34))).toBe(-24);
+  });
+
+  it('clamps iOS no-footer offset to -40 for large home indicator', () => {
+    setPlatformOS('ios');
+
+    expect(getSafeBottomPosition(false, insets(80))).toBe(-40);
+  });
+
+  it('returns -20 for iOS with no bottom inset', () => {
+    setPlatformOS('ios');
+
+    expect(getSafeBottomPosition(false, insets(0))).toBe(-20);
+  });
+
+  it('tucks Android full-bleed fox into the gesture inset like iOS', () => {
+    setPlatformOS('android');
+
+    expect(
+      getSafeBottomPosition(false, insets(48), { fullBleedBottom: true }),
+    ).toBe(-38);
+  });
+
+  it('uses a small negative Android full-bleed offset when inset is missing', () => {
+    setPlatformOS('android');
+
+    expect(
+      getSafeBottomPosition(false, undefined, { fullBleedBottom: true }),
+    ).toBe(-20);
+  });
+
+  it('returns 0 for Android when parent already applied bottom safe area', () => {
+    setPlatformOS('android');
+
+    expect(getSafeBottomPosition(false, insets(48))).toBe(0);
+  });
+
+  it('returns -20 for no-footer on non-iOS non-Android platforms', () => {
+    setPlatformOS('web');
+
+    expect(getSafeBottomPosition(false, insets(0))).toBe(-20);
+  });
+});
+
 describe('FoxAnimation', () => {
   beforeEach(() => {
     jest.clearAllMocks();
 
@@ -22,68 +22,84 @@ const getFoxAnimationHeight = (hasFooter: boolean) => {
   return Device.isMediumDevice() ? 300 : 350;
 };
 
-const getSafeBottomPosition = (hasFooter: boolean, insets?: EdgeInsets) => {
+export interface FoxSafeBottomOptions {
+  /**
+   * Parent paints under the Android system nav / gesture area (e.g. Onboarding
+   * root canvas with top-only SafeArea). When true, Android uses a negative
+   * bottom like iOS so the fox sits flush (no cream strip under the art).
+   * Login must leave this false — its SafeAreaView already applied the inset.
+   */
+  fullBleedBottom?: boolean;
+}
+
+export const getSafeBottomPosition = (
+  hasFooter: boolean,
+  insets?: EdgeInsets,
+  options?: FoxSafeBottomOptions,
+) => {
   const basePadding = insets?.bottom || 0;
 
-  // iOS specific
-  if (Platform.OS === 'ios') {
-    if (hasFooter) {
-      // Footer case: position above footer + safe area
+  if (hasFooter) {
+    if (Platform.OS === 'ios') {
       return Math.max(100, basePadding + 60);
     }
+    if (Platform.OS === 'android') {
+      return Math.max(100, basePadding + (basePadding > 20 ? 60 : 40));
+    }
+    return 100;
+  }
+
+  if (Platform.OS === 'ios') {
     if (basePadding > 0) {
-      // iPhone X+ with home indicator
       return Math.max(-40, -(basePadding - 10));
     }
     return -20;
   }
 
-  // Android specific
   if (Platform.OS === 'android') {
-    // Samsung and other Android devices with gesture navigation
-    if (basePadding > 20) {
-      return hasFooter
-        ? Math.max(100, basePadding + 60)
-        : Math.max(-20, basePadding);
+    // Positive insets.bottom lifts the fox and leaves a cream/white strip under
+    // the graphic on full-bleed onboarding. Tuck like iOS instead.
+    if (options?.fullBleedBottom) {
+      if (basePadding > 0) {
+        return Math.max(-40, -(basePadding - 10));
+      }
+      // Edge-to-edge often reports 0 inset; still pull slightly into the gesture area.
+      return -20;
     }
-
-    // Standard Android devices
-    return hasFooter
-      ? Math.max(100, basePadding + 40)
-      : Math.max(-20, basePadding - 20);
+    // Login (and other bottom-safe parents): do not double-count the inset.
+    return 0;
   }
 
-  // Fallback for other platforms
-  return hasFooter ? 100 : -20;
+  return -20;
 };
 
-const createStyles = (hasFooter: boolean, insets?: EdgeInsets) =>
-  StyleSheet.create({
-    foxAnimationWrapper: {
-      position: 'absolute',
-      bottom: getSafeBottomPosition(hasFooter, insets),
-      left: 0,
-      right: 0,
-      height: getFoxAnimationHeight(hasFooter),
-      alignItems: 'center',
-      justifyContent: 'center',
-      pointerEvents: 'none',
-    },
-    foxAnimation: {
-      width: '100%',
-      height: '100%',
-    },
-  });
+const styles = StyleSheet.create({
+  foxAnimationWrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+  },
+  foxAnimation: {
+    width: '100%',
+    height: '100%',
+  },
+});
 
 const FoxAnimation = ({
   hasFooter,
   trigger,
+  fullBleedBottom = false,
 }: {
   hasFooter: boolean;
   trigger?: 'Loader' | 'Start';
+  fullBleedBottom?: boolean;
 }) => {
   const insets = useSafeAreaInsets();
-  const styles = createStyles(hasFooter, insets);
+  const bottom = getSafeBottomPosition(hasFooter, insets, { fullBleedBottom });
+  const height = getFoxAnimationHeight(hasFooter);
 
   const { riveFile } = useRiveFile(FoxAnimationRive);
   const { riveViewRef, setHybridRef } = useRive();
@@ -103,15 +119,15 @@ const FoxAnimation = ({
   }, [riveViewRef, riveHandlers, trigger]);
 
   return (
-    <View style={[styles.foxAnimationWrapper]}>
+    <View style={[styles.foxAnimationWrapper, { bottom, height }]}>
       {riveFile && (
         <RiveView
           hybridRef={setHybridRef}
           style={styles.foxAnimation}
           file={riveFile}
           autoPlay
           fit={Fit.Contain}
-          alignment={Alignment.Center}
+          alignment={hasFooter ? Alignment.Center : Alignment.BottomCenter}
           stateMachineName="FoxRaiseUp"
           testID="fox-animation"
           onError={(riveError) => {