From 2045eff9ce42c912aa7df37254a84b951a047b52 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 8 Jul 2024 14:14:25 +0200 Subject: [PATCH 1/2] feat: allow js and reanimated scroll handlers for `KeyboardAwareScrollView` --- .../KeyboardAwareScrollView/index.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/src/components/KeyboardAwareScrollView/index.tsx b/src/components/KeyboardAwareScrollView/index.tsx index d24157446f..b406bea3cd 100644 --- a/src/components/KeyboardAwareScrollView/index.tsx +++ b/src/components/KeyboardAwareScrollView/index.tsx @@ -2,12 +2,11 @@ import React, { forwardRef, useCallback, useMemo } from "react"; import { findNodeHandle } from "react-native"; import Reanimated, { interpolate, - runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef, - useAnimatedScrollHandler, useAnimatedStyle, + useScrollViewOffset, useSharedValue, } from "react-native-reanimated"; @@ -87,7 +86,6 @@ const KeyboardAwareScrollView = forwardRef< bottomOffset = 0, disableScrollOnKeyboardHide = false, enabled = true, - onScroll: onScrollProps, extraKeyboardSpace = 0, ...rest }, @@ -96,7 +94,7 @@ const KeyboardAwareScrollView = forwardRef< const scrollViewAnimatedRef = useAnimatedRef(); const scrollViewTarget = useSharedValue(null); const scrollPosition = useSharedValue(0); - const position = useSharedValue(0); + const position = useScrollViewOffset(scrollViewAnimatedRef); const currentKeyboardFrameHeight = useSharedValue(0); const keyboardHeight = useSharedValue(0); const keyboardWillAppear = useSharedValue(false); @@ -108,20 +106,6 @@ const KeyboardAwareScrollView = forwardRef< const { height } = useWindowDimensions(); - const onScroll = useAnimatedScrollHandler( - { - onScroll: (event) => { - position.value = event.contentOffset.y; - - if (onScrollProps) { - // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/issues/6204 - runOnJS(onScrollProps)({ nativeEvent: event }); - } - }, - }, - [onScrollProps], - ); - const onRef = useCallback((assignedRef: Reanimated.ScrollView) => { if (typeof ref === "function") { ref(assignedRef); @@ -344,7 +328,6 @@ const KeyboardAwareScrollView = forwardRef< ref={onRef} {...rest} onLayout={onScrollViewLayout} - onScroll={onScroll} scrollEventThrottle={16} > {children} From ab25c093e7b48dd6fa99d5344e7afd64e7c0de90 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Tue, 9 Jul 2024 10:52:19 +0200 Subject: [PATCH 2/2] docs: mention minimal required `react-native-reanimated` version --- docs/docs/guides/compatibility.md | 12 +++++++++++- .../version-1.0.0/guides/compatibility.md | 8 +++++++- .../version-1.10.0/guides/compatibility.md | 8 +++++++- .../version-1.11.0/guides/compatibility.md | 8 +++++++- .../version-1.12.0/guides/compatibility.md | 8 +++++++- .../version-1.4.0/guides/compatibility.md | 8 +++++++- .../version-1.5.0/guides/compatibility.md | 8 +++++++- .../version-1.6.0/guides/compatibility.md | 8 +++++++- .../version-1.7.0/guides/compatibility.md | 8 +++++++- .../version-1.8.0/guides/compatibility.md | 8 +++++++- .../version-1.9.0/guides/compatibility.md | 8 +++++++- package.json | 2 +- 12 files changed, 82 insertions(+), 12 deletions(-) diff --git a/docs/docs/guides/compatibility.md b/docs/docs/guides/compatibility.md index 1fcd4378e3..31e877c50f 100644 --- a/docs/docs/guides/compatibility.md +++ b/docs/docs/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -25,6 +25,10 @@ Below you can find a table with supported versions: | library version | react-native version | | --------------- | -------------------- | +| 1.12.0+ | 0.74.0+ | +| 1.10.0+ | 0.73.0+ | +| 1.6.0+ | 0.72.0+ | +| 1.5.0+ | 0.71.0+ | | 1.3.0+ | 0.70.0+ | | 1.2.0+ | 0.69.0+ | @@ -37,6 +41,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.11.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.0.0/guides/compatibility.md b/docs/versioned_docs/version-1.0.0/guides/compatibility.md index 06f963666c..48ec0d32d1 100644 --- a/docs/versioned_docs/version-1.0.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.0.0/guides/compatibility.md @@ -4,7 +4,7 @@ sidebar_position: 3 # Compatibility -## React Native +## `react-native` Starting from `1.2.0` this library adds support for a new architecture called `Fabric`. Since a new architecture is still in adoption stage and it changes some APIs over time - it's highly recommended to use versions which are compatible and were intensively tested against specific `react-native` versions. @@ -21,6 +21,12 @@ For `Paper` (old) architecture there is no any restrictions. If you found an inc ::: +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.10.0/guides/compatibility.md b/docs/versioned_docs/version-1.10.0/guides/compatibility.md index 9926308e92..8eeeaf11f0 100644 --- a/docs/versioned_docs/version-1.10.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.10.0/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -40,6 +40,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.11.0/guides/compatibility.md b/docs/versioned_docs/version-1.11.0/guides/compatibility.md index 9926308e92..8eeeaf11f0 100644 --- a/docs/versioned_docs/version-1.11.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.11.0/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -40,6 +40,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.12.0/guides/compatibility.md b/docs/versioned_docs/version-1.12.0/guides/compatibility.md index f2fa1cc308..31e877c50f 100644 --- a/docs/versioned_docs/version-1.12.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.12.0/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -41,6 +41,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.11.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.4.0/guides/compatibility.md b/docs/versioned_docs/version-1.4.0/guides/compatibility.md index 06f963666c..48ec0d32d1 100644 --- a/docs/versioned_docs/version-1.4.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.4.0/guides/compatibility.md @@ -4,7 +4,7 @@ sidebar_position: 3 # Compatibility -## React Native +## `react-native` Starting from `1.2.0` this library adds support for a new architecture called `Fabric`. Since a new architecture is still in adoption stage and it changes some APIs over time - it's highly recommended to use versions which are compatible and were intensively tested against specific `react-native` versions. @@ -21,6 +21,12 @@ For `Paper` (old) architecture there is no any restrictions. If you found an inc ::: +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.5.0/guides/compatibility.md b/docs/versioned_docs/version-1.5.0/guides/compatibility.md index d75ca13422..bbd71886e8 100644 --- a/docs/versioned_docs/version-1.5.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.5.0/guides/compatibility.md @@ -7,7 +7,7 @@ keywords: # Compatibility -## React Native +## `react-native` Starting from `1.2.0` this library adds support for a new architecture called `Fabric`. Since a new architecture is still in adoption stage and it changes some APIs over time - it's highly recommended to use versions which are compatible and were intensively tested against specific `react-native` versions. @@ -25,6 +25,12 @@ For `Paper` (old) architecture there is no any restrictions. If you found an inc ::: +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.6.0/guides/compatibility.md b/docs/versioned_docs/version-1.6.0/guides/compatibility.md index 19dd15ac3b..72670f2715 100644 --- a/docs/versioned_docs/version-1.6.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.6.0/guides/compatibility.md @@ -7,7 +7,7 @@ keywords: # Compatibility -## React Native +## `react-native` Starting from `1.2.0` this library adds support for a new architecture called `Fabric`. Since a new architecture is still in adoption stage and it changes some APIs over time - it's highly recommended to use versions which are compatible and were intensively tested against specific `react-native` versions. @@ -26,6 +26,12 @@ For `Paper` (old) architecture there is no any restrictions. If you found an inc ::: +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.7.0/guides/compatibility.md b/docs/versioned_docs/version-1.7.0/guides/compatibility.md index c668aef45b..10e56ab780 100644 --- a/docs/versioned_docs/version-1.7.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.7.0/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -39,6 +39,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.8.0/guides/compatibility.md b/docs/versioned_docs/version-1.8.0/guides/compatibility.md index c668aef45b..10e56ab780 100644 --- a/docs/versioned_docs/version-1.8.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.8.0/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -39,6 +39,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/docs/versioned_docs/version-1.9.0/guides/compatibility.md b/docs/versioned_docs/version-1.9.0/guides/compatibility.md index c668aef45b..10e56ab780 100644 --- a/docs/versioned_docs/version-1.9.0/guides/compatibility.md +++ b/docs/versioned_docs/version-1.9.0/guides/compatibility.md @@ -13,7 +13,7 @@ If you found an incompatibility or conflict with other open source libraries - d ::: -## React Native +## `react-native` Below you can find an information about compatibility with `react-native` package per different architectures. @@ -39,6 +39,12 @@ This library supports as minimal `react-native` version as possible. However it | 1.7.0+ | 0.65.0+ | | 1.0.0+ | 0.62.0+ | +## `react-native-reanimated` + +This library is heavily relies on `react-native-reanimated` primitives to bring advanced concepts for keyboard handling. + +The minimal supported version of `react-native-reanimated` is `2.3.0`. + ## Third-party libraries compatibility Since this library uses `WindowInsetsCompat` API on Android it may conflict with other libraries if they are using deprecated API (if they are changing `window` flags directly). diff --git a/package.json b/package.json index f4a9d9cbe2..f04190618b 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "peerDependencies": { "react": "*", "react-native": "*", - "react-native-reanimated": ">=2.3.0" + "react-native-reanimated": ">=2.11.0" }, "jest": { "preset": "react-native",