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.

Sign up for GitHub

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

Jump to bottom

Check for ScrollView ancestor in KeyboardAwareScrollView #336

Closed
kirillzyusko opened this issue Jan 18, 2024 · 0 comments · Fixed by #347
Closed

Check for ScrollView ancestor in KeyboardAwareScrollView #336

kirillzyusko opened this issue Jan 18, 2024 · 0 comments · Fixed by #347
Assignees
@kirillzyusko
Labels
🐛 bug Something isn't working 📚 components Anything related to the exported components of this library KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component

Comments

@kirillzyusko
Copy link
Owner

Describe the bug

Right now if TextInput is not a child of KeyboardAwareScrollView and you touch it -> KeyboardAwareScrollView still will be scrolled 😲

Code snippet

You can use example app and just add a new TextInput below KeyboardAwareScrollView in hierarchy.

Repo for reproducing

You can use example app.

To Reproduce
Steps to reproduce the behavior:

  1. Add TextInput (shouldn't be a child of ScrollView) in KeyboardAwareScrollView example
  2. Click on new TextInput
  3. See that ScrollView gets scrolled

Expected behavior

ScrollView shouldn't be scrolled.

Smartphone (please complete the following information):

  • Desktop OS: MacOS 14.2.1
  • Device: iPhone 15 Pro
  • OS: iOS 17.2
  • RN version: 0.72.4
  • RN architecture: old
  • JS engine: Hermes
  • Library version: 1.10.2

Additional context

I think useReanimatedFocusedInput should return additional field like parentScrollViewTarget, and in maybeScroll we can compare, that parentScrollViewTarget===scrollViewTarget and do scroll only in this case.
@kirillzyusko kirillzyusko added 🐛 bug Something isn't working 📚 components Anything related to the exported components of this library labels Jan 18, 2024
@kirillzyusko kirillzyusko self-assigned this Jan 18, 2024
@kirillzyusko kirillzyusko mentioned this issue Jan 29, 2024
Merged
2 tasks
kirillzyusko added a commit that referenced this issue Feb 19, 2024
@kirillzyusko
feat: parentScrollViewTarget detection (#347)
49124f9 
## 📜 Description

Added `parentScrollViewTarget` filed to `useReanimatedFocusedInput`.

## 💡 Motivation and Context

The motivation behind this field is described in
#336

Here I'd like to focus on implementation details. The implementation is
quite straighforward - we add new field to types/specs/events and we're
ready to go. And this is true, but I'd like to give some implementation
details:
- all search of ScrollView parent I moved to extension (added new
property `parentScrollViewTarget` on iOS/Android to focused input);
- on iOS I need to check whether new arch is enabled (the same as in
#191)
to get correct tag of the view;

Also this PR optimizes performance in case if you have a lot of
`KeyboardAwareScrollView`'s in stack-navigator - before it would scroll
all these ScrollView whenever keyboard appears, but now it scrolls only
`KeyboardAwareScrollView` that is actually visible 👀

Closes
#336

## 📢 Changelog

### Docs

- added a reference about `parentScrollViewTarget`;

### JS

- added `parentScrollViewTarget` to types declaration;
- added `parentScrollViewTarget` to specs;
- started to use `parentScrollViewTarget` in `KeyboardAwareScrollView`
component;
- added a mock + updated unit tests;

### iOS

- find `parentScrollViewTarget` and send it to JS;

### Android

- find `parentScrollViewTarget` and send it to JS;

## 🤔 How Has This Been Tested?

Tested manually on:
- Pixel 7 Pro (Android 14);
- iPhone 15 Pro (iOS 17.2);

## 📸 Screenshots (if appropriate):


https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/3d0e430a-b284-4038-bddc-1e6462649f4f

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
@kirillzyusko kirillzyusko added the KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component label May 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kirillzyusko kirillzyusko

Labels
🐛 bug Something isn't working 📚 components Anything related to the exported components of this library KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: parentScrollViewTarget detection kirillzyusko/react-native-keyboard-controller
1 participant
@kirillzyusko