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.
This commit is contained in:
2026-09-10 07:44:03 +07:00
parent 3eeef6feb9
commit c0c2f8532f
+15 -2
View File
@@ -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={{