I am encountering a bug where the keyboard continuously opens and closes (shakes) when focusing on input fields within a WebView in my React Native app. This behavior only occurs on the Samsung Galaxy S23 Ultra running Android 13. The issue is not present on other Android devices or iOS.
When tapping on an input field, the keyboard starts to open but immediately closes, and this loop repeats, causing a noticeable "shaking" effect. This makes it impossible to type into the input field.
Affected Device:
Device: Samsung Galaxy S23 Ultra
Android Version: 13
Other Devices Tested: Works fine on various Android devices and iOS.
Versions:
react-native-webview: "^13.12.2"
React Native: "0.71.19"
Code Example:
<Container>
<WebView
ref={(webview) => {
this.webview = webview;
}}
source={{
uri: 'https://www.google.com/'
}}
injectedJavaScript={this.injectjs()}
javaScriptEnabled
onMessage={(e) => this.onMessage(e)}
startInLoadingState
useWebKit={true}
style={{ marginTop: getStatusBarHeight() }}
/>
</Container>
Steps to Reproduce:
Load a URL containing input fields inside a WebView component on a Samsung Galaxy S23 Ultra running Android 13.
Tap on the input field to focus and bring up the keyboard.
Observe the keyboard shaking (it rapidly opens and closes) when focusing on the input field.
Expected Behavior:
The keyboard should open smoothly and stay visible while the input field is focused, allowing users to type without interruption.
Actual Behavior:
The keyboard keeps opening and closing, creating a shaking effect that prevents text input.
Related Issues:
This bug seems related to the following open issues, but my case appears to be specific to the Samsung Galaxy S23 & S24 Ultra:
Additional Context:
This issue only affects this specific device and Android version. The WebView works as expected on other Android devices and iOS. Any insights or recommendations would be greatly appreciated!
Attempts to Fix:
I’ve tried the following solutions, but none have resolved the issue:
Adjusting windowSoftInputMode in AndroidManifest.xml to both adjustResize and adjustPan.
Disabling scrolling in the WebView (scrollEnabled={false}).
None of these attempts have fixed the issue on this particular device.
Issue Resolved: Foreground Service Registration Conflict
I have resolved the issue, and it turns out it was not directly related to WebView or the keyboard.
Cause: The issue was caused by the way I registered a foreground service in my app using the @supersami/rn-foreground-service library. Initially, I registered the service in my index.js file like this:
ReactNativeForegroundService.register({ id: 144 });
This was triggering the unexpected behavior in my app, including the keyboard shaking.
Solution: I modified the foreground service registration with proper configuration as follows:
const config = { config: { alert: true, id: 144, onServiceErrorCallBack: function () { console.warn('[ReactNativeForegroundService] onServiceErrorCallBack', arguments); }, } };
ReactNativeForegroundService.register(config);
By adding an error callback and updating the registration process, the issue is now resolved, and the keyboard shaking problem has disappeared.