Skip to content

Commit

Permalink
fix: missing onScroll event in KeyboardAwareScrollView (#408)
Browse files Browse the repository at this point in the history
## 📜 Description

Fixed firing of `onScroll` in `KeyboardAwareScrollView`

## 💡 Motivation and Context

Initially it was fixed in
#339
and I'm sure it was working 😅

However it looks like in current setup (RN 0.73, REA 3.8.0) such way is
not working and `onScroll` property still gets ignored 😔

So in this PR I followed a different path: initially I wanted to fire
this handler via `runOnJS`, but we can not follow a full signature of
the method, since REA has only `nativeEvent` property (and indeed in
this case some properties would be simply missing).

The different path was to update a shared value from JS thread and call
a callback as usually - it fixes a problem in old code and in a new, so
for now this approach looks decent 👍

Let's see how it works in a wild life 👀

Also in this PR I'm changing content of `tea.yaml` - it should be done
in separate PR, but I don't want to open another PR just to fix quotes,
so decided to merge everything in a single one 🙈

Closes
#337

## 📢 Changelog

### JS

- fire `onScroll` in callback;
- react on scroll position change in JS thread.

### FS (file system)

- added single quotes `'` for `tea.yaml`;

## 🤔 How Has This Been Tested?

Tested manually on iPhone 15 Pro.

## 📸 Screenshots (if appropriate):

<img width="474" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/11896adc-3fdd-4ab3-acf9-9f32f27e787c">

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko committed Apr 5, 2024
1 parent 94f45ed commit e0a6c09
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 10 deletions.
2 changes: 2 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,5 @@ FabricExample/ios/build/
FabricExample/src/**/Lottie/*.json

android/build/

tea.yaml
17 changes: 8 additions & 9 deletions src/components/KeyboardAwareScrollView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Reanimated, {
scrollTo,
useAnimatedReaction,
useAnimatedRef,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
Expand Down Expand Up @@ -83,6 +82,7 @@ const KeyboardAwareScrollView = forwardRef<
bottomOffset = 0,
disableScrollOnKeyboardHide = false,
enabled = true,
onScroll: onScrollProps,
...rest
},
ref,
Expand All @@ -102,13 +102,13 @@ const KeyboardAwareScrollView = forwardRef<

const { height } = useWindowDimensions();

const onScroll = useAnimatedScrollHandler(
{
onScroll: (e) => {
position.value = e.contentOffset.y;
},
const onScroll = useCallback<NonNullable<ScrollViewProps["onScroll"]>>(
(event) => {
position.value = event.nativeEvent.contentOffset.y;

onScrollProps?.(event);
},
[],
[onScrollProps],
);

const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
Expand Down Expand Up @@ -320,8 +320,7 @@ const KeyboardAwareScrollView = forwardRef<
ref={onRef}
{...rest}
onLayout={onScrollViewLayout}
// @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
onScrollReanimated={onScroll}
onScroll={onScroll}
scrollEventThrottle={16}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion tea.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
---
version: 1.0.0
codeOwners:
- "0xeeF83F6BC5a2bC68A29F6e075e7780Aaa928FD5A"
- '0xeeF83F6BC5a2bC68A29F6e075e7780Aaa928FD5A'
quorum: 1

0 comments on commit e0a6c09

Please sign in to comment.