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:
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user