react-native-keyboard-controller 1.21.0-beta.1 → 1.21.0-beta.3

package/src/components/ScrollViewWithBottomPadding/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
 import Reanimated, { useAnimatedProps } from "react-native-reanimated";
 
 import { ClippingScrollView } from "../../bindings";
@@ -9,8 +9,9 @@ import styles from "./styles";
 import type { ScrollViewProps } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 
+const OS = Platform.OS;
 const ReanimatedClippingScrollView =
-  Platform.OS === "android"
+  OS === "android"
     ? Reanimated.createAnimatedComponent(ClippingScrollView)
     : ClippingScrollView;
 
@@ -25,7 +26,10 @@ export type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<
 type ScrollViewWithBottomPaddingProps = {
   ScrollViewComponent: AnimatedScrollViewComponent;
   children?: React.ReactNode;
+  inverted?: boolean;
   bottomPadding: SharedValue<number>;
+  /** Absolute Y content offset (iOS only, for KeyboardChatScrollView). */
+  contentOffsetY?: SharedValue<number>;
 } & ScrollViewProps;
 
 const ScrollViewWithBottomPadding = forwardRef<
@@ -33,28 +37,60 @@ const ScrollViewWithBottomPadding = forwardRef<
   ScrollViewWithBottomPaddingProps
 >(
   (
-    { ScrollViewComponent, bottomPadding, contentInset, children, ...rest },
+    {
+      ScrollViewComponent,
+      bottomPadding,
+      contentInset,
+      scrollIndicatorInsets,
+      inverted,
+      contentOffsetY,
+      children,
+      ...rest
+    },
     ref,
   ) => {
-    const animatedProps = useAnimatedProps(
-      () => ({
+    const animatedProps = useAnimatedProps(() => {
+      const insetTop = inverted ? bottomPadding.value : 0;
+      const insetBottom = !inverted ? bottomPadding.value : 0;
+      const bottom = insetBottom + (contentInset?.bottom || 0);
+      const top = insetTop + (contentInset?.top || 0);
+
+      const result: Record<string, unknown> = {
         // iOS prop
         contentInset: {
-          bottom: bottomPadding.value + (contentInset?.bottom || 0),
-          top: contentInset?.top,
+          bottom: bottom,
+          top: top,
           right: contentInset?.right,
           left: contentInset?.left,
         },
+        scrollIndicatorInsets: {
+          bottom: bottom,
+          top: top,
+          right: scrollIndicatorInsets?.right,
+          left: scrollIndicatorInsets?.left,
+        },
         // Android prop
-        contentInsetBottom: bottomPadding.value,
-      }),
-      [
-        contentInset?.bottom,
-        contentInset?.top,
-        contentInset?.right,
-        contentInset?.left,
-      ],
-    );
+        contentInsetBottom: insetBottom,
+        contentInsetTop: insetTop,
+      };
+
+      if (contentOffsetY) {
+        result.contentOffset = { x: 0, y: contentOffsetY.value };
+      }
+
+      return result;
+    }, [
+      contentInset?.bottom,
+      contentInset?.top,
+      contentInset?.right,
+      contentInset?.left,
+      scrollIndicatorInsets?.bottom,
+      scrollIndicatorInsets?.top,
+      scrollIndicatorInsets?.right,
+      scrollIndicatorInsets?.left,
+      inverted,
+      contentOffsetY,
+    ]);
 
     return (
       <ReanimatedClippingScrollView
@@ -62,7 +98,17 @@ const ScrollViewWithBottomPadding = forwardRef<
         style={styles.container}
       >
         <ScrollViewComponent ref={ref} animatedProps={animatedProps} {...rest}>
-          {children}
+          {inverted ? (
+            // The only thing it can break is `StickyHeader`, but it's already broken in FlatList and other lists
+            // don't support this functionality, so we can add additional view here
+            // The correct fix would be to add a new prop in ScrollView that allows
+            // to customize children extraction logic and skip custom view
+            <View collapsable={false} nativeID="container">
+              {children}
+            </View>
+          ) : (
+            children
+          )}
         </ScrollViewComponent>
       </ReanimatedClippingScrollView>
     );

package/src/components/hooks/useScrollState.ts

@@ -1,8 +1,9 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useEvent, useSharedValue } from "react-native-reanimated";
 
 import { useEventHandlerRegistration } from "../../internal";
 
+import type { LayoutChangeEvent } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import type Reanimated from "react-native-reanimated";
 
@@ -53,7 +54,28 @@ const useScrollState = (ref: AnimatedRef<Reanimated.ScrollView>) => {
     };
   }, []);
 
-  return { offset, layout, size };
+  // `onContentSizeChange` is synthesized in JS (from the content container's
+  // onLayout) and `onLayout` has a different payload shape than scroll events,
+  // so neither can be reliably captured via native event registration.
+  // Instead we expose callbacks for the consumer to attach as props.
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      layout.value = {
+        width: e.nativeEvent.layout.width,
+        height: e.nativeEvent.layout.height,
+      };
+    },
+    [layout],
+  );
+
+  const onContentSizeChange = useCallback(
+    (w: number, h: number) => {
+      size.value = { width: w, height: h };
+    },
+    [size],
+  );
+
+  return { offset, layout, size, onLayout, onContentSizeChange };
 };
 
 export default useScrollState;

package/src/components/index.ts

@@ -5,6 +5,7 @@ export {
   default as KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
 } from "./KeyboardToolbar";
+export { default as KeyboardChatScrollView } from "./KeyboardChatScrollView";
 export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
 export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
 export type {
@@ -12,3 +13,4 @@ export type {
   KeyboardAwareScrollViewRef,
 } from "./KeyboardAwareScrollView";
 export type { KeyboardToolbarProps } from "./KeyboardToolbar";
+export type { KeyboardChatScrollViewProps } from "./KeyboardChatScrollView/types";

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./types";
 export * from "./compat";
 
 export {
+  KeyboardChatScrollView,
   KeyboardAvoidingView,
   KeyboardStickyView,
   KeyboardAwareScrollView,
@@ -16,6 +17,7 @@ export {
   DefaultKeyboardToolbarTheme,
 } from "./components";
 export type {
+  KeyboardChatScrollViewProps,
   KeyboardAvoidingViewProps,
   KeyboardStickyViewProps,
   KeyboardAwareScrollViewProps,

package/src/specs/ClippingScrollViewDecoratorViewNativeComponent.ts

@@ -6,6 +6,7 @@ import type { Double } from "react-native/Libraries/Types/CodegenTypes";
 
 export interface NativeProps extends ViewProps {
   contentInsetBottom: Double;
+  contentInsetTop: Double;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/types/views.ts

@@ -53,5 +53,7 @@ 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;
+    /** An additional space that gets applied to the top of the `ScrollView` (inside a scrollable content). Default is `0`. */
+    contentInsetTop?: number;
   }
 >;