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

package/lib/typescript/components/hooks/useCombinedRef.d.ts

@@ -0,0 +1,3 @@
+import type { Ref, RefCallback } from "react";
+declare const useCombinedRef: <T>(...refs: Ref<T>[]) => RefCallback<T>;
+export default useCombinedRef;

package/lib/typescript/components/hooks/useScrollState.d.ts

@@ -0,0 +1,14 @@
+import type { AnimatedRef } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+declare const useScrollState: (ref: AnimatedRef<Reanimated.ScrollView>) => {
+    offset: import("react-native-reanimated").SharedValue<number>;
+    layout: import("react-native-reanimated").SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    size: import("react-native-reanimated").SharedValue<{
+        width: number;
+        height: number;
+    }>;
+};
+export default useScrollState;

package/lib/typescript/specs/ClippingScrollViewDecoratorViewNativeComponent.d.ts

@@ -0,0 +1,8 @@
+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;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/lib/typescript/types/views.d.ts

@@ -48,3 +48,7 @@ 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;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.20.6",
+  "version": "1.21.0-beta.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,7 +41,7 @@
     "typescript": "tsc --noEmit --project tsconfig.build.json",
     "lint": "eslint --quiet \"**/*.{js,ts,tsx}\"",
     "lint-clang": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm | grep -v -e Pods -e build | xargs clang-format -i -n --Werror",
-    "prepare": "bob build > /dev/null 2>&1",
+    "prepare": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
@@ -187,5 +187,6 @@
         "KeyboardExtender": "KeyboardExtender"
       }
     }
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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";
 
@@ -23,10 +22,14 @@ import {
   useWindowDimensions,
 } 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,
@@ -48,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;
@@ -127,9 +130,14 @@ const KeyboardAwareScrollView = forwardRef<
   ) => {
     const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
     const scrollViewRef = React.useRef<ScrollView>(null);
+    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);
@@ -140,14 +148,11 @@ 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();
 
-    const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
-      scrollViewRef.current = assignedRef;
-
-      scrollViewAnimatedRef(assignedRef);
-    }, []);
     const onScrollViewLayout = useCallback(
       (e: LayoutChangeEvent) => {
         scrollViewTarget.value = findNodeHandle(scrollViewAnimatedRef.current);
@@ -216,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";
@@ -296,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
@@ -314,7 +354,12 @@ const KeyboardAwareScrollView = forwardRef<
 
         onChangeTextHandler();
       },
-      [scrollFromCurrentPosition, onChangeTextHandler],
+      [
+        scrollFromCurrentPosition,
+        onChangeTextHandler,
+        updateLayoutFromSelection,
+        maybeScroll,
+      ],
     );
 
     useFocusedInputHandler(
@@ -347,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 (
@@ -363,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) => {
@@ -381,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);
@@ -389,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 () => {
@@ -446,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/useCombinedRef.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+
+import type { Ref, RefCallback } from "react";
+
+const useCombinedRef = <T>(...refs: Ref<T>[]): RefCallback<T> => {
+  return useCallback((value: T | null) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+
+      if (typeof ref === "function") {
+        ref(value);
+      } else {
+        ref.current = value;
+      }
+    }
+    // eslint-disable-next-line react-compiler/react-compiler
+  }, refs);
+};
+
+export default useCombinedRef;

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;
+  }
+>;