From c0c2f8532fa022b08afab62c501b37d1bea2bb40 Mon Sep 17 00:00:00 2001
From: locphamtran <tranloclqd@gmail.com>
Date: Thu, 10 Sep 2026 07:44:03 +0700
Subject: [PATCH] Lift bottom deck above the keyboard so the custom watermark
 input stays visible

Edge-to-edge (edgeToEdgeEnabled) makes Android ignore the manifest's
adjustResize, so the IME never shrank the window and the text input sat
under the keyboard. Track keyboardDidShow/Hide height and pad the deck.
---
 App.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/App.tsx b/App.tsx
index f0bb21f..421f062 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { View, StatusBar, Alert, ActivityIndicator, Text, AppState, Platform } from 'react-native';
+import { View, StatusBar, Alert, ActivityIndicator, Text, AppState, Platform, Keyboard } from 'react-native';
 import { useCameraPermission, usePhotoOutput } from 'react-native-vision-camera';
 import * as ImagePicker from 'expo-image-picker';
 import * as FileSystem from 'expo-file-system/legacy';
@@ -49,6 +49,19 @@ export default function App() {
   // the hardware AE bias right before each capture (live slider drags never
   // touch the hardware — that flashed the Xiaomi preview).
   const viewfinderRef = useRef<ViewfinderHandle>(null);
+  // Edge-to-edge (app.json/gradle edgeToEdgeEnabled) makes Android ignore the
+  // manifest's adjustResize, so the OS never shrinks the window for the IME and
+  // the bottom deck stays under the keyboard. Track the IME height ourselves and
+  // lift the deck by it (covers the custom-watermark text input).
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  useEffect(() => {
+    const show = Keyboard.addListener('keyboardDidShow', (e) => setKeyboardHeight(e.endCoordinates.height));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardHeight(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
   const [recipes, setRecipes] = useState<Recipe[]>([]);
   const [selectedRecipe, setSelectedRecipe] = useState<Recipe | null>(null);
   
@@ -924,7 +937,7 @@ export default function App() {
       <TopBar mode={mode} recipeName={activeRecipe.name} onSaveRecipe={handleSaveRecipe} />
 
       {/* Bottom deck: chip panel (progressive disclosure) -> tool rail -> shutter */}
-      <View className="absolute left-0 right-0 bottom-0 z-10">
+      <View className="absolute left-0 right-0 bottom-0 z-10" style={{ paddingBottom: keyboardHeight }}>
         {openTab !== null && (
           <View
             style={{