Issues with behavior set to padding on Android devices

[wongk]

Describe the bug
It is possible to get double padding inserted into the view on Android devices, when the behavior is set to padding.

Code snippet

 <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={offsetFromTop + topInset}>

Repo for reproducing

To Reproduce
In our app, with the virtual keyboard open, a button is pressed that causes a re-render of the parent component containing the keyboard avoiding view. The content within the keyboard avoiding view is also updated. In this case, the padding is inserted a second time, which shoves all the the content within the keyboard avoiding view to the top of the screen.

Expected behavior
The padding should not be inserted a second time.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: macOS 15.3.1
• Device: Pixel 6 Pro
• OS: Android 15
• RN version: 0.76.7
• RN architecture: old
• JS engine: Hermes
• Library version: 1.16.7

Additional context

[kirillzyusko]

@wongk may I ask you to attach a video how this process looks in reality? From a single screenshot it's hard to tell what is going wrong 😅

And is it possible to prepare a minimal reproduction example? Basically it's very strange, that padding gets added two times 🤔

[wongk]

Screen.Recording.2025-03-11.at.1.56.53.PM.mov

[wongk]

@kirillzyusko in the video you can see a couple of issues. When the keyboard is opened at first on the empty state, everything looks good. When the keyboard is opened on an active chat, there is extra padding between the keyboard and the content. And then when clicking the "New Chat" button, the reported issue reproduces. This is all working as expected on iOS.

I added the red border around the chat area for debugging. This is on the KeyboardAvoidingView.

I'd love to help out with a reproducible example, but at the moment I am trying to get through release blockers to get a release out the door.

[kirillzyusko]

@wongk which windowSoftInputMode is declared in AndroidManifest.xml (softwareKeyboardLayoutMode if you use Expo)?

[wongk]

adjustResize

[kirillzyusko]

The strange thing here:

Is that bottom-tabs gets resized too, so it looks like an entire screen is wrapped in KeyboardAvoidingView so that effect gets applied twice 🤔

Really would like to have a look on a source code to help you here! 👀

[wongk]

Yeah that is interesting. I also managed to grab this frame, which shows that the KeyboardAvoidingView has been resized (the red border is visible on the bottom).

[wongk]

OK, I used a layout event handler and confirmed that the parent view of the KeyboardAvoidingView is actually being resized, which means the root of this issue lies elsewhere. A new route is being pushed when this button is pressed, which leads me to believe this is maybe an issue with react navigation or react native screen or something. Thanks for taking a look.

[wongk]

@kirillzyusko out of curiosity, how does react-native-keyboard-controller stop the app window from being resized when the KB opens? I am still able to reliably get the app into such a state where the app window will resize when the KB opens. It only does this after following very specific steps, though. is it possible that whatever mechanism is used to prevent this resizing could be interfered with somehow?

[wongk]

Wow. After 2 full days of debugging, I tracked down the root cause of this issue. The use of useAnimatedKeyboard from reanimated was conflicting with the keyboard controller. Switching to useKeyboardAnimation cleared up all of my issues.

[kirillzyusko]

Wow. After 2 full days of debugging, I tracked down the root cause of this issue. The use of useAnimatedKeyboard from reanimated was conflicting with the keyboard controller. Switching to useKeyboardAnimation cleared up all of my issues.

Ah, glad you figured it out! I wrote about it here but glad you managed to find a root cause!

[kirillzyusko]

out of curiosity, how does react-native-keyboard-controller stop the app window from being resized when the KB opens? I am still able to reliably get the app into such a state where the app window will resize when the KB opens. It only does this after following very specific steps, though. is it possible that whatever mechanism is used to prevent this resizing could be interfered with somehow?

Basically it's default Android behavior if you are using edge-to-edge and adjustResize 🙃 But when 2 hooks are used from different packages they are conflict with each other in native code and results can be unpredictable 🤷‍♂