react-native-keyboard-controller 1.20.7 → 1.21.0-beta.0

package/src/bindings.native.ts

@@ -1,6 +1,7 @@
 import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
+  ClippingScrollViewProps,
   FocusedInputEventsModule,
   KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
@@ -71,3 +72,7 @@ export const RCTKeyboardExtender: React.FC<KeyboardExtenderProps> =
   Platform.OS === "ios"
     ? require("./specs/KeyboardExtenderNativeComponent").default
     : ({ children }: KeyboardExtenderProps) => children;
+export const ClippingScrollView: React.FC<KeyboardBackgroundViewProps> =
+  Platform.OS === "android"
+    ? require("./specs/ClippingScrollViewDecoratorViewNativeComponent").default
+    : ({ children }: ClippingScrollViewProps) => children;

package/src/bindings.ts

@@ -1,6 +1,7 @@
 import { View } from "react-native";
 
 import type {
+  ClippingScrollViewProps,
   FocusedInputEventsModule,
   KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
@@ -82,3 +83,10 @@ export const KeyboardBackgroundView =
  */
 export const RCTKeyboardExtender =
   View as unknown as React.FC<KeyboardExtenderProps>;
+/**
+ * A decorator that will clip the content of the `ScrollView`. It helps to simulate `contentInset` behavior on Android.
+ * Supports only `bottom` property (`paddingBottom` is not supported property of `ScrollView.style`).
+ * Using this component we can modify bottom inset without having a fake view.
+ */
+export const ClippingScrollView =
+  View as unknown as React.FC<ClippingScrollViewProps>;

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -12,8 +12,7 @@ import Reanimated, {
   scrollTo,
   useAnimatedReaction,
   useAnimatedRef,
-  useAnimatedStyle,
-  useScrollViewOffset,
+  useDerivedValue,
   useSharedValue,
 } from "react-native-reanimated";
 
@@ -24,10 +23,13 @@ import {
 } from "../../hooks";
 import { findNodeHandle } from "../../utils/findNodeHandle";
 import useCombinedRef from "../hooks/useCombinedRef";
+import useScrollState from "../hooks/useScrollState";
+import ScrollViewWithBottomPadding from "../ScrollViewWithBottomPadding";
 
 import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
 import { debounce, scrollDistanceWithRespectToSnapPoints } from "./utils";
 
+import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
 import type {
   LayoutChangeEvent,
   ScrollView,
@@ -49,7 +51,7 @@ export type KeyboardAwareScrollViewProps = {
   /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0`. */
   extraKeyboardSpace?: number;
   /** Custom component for `ScrollView`. Default is `ScrollView`. */
-  ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
+  ScrollViewComponent?: AnimatedScrollViewComponent;
 } & ScrollViewProps;
 export type KeyboardAwareScrollViewRef = {
   assureFocusedInputVisible: () => void;
@@ -131,7 +133,11 @@ const KeyboardAwareScrollView = forwardRef<
     const onRef = useCombinedRef(scrollViewAnimatedRef, scrollViewRef);
     const scrollViewTarget = useSharedValue<number | null>(null);
     const scrollPosition = useSharedValue(0);
-    const position = useScrollViewOffset(scrollViewAnimatedRef);
+    const {
+      offset: position,
+      layout: scrollViewLayout,
+      size: scrollViewContentSize,
+    } = useScrollState(scrollViewAnimatedRef);
     const currentKeyboardFrameHeight = useSharedValue(0);
     const keyboardHeight = useSharedValue(0);
     const keyboardWillAppear = useSharedValue(false);
@@ -142,6 +148,8 @@ const KeyboardAwareScrollView = forwardRef<
     const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
     const lastSelection =
       useSharedValue<FocusedInputSelectionChangedEvent | null>(null);
+    const ghostViewSpace = useSharedValue(-1);
+    const pendingSelectionForFocus = useSharedValue(false);
 
     const { height } = useWindowDimensions();
 
@@ -213,6 +221,30 @@ const KeyboardAwareScrollView = forwardRef<
       },
       [bottomOffset, enabled, height, snapToOffsets],
     );
+    const removeGhostPadding = useCallback((e: number) => {
+      "worklet";
+
+      // new `ScrollViewWithBottomPadding` behavior: if we hide keyboard and we are in the end of `ScrollView`
+      // then we always need to scroll back, because we apply a padding that doesn't change layout, so we will
+      // not have auto scroll back in this case
+      if (!keyboardWillAppear.value && ghostViewSpace.value > 0) {
+        scrollTo(
+          scrollViewAnimatedRef,
+          0,
+          scrollPosition.value -
+            interpolate(
+              e,
+              [initialKeyboardSize.value, keyboardHeight.value],
+              [ghostViewSpace.value, 0],
+            ),
+          false,
+        );
+
+        return true;
+      }
+
+      return false;
+    }, []);
     const performScrollWithPositionRestoration = useCallback(
       (newPosition: number) => {
         "worklet";
@@ -293,7 +325,18 @@ const KeyboardAwareScrollView = forwardRef<
         lastSelection.value = e;
 
         if (e.target !== lastTarget) {
-          // ignore this event, because "focus changed" event handled in `useSmoothKeyboardHandler`
+          if (pendingSelectionForFocus.value) {
+            // selection arrived after onStart - complete the deferred setup
+            pendingSelectionForFocus.value = false;
+            updateLayoutFromSelection();
+
+            // if keyboard was already visible (focus change, no onMove expected),
+            // perform the deferred scroll now
+            if (!keyboardWillAppear.value && keyboardHeight.value > 0) {
+              position.value += maybeScroll(keyboardHeight.value, true);
+            }
+          }
+
           return;
         }
         // caret in the end + end coordinates has been changed -> we moved to a new line
@@ -311,7 +354,12 @@ const KeyboardAwareScrollView = forwardRef<
 
         onChangeTextHandler();
       },
-      [scrollFromCurrentPosition, onChangeTextHandler],
+      [
+        scrollFromCurrentPosition,
+        onChangeTextHandler,
+        updateLayoutFromSelection,
+        maybeScroll,
+      ],
     );
 
     useFocusedInputHandler(
@@ -344,6 +392,7 @@ const KeyboardAwareScrollView = forwardRef<
             // on back transition need to interpolate as [0, keyboardHeight]
             initialKeyboardSize.value = 0;
             scrollPosition.value = scrollBeforeKeyboardMovement.value;
+            pendingSelectionForFocus.value = false;
           }
 
           if (
@@ -360,17 +409,40 @@ const KeyboardAwareScrollView = forwardRef<
           // focus was changed
           if (focusWasChanged) {
             tag.value = e.target;
-            // save position of focused text input when keyboard starts to move
-            updateLayoutFromSelection();
+
+            if (lastSelection.value?.target === e.target) {
+              // selection arrived before onStart - use it to update layout
+              updateLayoutFromSelection();
+              pendingSelectionForFocus.value = false;
+            } else {
+              // selection hasn't arrived yet for the new target.
+              // use input layout as-is; will be refined when selection arrives.
+              if (input.value) {
+                layout.value = input.value;
+              }
+              pendingSelectionForFocus.value = true;
+            }
+
             // save current scroll position - when keyboard will hide we'll reuse
             // this value to achieve smooth hide effect
             scrollBeforeKeyboardMovement.value = position.value;
           }
 
           if (focusWasChanged && !keyboardWillAppear.value) {
-            // update position on scroll value, so `onEnd` handler
-            // will pick up correct values
-            position.value += maybeScroll(e.height, true);
+            if (!pendingSelectionForFocus.value) {
+              // update position on scroll value, so `onEnd` handler
+              // will pick up correct values
+              position.value += maybeScroll(e.height, true);
+            }
+          }
+
+          ghostViewSpace.value =
+            position.value +
+            scrollViewLayout.value.height -
+            scrollViewContentSize.value.height;
+
+          if (ghostViewSpace.value > 0) {
+            scrollPosition.value = position.value;
           }
         },
         onMove: (e) => {
@@ -378,6 +450,10 @@ const KeyboardAwareScrollView = forwardRef<
 
           syncKeyboardFrame(e);
 
+          if (removeGhostPadding(e.height)) {
+            return;
+          }
+
           // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
           if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
             maybeScroll(e.height);
@@ -386,13 +462,24 @@ const KeyboardAwareScrollView = forwardRef<
         onEnd: (e) => {
           "worklet";
 
+          removeGhostPadding(e.height);
+
           keyboardHeight.value = e.height;
           scrollPosition.value = position.value;
 
+          if (e.height === 0) {
+            lastSelection.value = null;
+          }
+
           syncKeyboardFrame(e);
         },
       },
-      [maybeScroll, disableScrollOnKeyboardHide, syncKeyboardFrame],
+      [
+        maybeScroll,
+        removeGhostPadding,
+        disableScrollOnKeyboardHide,
+        syncKeyboardFrame,
+      ],
     );
 
     const synchronize = useCallback(async () => {
@@ -443,32 +530,28 @@ 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,
-            }
-          : {},
+    // 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
+    const padding = useDerivedValue(
+      () => (enabled ? currentKeyboardFrameHeight.value + 1 : 0),
       [enabled],
     );
 
     return (
-      <ScrollViewComponent
+      <ScrollViewWithBottomPadding
         ref={onRef}
         {...rest}
+        bottomPadding={padding}
         scrollEventThrottle={16}
+        ScrollViewComponent={ScrollViewComponent}
         onLayout={onScrollViewLayout}
       >
         {children}
-        {enabled && <Reanimated.View style={view} />}
-      </ScrollViewComponent>
+      </ScrollViewWithBottomPadding>
     );
   },
 );

package/src/components/ScrollViewWithBottomPadding/index.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from "react";
+import { Platform } from "react-native";
+import Reanimated, { useAnimatedProps } from "react-native-reanimated";
+
+import { ClippingScrollView } from "../../bindings";
+
+import styles from "./styles";
+
+import type { ScrollViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+const ReanimatedClippingScrollView =
+  Platform.OS === "android"
+    ? Reanimated.createAnimatedComponent(ClippingScrollView)
+    : ClippingScrollView;
+
+type AnimatedScrollViewProps = React.ComponentProps<
+  typeof Reanimated.ScrollView
+>;
+
+export type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<
+  AnimatedScrollViewProps & React.RefAttributes<Reanimated.ScrollView>
+>;
+
+type ScrollViewWithBottomPaddingProps = {
+  ScrollViewComponent: AnimatedScrollViewComponent;
+  children?: React.ReactNode;
+  bottomPadding: SharedValue<number>;
+} & ScrollViewProps;
+
+const ScrollViewWithBottomPadding = forwardRef<
+  Reanimated.ScrollView,
+  ScrollViewWithBottomPaddingProps
+>(
+  (
+    { ScrollViewComponent, bottomPadding, contentInset, children, ...rest },
+    ref,
+  ) => {
+    const animatedProps = useAnimatedProps(
+      () => ({
+        // iOS prop
+        contentInset: {
+          bottom: bottomPadding.value + (contentInset?.bottom || 0),
+          top: contentInset?.top,
+          right: contentInset?.right,
+          left: contentInset?.left,
+        },
+        // Android prop
+        contentInsetBottom: bottomPadding.value,
+      }),
+      [
+        contentInset?.bottom,
+        contentInset?.top,
+        contentInset?.right,
+        contentInset?.left,
+      ],
+    );
+
+    return (
+      <ReanimatedClippingScrollView
+        animatedProps={animatedProps}
+        style={styles.container}
+      >
+        <ScrollViewComponent ref={ref} animatedProps={animatedProps} {...rest}>
+          {children}
+        </ScrollViewComponent>
+      </ReanimatedClippingScrollView>
+    );
+  },
+);
+
+export default ScrollViewWithBottomPadding;

package/src/components/ScrollViewWithBottomPadding/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default styles;

package/src/components/hooks/useScrollState.ts

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { useEvent, useSharedValue } from "react-native-reanimated";
+
+import { useEventHandlerRegistration } from "../../internal";
+
+import type { AnimatedRef } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+
+const NATIVE_SCROLL_EVENT_NAMES = [
+  "onScroll",
+  "onScrollBeginDrag",
+  "onScrollEndDrag",
+  "onMomentumScrollBegin",
+  "onMomentumScrollEnd",
+];
+
+type ScrollEvent = {
+  contentOffset: {
+    x: number;
+    y: number;
+  };
+  layoutMeasurement: {
+    width: number;
+    height: number;
+  };
+  contentSize: {
+    width: number;
+    height: number;
+  };
+};
+
+const useScrollState = (ref: AnimatedRef<Reanimated.ScrollView>) => {
+  const offset = useSharedValue(0);
+  const layout = useSharedValue({ width: 0, height: 0 });
+  const size = useSharedValue({ width: 0, height: 0 });
+
+  const register = useEventHandlerRegistration(ref);
+
+  const eventHandler = useEvent((event: ScrollEvent) => {
+    "worklet";
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    offset.value = event.contentOffset.y;
+    layout.value = event.layoutMeasurement;
+    size.value = event.contentSize;
+  }, NATIVE_SCROLL_EVENT_NAMES);
+
+  useEffect(() => {
+    const cleanup = register(eventHandler);
+
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  return { offset, layout, size };
+};
+
+export default useScrollState;

package/src/specs/ClippingScrollViewDecoratorViewNativeComponent.ts

@@ -0,0 +1,17 @@
+import { codegenNativeComponent } from "react-native";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native";
+import type { Double } from "react-native/Libraries/Types/CodegenTypes";
+
+export interface NativeProps extends ViewProps {
+  contentInsetBottom: Double;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "ClippingScrollViewDecoratorView",
+  {
+    interfaceOnly: true,
+    excludedPlatforms: ["iOS"],
+  },
+) as HostComponent<NativeProps>;

package/src/types/views.ts

@@ -49,3 +49,9 @@ export type KeyboardExtenderProps = PropsWithChildren<{
   /** Controls whether this `KeyboardExtender` instance should take an effect. Default is `true`. */
   enabled?: boolean;
 }>;
+export type ClippingScrollViewProps = PropsWithChildren<
+  ViewProps & {
+    /** An additional space that gets applied to the bottom of the `ScrollView` (inside a scrollable content). Default is `0`. */
+    contentInsetBottom?: number;
+  }
+>;