Skip to content

Commit e0a6c09

Browse files
authored
fix: missing onScroll event in KeyboardAwareScrollView (#408)
## 📜 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
1 parent 94f45ed commit e0a6c09

File tree

3 files changed

+11
-10
lines changed

3 files changed

+11
-10
lines changed

.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,5 @@ FabricExample/ios/build/
1616
FabricExample/src/**/Lottie/*.json
1717

1818
android/build/
19+
20+
tea.yaml

src/components/KeyboardAwareScrollView/index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Reanimated, {
55
scrollTo,
66
useAnimatedReaction,
77
useAnimatedRef,
8-
useAnimatedScrollHandler,
98
useAnimatedStyle,
109
useSharedValue,
1110
} from "react-native-reanimated";
@@ -83,6 +82,7 @@ const KeyboardAwareScrollView = forwardRef<
8382
bottomOffset = 0,
8483
disableScrollOnKeyboardHide = false,
8584
enabled = true,
85+
onScroll: onScrollProps,
8686
...rest
8787
},
8888
ref,
@@ -102,13 +102,13 @@ const KeyboardAwareScrollView = forwardRef<
102102

103103
const { height } = useWindowDimensions();
104104

105-
const onScroll = useAnimatedScrollHandler(
106-
{
107-
onScroll: (e) => {
108-
position.value = e.contentOffset.y;
109-
},
105+
const onScroll = useCallback<NonNullable<ScrollViewProps["onScroll"]>>(
106+
(event) => {
107+
position.value = event.nativeEvent.contentOffset.y;
108+
109+
onScrollProps?.(event);
110110
},
111-
[],
111+
[onScrollProps],
112112
);
113113

114114
const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
@@ -320,8 +320,7 @@ const KeyboardAwareScrollView = forwardRef<
320320
ref={onRef}
321321
{...rest}
322322
onLayout={onScrollViewLayout}
323-
// @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
324-
onScrollReanimated={onScroll}
323+
onScroll={onScroll}
325324
scrollEventThrottle={16}
326325
>
327326
{children}

tea.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
---
33
version: 1.0.0
44
codeOwners:
5-
- "0xeeF83F6BC5a2bC68A29F6e075e7780Aaa928FD5A"
5+
- '0xeeF83F6BC5a2bC68A29F6e075e7780Aaa928FD5A'
66
quorum: 1

0 commit comments

Comments
 (0)