Wire react-native-keyboard-controller at root layout

Mount `KeyboardProvider` (from react-native-keyboard-controller) as
the outermost provider so every screen gets a consistent cross-platform
keyboard lifecycle. On Android this fixes the Places map search pill
losing focus one tick after tapping: the library replaces React
Native's unreliable keyboard bookkeeping with a native module that
stays in sync through `BottomSheet.snapToIndex` animations.

With the provider in place, the `requestAnimationFrame` workaround
around the map's `handleSearchFocus` is no longer needed — the snap
runs synchronously inside `onFocus` and focus is preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: NateIsern

app/_layout.tsx

@@ -24,6 +24,7 @@ import { vars } from "nativewind";
 import * as Linking from "expo-linking";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { KeyboardProvider } from "react-native-keyboard-controller";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import {
   BloomThemeProvider,
@@ -190,20 +191,22 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
-        <BloomThemeProvider
-          mode={mode}
-          colorPreset="faircoin"
-          onModeChange={handleModeChange}
-        >
-          <BottomSheetModalProvider>
-            <AppContent
-              key={language}
-              ready={fontsLoaded && themeReady && languageReady}
-            />
-          </BottomSheetModalProvider>
-        </BloomThemeProvider>
-      </SafeAreaProvider>
+      <KeyboardProvider>
+        <SafeAreaProvider>
+          <BloomThemeProvider
+            mode={mode}
+            colorPreset="faircoin"
+            onModeChange={handleModeChange}
+          >
+            <BottomSheetModalProvider>
+              <AppContent
+                key={language}
+                ready={fontsLoaded && themeReady && languageReady}
+              />
+            </BottomSheetModalProvider>
+          </BloomThemeProvider>
+        </SafeAreaProvider>
+      </KeyboardProvider>
     </GestureHandlerRootView>
   );
 }

app/map.tsx

@@ -344,15 +344,12 @@ export default function MapScreen() {
   const [userLocation, setUserLocation] = useState<UserCoords | null>(null);
 
   // Tapping the search field expands the sheet to its top snap so the
-  // filtered list fills the screen. We defer the snap one frame via
-  // `requestAnimationFrame` — snapping synchronously inside the
-  // `onFocus` handler fights with React Native's own focus bookkeeping
-  // on Android and the TextInput loses focus a beat later. Queuing the
-  // snap for the next frame lets focus settle first.
+  // filtered list fills the screen. `KeyboardProvider` at the root
+  // layout keeps the keyboard in sync with the focused TextInput across
+  // bottom-sheet snap animations, so we can snap synchronously without
+  // Android losing focus a beat later.
   const handleSearchFocus = useCallback(() => {
-    requestAnimationFrame(() => {
-      sheetRef.current?.snapToIndex(SHEET_INDEX_SEARCH);
-    });
+    sheetRef.current?.snapToIndex(SHEET_INDEX_SEARCH);
   }, []);
 
   const handleSearchBlur = useCallback(() => {

package.json

@@ -62,6 +62,7 @@
     "react-dom": "19.2.0",
     "react-native": "^0.83.4",
     "react-native-gesture-handler": "^2.31.1",
+    "react-native-keyboard-controller": "1.20.7",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "~5.6.2",