feat: allow js and reanimated scroll handlers for `KeyboardAwareScrollView`

kirillzyusko commented 1 month ago

📜 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:

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

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

github-actions[bot] commented 1 month ago

📊 Package size report

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

kirillzyusko commented 1 month ago

Hey @mobily

Can you check if this PR fixes the problem that we've been discussing in https://github.com/kirillzyusko/react-native-keyboard-controller/pull/490#issuecomment-2213163270?

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 commented 1 month ago

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

github-actions[bot] commented 1 month ago

PR Preview Action v1.4.7 :---: :rocket: 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

argos-ci[bot] commented 1 month ago

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

mobily commented 1 month ago

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

kirillzyusko / react-native-keyboard-controller