fix(Android, FormSheet): Add logic for dismissing keyboard when the BottomSheet is presented (#3617)

t0maboro · kkafar · web-flow · commit 9b387ce05ba6 · 2026-02-06T12:46:19.000+01:00
## Description Add logic to handle keyboard visibility and focus restoration on sheet enter/exit > [!IMPORTANT] > It doesn't work well in some edge cases, especially when we have a Screen with a TextInput and a FormSheet with another TextInput. When using an HW keyboard in such a case, if we submit the Input inside the FormSheet (losing focus) and then want to reopen it, the focus search might select the TextInput on the Screen, as we do not block focus on the Screen behind the FormSheet. > Creating ticket for that: software-mansion/react-native-screens-labs#929 Implementation details: - I'm checking the IME inset on the DecorView, there's 1 soft keyboard for the whole application - it's easier to detect whether it was open on the previous Screen - I'm restoring the focus, only if the keyboard was visible on the previous screen - that might be bad for applications that are designed for keyboard/D-Pad navigation - I don't want the Screen to be the subject of focus - there is no good reason for that imo, therefore, I've added FOCUS_AFTER_DESCENDANTS to focus on the 1st focusable descendant inside the FormSheet - I'm using onCreate/Destroy callbacks, instead of onStart/Stop callbacks, because of the timing for autoFocus inside the FormSheet Closes: software-mansion/react-native-screens-labs#928 ## Changes - added lifecycle callbacks for sheet creation/destruction that will show/hide keyboard from Screen and save the latest focus ## Before & after - visual documentation | Before | After | | --- | --- | | <video src="https://github.com/user-attachments/assets/bd07bc9d-ee8e-4c92-bea8-75117446bb96" /> | <video src="https://github.com/user-attachments/assets/5e8cd8e6-6da9-47d0-b138-48332087cc59" /> | ## Test plan Test3617 ## Checklist - [x] Included code example that can be used to test this change. - [ ] Updated / created local changelog entries in relevant test files. - [x] For visual changes, included screenshots / GIFs / recordings documenting the change. - [ ] For API changes, updated relevant public types. - [ ] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>
diff --git a/android/src/main/java/com/swmansion/rnscreens/bottomsheet/SheetDelegate.kt b/android/src/main/java/com/swmansion/rnscreens/bottomsheet/SheetDelegate.kt
@@ -7,6 +7,7 @@ import android.animation.ValueAnimator
 import android.content.Context
 import android.os.Build
 import android.view.View
+import android.view.ViewGroup
 import android.view.WindowManager
 import android.view.inputmethod.InputMethodManager
 import androidx.coordinatorlayout.widget.CoordinatorLayout
@@ -27,6 +28,7 @@ import com.swmansion.rnscreens.ScreenStackFragment
 import com.swmansion.rnscreens.events.ScreenAnimationDelegate
 import com.swmansion.rnscreens.events.ScreenEventEmitter
 import com.swmansion.rnscreens.transition.ExternalBoundaryValuesEvaluator
+import com.swmansion.rnscreens.utils.isSoftKeyboardVisibleOrNull
 
 class SheetDelegate(
     val screen: Screen,
@@ -63,6 +65,11 @@ class SheetDelegate(
         checkNotNull(screen.reactContext.currentActivity) { "[RNScreens] Attempt to access activity on detached context" }
             .window.decorView
 
+    private var viewToRestoreFocus: View? = null
+
+    private val inputMethodManager: InputMethodManager?
+        get() = screen.reactContext.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+
     init {
         assert(screen.fragment is ScreenStackFragment) { "[RNScreens] Sheets are supported only in native stack" }
         screen.fragment!!.lifecycle.addObserver(this)
@@ -77,13 +84,19 @@ class SheetDelegate(
         event: Lifecycle.Event,
     ) {
         when (event) {
+            Lifecycle.Event.ON_CREATE -> handleHostFragmentOnCreate()
             Lifecycle.Event.ON_START -> handleHostFragmentOnStart()
             Lifecycle.Event.ON_RESUME -> handleHostFragmentOnResume()
             Lifecycle.Event.ON_PAUSE -> handleHostFragmentOnPause()
+            Lifecycle.Event.ON_DESTROY -> handleHostFragmentOnDestroy()
             else -> Unit
         }
     }
 
+    private fun handleHostFragmentOnCreate() {
+        preserveBackgroundFocus()
+    }
+
     private fun handleHostFragmentOnStart() {
         InsetsObserverProxy.registerOnView(requireDecorView())
     }
@@ -96,6 +109,10 @@ class SheetDelegate(
         InsetsObserverProxy.removeOnApplyWindowInsetsListener(this)
     }
 
+    private fun handleHostFragmentOnDestroy() {
+        restoreBackgroundFocus()
+    }
+
     private fun onSheetStateChanged(newState: Int) {
         val isStable = SheetUtils.isStateStable(newState)
 
@@ -114,6 +131,32 @@ class SheetDelegate(
         }
     }
 
+    private fun preserveBackgroundFocus() {
+        val activity = screen.reactContext.currentActivity ?: return
+
+        activity.currentFocus?.let { focusedView ->
+            activity.window?.decorView?.let { decorView ->
+                if (isSoftKeyboardVisibleOrNull(decorView) == true) {
+                    viewToRestoreFocus = focusedView
+                }
+            }
+
+            // Note: There's no good reason that Screen should be direct target for focus, we're rather
+            // prefer its children to gain it.
+            screen.descendantFocusability = ViewGroup.FOCUS_AFTER_DESCENDANTS
+            screen.requestFocus()
+            inputMethodManager?.hideSoftInputFromWindow(focusedView.windowToken, 0)
+        }
+    }
+
+    private fun restoreBackgroundFocus() {
+        viewToRestoreFocus?.let { view ->
+            view.requestFocus()
+            inputMethodManager?.showSoftInput(view, 0)
+        }
+        viewToRestoreFocus = null
+    }
+
     internal fun updateBottomSheetMetrics(behavior: BottomSheetBehavior<Screen>) {
         val containerHeight = tryResolveMaxFormSheetHeight()
         check(containerHeight != null) {
@@ -555,9 +598,7 @@ class SheetDelegate(
                     // I want to be polite here and request focus before dismissing the keyboard,
                     // however even if it fails I want to try to hide the keyboard. This sometimes works...
                     bottomSheet.requestFocus()
-                    val imm =
-                        screen.reactContext.getSystemService(InputMethodManager::class.java)
-                    imm.hideSoftInputFromWindow(bottomSheet.windowToken, 0)
+                    inputMethodManager?.hideSoftInputFromWindow(bottomSheet.windowToken, 0)
                 }
             }
         }
diff --git a/android/src/main/java/com/swmansion/rnscreens/utils/DecorViewInsetsUtils.kt b/android/src/main/java/com/swmansion/rnscreens/utils/DecorViewInsetsUtils.kt
@@ -21,3 +21,12 @@ private fun getTopInset(insetsCompat: WindowInsetsCompat): Int =
         .getInsets(
             WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(),
         ).top
+
+internal fun isSoftKeyboardVisibleOrNull(decorView: View): Boolean? {
+    val insetsCompat = ViewCompat.getRootWindowInsets(decorView) ?: return null
+
+    return insetsCompat
+        .isVisible(
+            WindowInsetsCompat.Type.ime(),
+        )
+}
diff --git a/apps/src/tests/issue-tests/Test3617.tsx b/apps/src/tests/issue-tests/Test3617.tsx
@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { Button, View, Text, StyleSheet, TextInput } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import Colors from '../../shared/styling/Colors';
+
+type StackParamList = {
+  Home: undefined;
+  FormSheet: undefined;
+  FormSheetWithAutoFocus: undefined;
+  FormSheetWoFocusable: undefined;
+};
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const HomeScreen = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Home Screen</Text>
+      <Text style={styles.text}>Is focused? {isFocused ? 'YES' : 'NO'}</Text>
+      <TextInput
+        style={[
+          styles.input,
+          isFocused
+            ? { borderColor: Colors.GreenDark100 }
+            : { borderColor: Colors.RedDark100 },
+        ]}
+        placeholder="Enter text (no sheet)"
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+      <Button
+        title="Open Form Sheet"
+        onPress={() => navigation.navigate('FormSheet')}
+      />
+      <Button
+        title="Open Form Sheet (w/ autoFocus)"
+        onPress={() => navigation.navigate('FormSheetWithAutoFocus')}
+      />
+      <Button
+        title="Open Form Sheet (w/o focusable)"
+        onPress={() => navigation.navigate('FormSheetWoFocusable')}
+      />
+    </View>
+  );
+};
+
+const FormSheetScreen = () => {
+  return (
+    <View style={styles.formSheetContainer}>
+      <View style={styles.rectangle} />
+      <TextInput style={styles.input} placeholder="Enter text in FormSheet" />
+    </View>
+  );
+};
+
+const FormSheetScreenWithAutoFocus = () => {
+  return (
+    <View style={styles.formSheetContainer}>
+      <View style={styles.rectangle} />
+      <TextInput
+        style={styles.input}
+        autoFocus
+        placeholder="Enter text in FormSheet"
+      />
+    </View>
+  );
+};
+
+function FormSheetWoFocusable() {
+  return (
+    <View style={styles.formSheetContainer} focusable={false}>
+      <View style={styles.rectangle} focusable={false} />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen
+          name="FormSheet"
+          component={FormSheetScreen}
+          options={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: 'fitToContents',
+            headerShown: false,
+            contentStyle: {
+              backgroundColor: Colors.YellowLight40,
+            },
+          }}
+        />
+        <Stack.Screen
+          name="FormSheetWithAutoFocus"
+          component={FormSheetScreenWithAutoFocus}
+          options={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: 'fitToContents',
+            headerShown: false,
+            contentStyle: {
+              backgroundColor: Colors.YellowLight40,
+            },
+          }}
+        />
+        <Stack.Screen
+          name="FormSheetWoFocusable"
+          component={FormSheetWoFocusable}
+          options={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: 'fitToContents',
+            headerShown: false,
+            contentStyle: {
+              backgroundColor: Colors.YellowLight40,
+            },
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    alignItems: 'center',
+    padding: 20,
+    gap: 16,
+  },
+  title: {
+    fontSize: 24,
+  },
+  formSheetContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+    gap: 20,
+  },
+  text: {
+    fontSize: 16,
+  },
+  rectangle: {
+    width: '100%',
+    backgroundColor: Colors.NavyLight80,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    width: '80%',
+    height: 50,
+    borderWidth: 2,
+  },
+});
diff --git a/apps/src/tests/issue-tests/index.ts b/apps/src/tests/issue-tests/index.ts
@@ -180,6 +180,7 @@ export { default as Test3564 } from './Test3564';
 export { default as Test3566 } from './Test3566';
 export { default as Test3576 } from './Test3576';
 export { default as Test3596 } from './Test3596';
+export { default as Test3617 } from './Test3617';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 // The following test was meant to demo the "go back" gesture using Reanimated
 // but the associated PR in react-navigation is currently put on hold
