Description
When using react-native-keyboard-controller with react-native-edge-to-edge on Android, dismissing the keyboard (specifically by pressing "Done" on the last input in a ScrollView) causes the entire app layout to be permanently shifted upwards. This results in a large black bar at the bottom of the screen where the navigation bar should be, rendering the app unusable until it is fully restarted. The issue is highly reproducible on Samsung devices (S21 Ultra, M33) with gesture navigation enabled.
This makes the app unusable until it is fully restarted.
Environment React Native Version
System:react-native ": Not Found
Steps to Reproduce
Configure an Android app for edge-to-edge using react-native-edge-to-edge .
Set android:windowSoftInputMode="adjustResize" in AndroidManifest.xml.
Implement a screen using KeyboardAvoidingView from react-native-keyboard-controller wrapping a ScrollView with multiple TextInput components.
Run the app on a physical Samsung device (S21 Ultra, M33) with gesture navigation enabled.
Scroll to the final TextInput and focus it to open the keyboard.
Press the "Done" button on the keyboard to dismiss it.
2025-08-28.13.15.32.mp4
Expected Result: The keyboard dismisses, and the app layout returns to its normal, pre-keyboard state with correct insets.
Actual Result: The app layout is permanently shifted upwards, leaving a black void at the bottom. The app does not recover from this state.
React Component (Reproducible Example)
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
export default function BugScreen() {
Description
When using react-native-keyboard-controller with react-native-edge-to-edge on Android, dismissing the keyboard (specifically by pressing "Done" on the last input in a ScrollView) causes the entire app layout to be permanently shifted upwards. This results in a large black bar at the bottom of the screen where the navigation bar should be, rendering the app unusable until it is fully restarted. The issue is highly reproducible on Samsung devices (S21 Ultra, M33) with gesture navigation enabled.
This makes the app unusable until it is fully restarted.
Environment React Native Version
System:
OS: macOS 15.3.1
CPU: (8) arm64 Apple M2
Memory: 148.91 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: ~/.nvm/versions/node/v22.14.0/bin/node
Yarn:
version: 3.6.4
path: ~/.yarn/bin/yarn
npm:
version: 10.9.2
path: ~/.nvm/versions/node/v22.14.0/bin/npm
Watchman:
version: 2025.06.30.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /Users/mac/.gem/ruby/3.4.0/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.5
- iOS 18.5
- macOS 15.5
- tvOS 18.5
- visionOS 2.5
- watchOS 11.5
Android SDK:
API Levels:
- "33"
- "34"
- "35"
Build Tools:
- 33.0.1
- 34.0.0
- 35.0.0
- 35.0.1
System Images:
- android-29 | Google APIs ARM 64 v8a
- android-35 | Google APIs ARM 64 v8a
- android-35 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.13016713
Xcode:
version: 16.4/16F6
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.14
path: /usr/bin/javac
Ruby:
version: 3.4.2
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.2
wanted: 0.79.2
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Steps to Reproduce
2025-08-28.13.15.32.mp4
Expected Result: The keyboard dismisses, and the app layout returns to its normal, pre-keyboard state with correct insets.
Actual Result: The app layout is permanently shifted upwards, leaving a black void at the bottom. The app does not recover from this state.
React Component (Reproducible Example)
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
import { ScrollView, TextInput } from 'react-native';
export default function BugScreen() {
return (
<KeyboardAvoidingView style={{ flex: 1 }}>
<TextInput placeholder="Input 1" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 2" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 3" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 4" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 5" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 6" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 7" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 8" style={{ height: 50, margin: 10, borderWidth: 1 }} />
<TextInput placeholder="Input 9" style={{ height: 50, margin: 10, borderWidth: 1 }} />
{/* Focusing & dismissing this last input triggers the bug */}
<TextInput placeholder="Last Input" style={{ height: 50, margin: 10, borderWidth: 1 }} />
);
}