From e031165e71821883b5d7e975c475f8f8f14d975f Mon Sep 17 00:00:00 2001 From: lpatrun Date: Wed, 30 Oct 2024 10:02:26 +0100 Subject: [PATCH 1/4] fix: inverted list padding --- .../KeyboardAwareScrollView/index.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/KeyboardAwareScrollView/index.tsx b/src/components/KeyboardAwareScrollView/index.tsx index bcdc5207f..3b1a93fe2 100644 --- a/src/components/KeyboardAwareScrollView/index.tsx +++ b/src/components/KeyboardAwareScrollView/index.tsx @@ -38,6 +38,10 @@ export type KeyboardAwareScrollViewProps = { enabled?: boolean; /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */ extraKeyboardSpace?: number; + /** Used if inverted Flatlist/Flashlist is being used */ + inverted?: boolean; + /** Ajdusting the offset for the content when keyboard is shown on inverted Flatlist/Flashlist on screen with BottomTab navigation */ + tabBarHeight?: number; /** Custom component for `ScrollView`. Default is `ScrollView` */ ScrollViewComponent?: React.ComponentType; } & ScrollViewProps; @@ -94,6 +98,8 @@ const KeyboardAwareScrollView = forwardRef< extraKeyboardSpace = 0, ScrollViewComponent = Reanimated.ScrollView, snapToOffsets, + inverted = false, + tabBarHeight = 0, ...rest }, ref, @@ -349,8 +355,9 @@ const KeyboardAwareScrollView = forwardRef< ); const view = useAnimatedStyle( - () => - enabled + () => { + const invertedOffset = inverted ? -tabBarHeight : 0; + return enabled ? { // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused) // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding @@ -358,9 +365,10 @@ const KeyboardAwareScrollView = forwardRef< // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout // re-calculation on every animation frame and it helps to achieve smooth animation. // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342 - paddingBottom: currentKeyboardFrameHeight.value + 1, + paddingBottom: currentKeyboardFrameHeight.value + invertedOffset + 1, } - : {}, + : {} + }, [enabled], ); @@ -371,8 +379,9 @@ const KeyboardAwareScrollView = forwardRef< scrollEventThrottle={16} onLayout={onScrollViewLayout} > + {inverted ? : null} {children} - + {!inverted ? : null} ); }, From c38af54e23fa740273becce3ec04a9ea1cc6afee Mon Sep 17 00:00:00 2001 From: lpatrun Date: Fri, 13 Dec 2024 13:52:27 +0100 Subject: [PATCH 2/4] fix: suggestions --- src/components/KeyboardAwareScrollView/index.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/KeyboardAwareScrollView/index.tsx b/src/components/KeyboardAwareScrollView/index.tsx index 3b1a93fe2..991e3ba3f 100644 --- a/src/components/KeyboardAwareScrollView/index.tsx +++ b/src/components/KeyboardAwareScrollView/index.tsx @@ -38,10 +38,6 @@ export type KeyboardAwareScrollViewProps = { enabled?: boolean; /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */ extraKeyboardSpace?: number; - /** Used if inverted Flatlist/Flashlist is being used */ - inverted?: boolean; - /** Ajdusting the offset for the content when keyboard is shown on inverted Flatlist/Flashlist on screen with BottomTab navigation */ - tabBarHeight?: number; /** Custom component for `ScrollView`. Default is `ScrollView` */ ScrollViewComponent?: React.ComponentType; } & ScrollViewProps; @@ -98,8 +94,6 @@ const KeyboardAwareScrollView = forwardRef< extraKeyboardSpace = 0, ScrollViewComponent = Reanimated.ScrollView, snapToOffsets, - inverted = false, - tabBarHeight = 0, ...rest }, ref, @@ -119,6 +113,9 @@ const KeyboardAwareScrollView = forwardRef< const { height } = useWindowDimensions(); + const restStyle = (rest?.style?.[0] || {}) + const inverted = "transform" in restStyle ? restStyle.transform[0]?.scale === -1 : false + const onRef = useCallback((assignedRef: Reanimated.ScrollView) => { if (typeof ref === "function") { ref(assignedRef); @@ -356,7 +353,7 @@ const KeyboardAwareScrollView = forwardRef< const view = useAnimatedStyle( () => { - const invertedOffset = inverted ? -tabBarHeight : 0; + const invertedOffset = inverted ? -extraKeyboardSpace : 0; return enabled ? { // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused) From ec98ab2e1b93ba24ab963b0b9f7afdfa6f078771 Mon Sep 17 00:00:00 2001 From: lpatrun Date: Sun, 15 Dec 2024 08:17:30 +0100 Subject: [PATCH 3/4] fix: rest style --- src/components/KeyboardAwareScrollView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/KeyboardAwareScrollView/index.tsx b/src/components/KeyboardAwareScrollView/index.tsx index 991e3ba3f..166bea858 100644 --- a/src/components/KeyboardAwareScrollView/index.tsx +++ b/src/components/KeyboardAwareScrollView/index.tsx @@ -113,7 +113,7 @@ const KeyboardAwareScrollView = forwardRef< const { height } = useWindowDimensions(); - const restStyle = (rest?.style?.[0] || {}) + const restStyle = (rest?.style && rest?.style?.[0] || {}) const inverted = "transform" in restStyle ? restStyle.transform[0]?.scale === -1 : false const onRef = useCallback((assignedRef: Reanimated.ScrollView) => { From 74e5a63d25f34201ec1e53d449f750b2cc2e281b Mon Sep 17 00:00:00 2001 From: lpatrun Date: Sun, 15 Dec 2024 08:31:21 +0100 Subject: [PATCH 4/4] fix: typing for rest styles --- .../KeyboardAwareScrollView/index.tsx | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/KeyboardAwareScrollView/index.tsx b/src/components/KeyboardAwareScrollView/index.tsx index 166bea858..f9a48f834 100644 --- a/src/components/KeyboardAwareScrollView/index.tsx +++ b/src/components/KeyboardAwareScrollView/index.tsx @@ -113,8 +113,11 @@ const KeyboardAwareScrollView = forwardRef< const { height } = useWindowDimensions(); - const restStyle = (rest?.style && rest?.style?.[0] || {}) - const inverted = "transform" in restStyle ? restStyle.transform[0]?.scale === -1 : false + const restStyle = (Array.isArray(rest.style) && rest.style?.[0]) || {}; + const scaleStyle = + "transform" in restStyle && + (restStyle?.transform?.[0] as { scale?: number }); + const inverted = (scaleStyle && scaleStyle?.scale === -1) || false; const onRef = useCallback((assignedRef: Reanimated.ScrollView) => { if (typeof ref === "function") { @@ -351,23 +354,22 @@ const KeyboardAwareScrollView = forwardRef< [], ); - const view = useAnimatedStyle( - () => { - const invertedOffset = inverted ? -extraKeyboardSpace : 0; - return enabled - ? { - // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused) - // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding - // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation - // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout - // re-calculation on every animation frame and it helps to achieve smooth animation. - // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342 - paddingBottom: currentKeyboardFrameHeight.value + invertedOffset + 1, - } - : {} - }, - [enabled], - ); + const view = useAnimatedStyle(() => { + const invertedOffset = inverted ? -extraKeyboardSpace : 0; + + return enabled + ? { + // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused) + // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding + // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation + // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout + // re-calculation on every animation frame and it helps to achieve smooth animation. + // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342 + paddingBottom: + currentKeyboardFrameHeight.value + invertedOffset + 1, + } + : {}; + }, [enabled]); return (