Skip to content

feat: allow js and reanimated scroll handlers for KeyboardAwareScrollView #500

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

Merged
merged 2 commits into from
Jul 10, 2024

Conversation

kirillzyusko
Copy link
Owner

@kirillzyusko kirillzyusko commented Jul 8, 2024

📜 Description

Use useScrollViewOffset hook to get a scrolled distance.

💡 Motivation and Context

useScrollViewOffset hook doesn't substitute onScroll handlers with dummyListener and thus it allows you to define your custom onScroll handler (and at the same time it can be plain js handler or reanimated one).

The new approach gives us next advantages:

  • position.value is still calculating on UI;
  • you can pass both worklet/js-handler as onScroll and it will work out of the box without additional manipulations 😎
  • we don't use @ts-expect-error and don't ship the code with potential errors;
  • we can support reanimated up to 2.11.0 (the first release that added useScrollViewOffset).

The disadvantage is that we need to bump REA from 2.3.0 to 2.11.0 (I described that in documentation). Theoretically we can create our own version of useScrollViewOffset and support REA from 2.3.0 again. But version 2.11.0 was released 2 years ago:

image

And after math calculations I figured out that dropping support from 2.3.0 to 2.11.0 we'll loose only 2% of users (overall downloads for 2.3.0-2.10.0 are ~17k with 770k of overall downloads), so I don't think it's a breaking change.

And I think this 2% of users typically don't update deps at all in the project so I think it's not critical to bump minimal supported version for v1.12.x of this library.

📢 Changelog

JS

  • use useScrollViewOffset hook to get a scrolled distance;

🤔 How Has This Been Tested?

Tested manually + on CI.

📝 Checklist

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

@kirillzyusko kirillzyusko added enhancement New feature or request KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component labels Jul 8, 2024
@kirillzyusko kirillzyusko self-assigned this Jul 8, 2024
Copy link
Contributor

github-actions bot commented Jul 8, 2024

📊 Package size report

Current size Target Size Difference
144411 bytes 145278 bytes -867 bytes 📉

@kirillzyusko
Copy link
Owner Author

Hey @mobily

Can you check if this PR fixes the problem that we've been discussing in #490 (comment)?

I think it's the best solution, because:

  • we don't use newly introduced API in reanimated (useComposedEventHandlers) and we can support pretty old reanimated versions;
  • position.value is still calculating on UI;
  • you can pass both worklet/js-handler as onScroll and it will work out of the box without additional manipulations 😎
  • we don't use @ts-expect-error and don't ship the code with potential errors

@kirillzyusko
Copy link
Owner Author

@mobily did you have a chance to check that? 👀

Copy link
Contributor

PR Preview Action v1.4.7
🚀 Deployed preview to https://kirillzyusko.github.io/react-native-keyboard-controller/pr-preview/pr-500/
on branch gh-pages at 2024-07-10 08:35 UTC

Copy link

argos-ci bot commented Jul 10, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 1 changed Jul 10, 2024, 8:36 AM

@kirillzyusko kirillzyusko added the documentation Improvements or additions to documentation label Jul 10, 2024
@kirillzyusko kirillzyusko marked this pull request as ready for review July 10, 2024 09:13
@kirillzyusko kirillzyusko merged commit 35a6e2a into main Jul 10, 2024
14 checks passed
@kirillzyusko kirillzyusko deleted the feat/allow-js-and-reanimated-scroll-handlers branch July 10, 2024 10:57
@mobily
Copy link

mobily commented Jul 10, 2024

@kirillzyusko yup, I checked it out and it works like a charm! thanks a lot! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants