Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll behavior issue in KeyboardAwareScrollView after navigating between two modals #754

Open
Foxenz opened this issue Jan 13, 2025 · 1 comment
Assignees
Labels
🤖 android Android specific 🐛 bug Something isn't working KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component question You wanted to clarify something about the usage of the library or have a question about something repro provided Issue contains reproduction repository/code

Comments

@Foxenz
Copy link

Foxenz commented Jan 13, 2025

Describe the bug
I am using two modals (Modal1 and Modal2), each containing a ScrollView filled with inputs. These inputs are wrapped inside a KeyboardAwareScrollView to handle scrolling when the keyboard opens.

Issue: the scrolling behavior is no longer correct. The header of Modal1 is also affected by the scroll.

The issue only occurs when navigating between two modals, both of which use a KeyboardAwareScrollView.
I’ve confirmed that each modal works fine independently, but returning to the first modal after interacting with the second one seems to "break" the scroll behavior.

Repo for reproducing
repo link

To Reproduce
Steps to reproduce the behavior:

  1. Open Modal1 and click on an input. Scrolling works as expected: the input is properly moved above the keyboard.
  2. Navigate to Modal2 and click on an input. The behavior is also correct.
  3. Navigate back to Modal1 and click on an input again.

Expected behavior
Want to keep the same behavior as in the beginning

Screenshots

Record_2025-01-13-17-55-21.mp4

Smartphone (please complete the following information):

  • Desktop OS: [Windows 11]
  • Device: [One Plus Nord]
  • OS: [Android 12]
  • RN version: [0.76.6]
  • RN architecture: [new]
  • JS engine: [Hermes]
  • Library version: [1.15.2]
@kirillzyusko kirillzyusko added 🐛 bug Something isn't working 🤖 android Android specific KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component labels Jan 13, 2025
@kirillzyusko
Copy link
Owner

@Foxenz I think this bug happens because you have softwareKeyboardLayoutMode=pan. When KeyboardAwareScrollView gets mounted it'll change it to resize, when second KeyboardAwareScrollView gets mounted it will again change it to resize, but on unmount it restores default settings and will change it back to pan.

Can you try to specify it as resize in app.json and see if it fixes the problem?

@kirillzyusko kirillzyusko added question You wanted to clarify something about the usage of the library or have a question about something repro provided Issue contains reproduction repository/code labels Jan 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🤖 android Android specific 🐛 bug Something isn't working KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component question You wanted to clarify something about the usage of the library or have a question about something repro provided Issue contains reproduction repository/code
Projects
None yet
Development

No branches or pull requests

2 participants