diff --git a/src/components/KeyboardAwareScrollView/index.tsx b/src/components/KeyboardAwareScrollView/index.tsx index bcdc5207fe..f9a48f8342 100644 --- a/src/components/KeyboardAwareScrollView/index.tsx +++ b/src/components/KeyboardAwareScrollView/index.tsx @@ -113,6 +113,12 @@ const KeyboardAwareScrollView = forwardRef< const { height } = useWindowDimensions(); + 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") { ref(assignedRef); @@ -348,21 +354,22 @@ const KeyboardAwareScrollView = forwardRef< [], ); - const view = useAnimatedStyle( - () => - 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 + 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 ( + {inverted ? : null} {children} - + {!inverted ? : null} ); },