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 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 { useCameraPermission, usePhotoOutput } from 'react-native-vision-camera';
|
||||||
import * as ImagePicker from 'expo-image-picker';
|
import * as ImagePicker from 'expo-image-picker';
|
||||||
import * as FileSystem from 'expo-file-system/legacy';
|
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
|
// the hardware AE bias right before each capture (live slider drags never
|
||||||
// touch the hardware — that flashed the Xiaomi preview).
|
// touch the hardware — that flashed the Xiaomi preview).
|
||||||
const viewfinderRef = useRef<ViewfinderHandle>(null);
|
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 [recipes, setRecipes] = useState<Recipe[]>([]);
|
||||||
const [selectedRecipe, setSelectedRecipe] = useState<Recipe | null>(null);
|
const [selectedRecipe, setSelectedRecipe] = useState<Recipe | null>(null);
|
||||||
|
|
||||||
@@ -924,7 +937,7 @@ export default function App() {
|
|||||||
<TopBar mode={mode} recipeName={activeRecipe.name} onSaveRecipe={handleSaveRecipe} />
|
<TopBar mode={mode} recipeName={activeRecipe.name} onSaveRecipe={handleSaveRecipe} />
|
||||||
|
|
||||||
{/* Bottom deck: chip panel (progressive disclosure) -> tool rail -> shutter */}
|
{/* 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 && (
|
{openTab !== null && (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
Reference in New Issue
Block a user