Skip to content

fix: KeyboardAvoidingView + autoFocus + native-stack#880

Merged
kirillzyusko merged 1 commit intomainfrom
fix/keyboard-avoiding-view-auto-focus
Mar 29, 2025
Merged

fix: KeyboardAvoidingView + autoFocus + native-stack#880
kirillzyusko merged 1 commit intomainfrom
fix/keyboard-avoiding-view-auto-focus

Conversation

@kirillzyusko
Copy link
Copy Markdown
Owner

@kirillzyusko kirillzyusko commented Mar 25, 2025

📜 Description

Fixed incorrect KeyboardAvoidingView layout when it's used together with input (autoFocus) in native-stack.

💡 Motivation and Context

The problem happens because of this:

The problem here is that onLayout get triggered two times (with 852 and 722 values). The correct value is 722 (because view doesn't occupy all screen, the header above takes ~80px).

The problem is that when onLayout with 722 gets triggered, then keyboard is already shown and we don't take this event into consideration, because that event may come from the fact, that layout of the view was changed because of KeyboardAvoidingView transformation

I added condition initialFrame.value === null in the beginning of implementation (we also discussed potential but in https://github.com/kirillzyusko/react-native-keyboard-controller/pull/229/files#r1318714840)

After that I changed condition to keyboard.isClosed.value in #239

And after ~6 months I added initialFrame.value === null again in #391

So the current condition looks like "update layout only when keyboard closed or if layout is unknown". While it works it may produce issues as in the description above. (i. e. if keyboard opens, and first layout is incorrect, then resize will be incorrect too).

I though a lot on how to fix it, and realized, that layout actually is not changing if we are using padding, bottom or translate-with-padding modes. So technically that condition was added only for behavior==="height". After thinking a while I decided, that the best fix here at the moment will be to add additional behavior !== "height" condition. It fixes the problem and theoretically it shouldn't have any negative impact for all 3 modes, as they do not change layout when keyboard is visible.

If that condition indeed works and I will not receive new bug reports, then we can modify the condition for height as well and remove keyboard.isClosed.value || initialFrame.value === null totally (in this case, when we receive onLayout with height mode we will have to add relativeKeyboardHeight to layout event to exclude the keyboard frame from layout event 😎).

Closes #759

📢 Changelog

JS

  • added behavior !== "height" condition to onLayout callback (to update layout whenever it's fired for all modes excluding height);

🤔 How Has This Been Tested?

  • tested in reproduction example;
  • tested example app;
  • tests passed in CI.

In manual testing I used

📸 Screenshots (if appropriate):

Before After RN
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-03-28.at.10.41.12.mp4
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-03-28.at.10.38.47.mp4
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-03-28.at.10.40.02.mp4

📝 Checklist

  • CI successfully passed
  • I added new mocks and corresponding unit-tests if library API was changed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 25, 2025

📊 Package size report

Current size Target Size Difference
173413 bytes 173319 bytes 94 bytes 📈

@kirillzyusko kirillzyusko force-pushed the fix/keyboard-avoiding-view-auto-focus branch from 7759193 to 12b7471 Compare March 27, 2025 09:38
@kirillzyusko kirillzyusko self-assigned this Mar 28, 2025
@kirillzyusko kirillzyusko added 🐛 bug Something isn't working KeyboardAvoidingView 🧪 Anything related to KeyboardAvoidingView component labels Mar 28, 2025
@kirillzyusko kirillzyusko marked this pull request as ready for review March 28, 2025 09:42
@kirillzyusko kirillzyusko merged commit d379ff5 into main Mar 29, 2025
12 checks passed
@kirillzyusko kirillzyusko deleted the fix/keyboard-avoiding-view-auto-focus branch March 29, 2025 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working KeyboardAvoidingView 🧪 Anything related to KeyboardAvoidingView component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bad sizing calculations when navigation to a screen with a TextInput with autoFocus enabled

1 participant