react-native-keyboard-controller 1.21.4 → 1.21.6

package/src/components/KeyboardChatScrollView/useExtraContentPadding/index.ts

@@ -26,7 +26,7 @@ type UseExtraContentPaddingOptions = {
   contentOffsetY?: SharedValue<number>;
   inverted: boolean;
   keyboardLiftBehavior: KeyboardLiftBehavior;
-  freeze: boolean;
+  freeze: SharedValue<boolean>;
 };
 
 /**
@@ -81,7 +81,7 @@ function useExtraContentPadding(options: UseExtraContentPaddingOptions): void {
   useAnimatedReaction(
     () => extraContentPadding.value,
     (current, previous) => {
-      if (freeze || previous === null) {
+      if (freeze.value || previous === null) {
         return;
       }
 
@@ -141,7 +141,7 @@ function useExtraContentPadding(options: UseExtraContentPaddingOptions): void {
         scrollToTarget(target);
       }
     },
-    [inverted, keyboardLiftBehavior, freeze],
+    [inverted, keyboardLiftBehavior],
   );
 }
 

package/src/components/KeyboardToolbar/index.tsx

@@ -99,11 +99,13 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
   );
   const containerStyle = useMemo(
     () => [
+      // CRUCIAL: gives the native view real bounds
+      styles.sticky,
       KEYBOARD_HAS_ROUNDED_CORNERS
-        ? {
-            marginLeft: (insets?.left ?? 0) + 16,
-            marginRight: (insets?.right ?? 0) + 16,
-          }
+        ? ({
+            left: (insets?.left ?? 0) + 16,
+            right: (insets?.right ?? 0) + 16,
+          } as const)
         : null,
     ],
     [insets],
@@ -207,6 +209,13 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
 };
 
 const styles = StyleSheet.create({
+  sticky: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: KEYBOARD_TOOLBAR_HEIGHT,
+  },
   toolbar: {
     position: "absolute",
     bottom: 0,

package/src/components/ScrollViewWithBottomPadding/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Platform, View } from "react-native";
+import { Platform } from "react-native";
 import Reanimated, {
   useAnimatedProps,
   useSharedValue,
@@ -125,17 +125,7 @@ const ScrollViewWithBottomPadding = forwardRef<
         style={styles.container}
       >
         <ScrollViewComponent ref={ref} animatedProps={animatedProps} {...rest}>
-          {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
-          )}
+          {children}
         </ScrollViewComponent>
       </ReanimatedClippingScrollView>
     );

package/src/hooks/useKeyboardState/index.ts

@@ -5,7 +5,7 @@ import { KeyboardController } from "../../module";
 
 import type { IKeyboardState } from "../../types";
 
-const EVENTS = ["keyboardDidShow", "keyboardDidHide"] as const;
+const EVENTS = ["keyboardWillShow", "keyboardDidHide"] as const;
 
 const getLatestState = () => ({
   ...KeyboardController.state(),
@@ -53,12 +53,6 @@ function useKeyboardState<T = IKeyboardState>(
         setState(selector(getLatestState())),
       ),
     );
-    // update `appearance` prematurely
-    const willShowSubscription = KeyboardEvents.addListener(
-      "keyboardWillShow",
-      (e) =>
-        setState(selector({ ...getLatestState(), appearance: e.appearance })),
-    );
 
     // we might have missed an update between reading a value in render and
     // `addListener` in this handler, so we set it here. If there was
@@ -67,7 +61,6 @@ function useKeyboardState<T = IKeyboardState>(
 
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
-      willShowSubscription.remove();
     };
   }, []);
 

package/src/module.ts

@@ -21,7 +21,7 @@ KeyboardEvents.addListener("keyboardDidHide", (e) => {
   lastState = e;
 });
 
-KeyboardEvents.addListener("keyboardDidShow", (e) => {
+KeyboardEvents.addListener("keyboardWillShow", (e) => {
   isClosed = false;
   lastState = e;
 });