react-native-keyboard-toolkit 1.0.0 → 1.0.1

package/dist/components/KeyboardAwareView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { KeyboardAwareViewProps } from '../types';
 import type { KeyboardAwareViewRef } from '../types';
-/** A lightweight view that adds bottom space while the keyboard is visible. */
+/** Adds keyboard spacing to in-flow content and keeps absolute footers visible. */
 export declare const KeyboardAwareView: React.ForwardRefExoticComponent<KeyboardAwareViewProps & React.RefAttributes<KeyboardAwareViewRef>>;
 export default KeyboardAwareView;

package/dist/components/KeyboardAwareView.js

@@ -7,14 +7,20 @@ const react_native_1 = require("react-native");
 const constants_1 = require("../utils/constants");
 const useKeyboardState_1 = require("../hooks/useKeyboardState");
 const scrollManager_1 = require("../utils/scrollManager");
-/** A lightweight view that adds bottom space while the keyboard is visible. */
+/** Adds keyboard spacing to in-flow content and keeps absolute footers visible. */
 exports.KeyboardAwareView = (0, react_1.forwardRef)(function KeyboardAwareViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, style, onLayout, ...props }, forwardedRef) {
     const keyboard = (0, useKeyboardState_1.useKeyboardState)();
     const viewRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(forwardedRef, () => viewRef.current, []);
     const measurementSequence = (0, react_1.useRef)(0);
     const [keyboardOverlap, setKeyboardOverlap] = (0, react_1.useState)(0);
+    const [keyboardDisplacement, setKeyboardDisplacement] = (0, react_1.useState)(0);
+    const animatedDisplacement = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const flattenedStyle = react_native_1.StyleSheet.flatten(style);
+    const isAbsolutelyPositioned = flattenedStyle?.position === 'absolute';
+    const spacing = Number.isFinite(keyboardSpacing)
+        ? Math.max(0, keyboardSpacing)
+        : 0;
     const basePadding = typeof flattenedStyle?.paddingBottom === 'number'
         ? flattenedStyle.paddingBottom
         : 0;
@@ -28,36 +34,79 @@ exports.KeyboardAwareView = (0, react_1.forwardRef)(function KeyboardAwareViewCo
             if (sequence !== measurementSequence.current || !keyboard.isVisible) {
                 return;
             }
-            setKeyboardOverlap((0, scrollManager_1.calculateKeyboardOverlap)({ y, height }, keyboard.height, keyboard.screenY));
+            if (!isAbsolutelyPositioned) {
+                setKeyboardOverlap((0, scrollManager_1.calculateKeyboardOverlap)({ y, height }, keyboard.height, keyboard.screenY));
+            }
+            setKeyboardDisplacement(isAbsolutelyPositioned && typeof keyboard.screenY === 'number'
+                ? (0, scrollManager_1.calculateKeyboardDisplacement)({ y, height }, keyboard.screenY, spacing)
+                : 0);
         });
-    }, [keyboard.height, keyboard.isVisible, keyboard.screenY]);
+    }, [
+        isAbsolutelyPositioned,
+        keyboard.height,
+        keyboard.isVisible,
+        keyboard.screenY,
+        spacing,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!keyboard.isVisible) {
             measurementSequence.current += 1;
             setKeyboardOverlap(0);
+            setKeyboardDisplacement(0);
             return;
         }
         const frame = requestAnimationFrame(measureOverlap);
         return () => cancelAnimationFrame(frame);
     }, [keyboard.isVisible, keyboard.height, keyboard.screenY, measureOverlap]);
+    const shouldAdjust = enabled &&
+        keyboard.isVisible &&
+        behavior !== 'none' &&
+        behavior !== 'resize';
+    (0, react_1.useEffect)(() => {
+        if (!isAbsolutelyPositioned) {
+            animatedDisplacement.setValue(0);
+            return;
+        }
+        const animation = react_native_1.Animated.timing(animatedDisplacement, {
+            toValue: shouldAdjust ? -keyboardDisplacement : 0,
+            duration: keyboard.animationDuration,
+            useNativeDriver: true,
+        });
+        animation.start();
+        return () => animation.stop();
+    }, [
+        animatedDisplacement,
+        isAbsolutelyPositioned,
+        keyboard.animationDuration,
+        keyboardDisplacement,
+        shouldAdjust,
+    ]);
     const handleLayout = (0, react_1.useCallback)((event) => {
         onLayout?.(event);
         measureOverlap();
     }, [measureOverlap, onLayout]);
-    const adjust = enabled &&
-        keyboard.isVisible &&
-        behavior !== 'none' &&
-        behavior !== 'resize' &&
+    const adjustPadding = shouldAdjust &&
+        !isAbsolutelyPositioned &&
         keyboardOverlap > 0 &&
         typeof flattenedStyle?.paddingBottom !== 'string';
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, ref: viewRef, onLayout: handleLayout, style: adjust
+    const stickyTransform = isAbsolutelyPositioned
+        ? [
+            ...(Array.isArray(flattenedStyle?.transform)
+                ? flattenedStyle.transform
+                : []),
+            { translateY: animatedDisplacement },
+        ]
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...props, ref: viewRef, onLayout: handleLayout, style: adjustPadding
             ? [
                 style,
                 {
-                    paddingBottom: Math.max(basePadding, keyboardOverlap + Math.max(0, keyboardSpacing)),
+                    paddingBottom: Math.max(basePadding, keyboardOverlap + spacing),
                 },
             ]
-            : style }));
+            : isAbsolutelyPositioned
+                ? [style, { transform: stickyTransform }]
+                : style }));
 });
 exports.KeyboardAwareView.displayName = 'KeyboardAwareView';
 exports.default = exports.KeyboardAwareView;

package/dist/types/index.d.ts

@@ -23,7 +23,7 @@ export interface KeyboardAwareScrollViewProps extends ScrollViewProps {
     enabled?: boolean;
 }
 export interface KeyboardAwareViewProps extends ViewProps {
-    /** Defaults to `smart`. `resize` relies on the platform window resize behavior. */
+    /** Defaults to `smart`; absolute-positioned views are moved above the keyboard. */
     behavior?: KeyboardBehavior;
     /** Extra space between the view content and the keyboard, in points. */
     keyboardSpacing?: number;

package/dist/utils/scrollManager.d.ts

@@ -10,6 +10,8 @@ export interface ScrollCalculation {
     offset: number;
     delta: number;
 }
+/** Return how far a bottom edge must move to clear the keyboard and spacing. */
+export declare function calculateKeyboardDisplacement(viewport: ScrollViewport, keyboardTop: number, spacing: number): number;
 /** Return the part of the measured view actually covered by the keyboard. */
 export declare function calculateKeyboardOverlap(viewport: ScrollViewport, keyboardHeight: number, keyboardTop?: number): number;
 /**

package/dist/utils/scrollManager.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateKeyboardDisplacement = calculateKeyboardDisplacement;
 exports.calculateKeyboardOverlap = calculateKeyboardOverlap;
 exports.calculateScrollOffset = calculateScrollOffset;
+/** Return how far a bottom edge must move to clear the keyboard and spacing. */
+function calculateKeyboardDisplacement(viewport, keyboardTop, spacing) {
+    return Math.max(0, viewport.y + viewport.height - keyboardTop + Math.max(0, spacing));
+}
 /** Return the part of the measured view actually covered by the keyboard. */
 function calculateKeyboardOverlap(viewport, keyboardHeight, keyboardTop) {
     const viewportBottom = viewport.y + viewport.height;

package/docs/android.md

@@ -12,6 +12,11 @@ ended the viewport at that frame, the measured overlap is zero and no second
 keyboard-height inset is added. OEM keyboards and edge-to-edge configurations
 can still report coordinates relative to different window origins.
 
+For a sticky submit action, put an absolutely positioned
+`KeyboardAwareView` outside the scroll view. With `adjustResize`, Android may
+already move the footer as the window changes size; the measured keyboard frame
+is used to apply only any remaining displacement and configured spacing.
+
 ## Device checklist
 
 - Test Android 10+ devices/emulators and the app's minimum supported OS.

package/docs/api.md

@@ -22,8 +22,11 @@ underlying React Native `ScrollView`.
 
 Extends `ViewProps`. Supports `behavior`, `keyboardSpacing`, and `enabled`.
 Smart, scroll, and padding add bottom padding for the measured overlap. Resize
-and none do not add padding. This view does not scroll to reveal a hidden child.
-Its ref points to the underlying React Native `View`.
+and none do not adjust the layout. When `style.position` is `absolute`, the
+component animates the view upward by the distance from its measured bottom
+edge to the keyboard frame, plus `keyboardSpacing`. It returns to its original
+position when the keyboard hides. This view does not scroll to reveal a hidden
+child. Its ref points to the underlying React Native `View`.
 
 ## `KeyboardProvider`
 

package/docs/ios.md

@@ -7,6 +7,11 @@ temporary scroll range, so safe-area-constrained viewports do not blindly add
 the full keyboard height. The library does not set safe-area, navigation, or
 modal presentation configuration.
 
+An absolutely positioned `KeyboardAwareView` uses the same keyboard frame and
+event duration to animate a sticky footer above the keyboard. Place it outside
+the scroll view and account for its height in the scroll view's content padding
+and `keyboardSpacing`.
+
 ## Device checklist
 
 - Test iPhone and iPad layouts with safe areas and the home indicator.

package/docs/troubleshooting.md

@@ -9,6 +9,14 @@
 - If a custom input wrapper delays focus, call `refresh()` from
   `useFocusedInput` after its layout settles.
 
+## A sticky submit button is behind the keyboard
+
+Wrap the footer in `KeyboardAwareView` and set `position: 'absolute'` on that
+component's style. The view then measures its bottom edge and moves above the
+keyboard by the covered distance plus `keyboardSpacing`. Keep it outside the
+scroll view and give the scroll content enough bottom padding to scroll above
+the footer.
+
 ## Android content is moved twice
 
 Use `adjustResize` as the standard window mode and avoid adding a second

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-keyboard-toolkit",
-  "version": "1.0.0",
-  "description": "Keyboard-aware ScrollView, keyboard avoiding view, input focus navigation, and keyboard state hooks for React Native on iOS and Android.",
+  "version": "1.0.1",
+  "description": "Keyboard-aware scrolling, views, sticky form actions, and keyboard hooks for React Native on iOS and Android.",
   "author": "Denish Dabhi <dabhidenish57@gmail.com>",
   "license": "MIT",
   "homepage": "https://github.com/DenishDabhi/react-native-keyboard-toolkit#readme",
@@ -44,7 +44,9 @@
     "android",
     "typescript",
     "keyboard-dismiss",
-    "keyboard-handling"
+    "keyboard-handling",
+    "sticky-button",
+    "sticky-footer"
   ],
   "publishConfig": {
     "access": "public"
@@ -67,8 +69,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
     "@react-native-community/cli": "20.2.0",
     "@react-native-community/cli-platform-android": "20.2.0",
     "@react-native-community/cli-platform-ios": "20.2.0",

package/src/components/KeyboardAwareView.tsx

@@ -6,14 +6,17 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 import type { KeyboardAwareViewProps } from '../types';
 import type { KeyboardAwareViewRef } from '../types';
 import { DEFAULT_KEYBOARD_SPACING } from '../utils/constants';
 import { useKeyboardState } from '../hooks/useKeyboardState';
-import { calculateKeyboardOverlap } from '../utils/scrollManager';
+import {
+  calculateKeyboardDisplacement,
+  calculateKeyboardOverlap,
+} from '../utils/scrollManager';
 
-/** A lightweight view that adds bottom space while the keyboard is visible. */
+/** Adds keyboard spacing to in-flow content and keeps absolute footers visible. */
 export const KeyboardAwareView: React.ForwardRefExoticComponent<
   KeyboardAwareViewProps & React.RefAttributes<KeyboardAwareViewRef>
 > = forwardRef<KeyboardAwareViewRef, KeyboardAwareViewProps>(
@@ -33,7 +36,13 @@ export const KeyboardAwareView: React.ForwardRefExoticComponent<
     useImperativeHandle(forwardedRef, () => viewRef.current!, []);
     const measurementSequence = useRef(0);
     const [keyboardOverlap, setKeyboardOverlap] = useState(0);
+    const [keyboardDisplacement, setKeyboardDisplacement] = useState(0);
+    const animatedDisplacement = useRef(new Animated.Value(0)).current;
     const flattenedStyle = StyleSheet.flatten(style);
+    const isAbsolutelyPositioned = flattenedStyle?.position === 'absolute';
+    const spacing = Number.isFinite(keyboardSpacing)
+      ? Math.max(0, keyboardSpacing)
+      : 0;
     const basePadding =
       typeof flattenedStyle?.paddingBottom === 'number'
         ? flattenedStyle.paddingBottom
@@ -49,26 +58,69 @@ export const KeyboardAwareView: React.ForwardRefExoticComponent<
         if (sequence !== measurementSequence.current || !keyboard.isVisible) {
           return;
         }
-        setKeyboardOverlap(
-          calculateKeyboardOverlap(
-            { y, height },
-            keyboard.height,
-            keyboard.screenY,
-          ),
+        if (!isAbsolutelyPositioned) {
+          setKeyboardOverlap(
+            calculateKeyboardOverlap(
+              { y, height },
+              keyboard.height,
+              keyboard.screenY,
+            ),
+          );
+        }
+        setKeyboardDisplacement(
+          isAbsolutelyPositioned && typeof keyboard.screenY === 'number'
+            ? calculateKeyboardDisplacement(
+                { y, height },
+                keyboard.screenY,
+                spacing,
+              )
+            : 0,
         );
       });
-    }, [keyboard.height, keyboard.isVisible, keyboard.screenY]);
+    }, [
+      isAbsolutelyPositioned,
+      keyboard.height,
+      keyboard.isVisible,
+      keyboard.screenY,
+      spacing,
+    ]);
 
     useEffect(() => {
       if (!keyboard.isVisible) {
         measurementSequence.current += 1;
         setKeyboardOverlap(0);
+        setKeyboardDisplacement(0);
         return;
       }
       const frame = requestAnimationFrame(measureOverlap);
       return () => cancelAnimationFrame(frame);
     }, [keyboard.isVisible, keyboard.height, keyboard.screenY, measureOverlap]);
 
+    const shouldAdjust =
+      enabled &&
+      keyboard.isVisible &&
+      behavior !== 'none' &&
+      behavior !== 'resize';
+    useEffect(() => {
+      if (!isAbsolutelyPositioned) {
+        animatedDisplacement.setValue(0);
+        return;
+      }
+      const animation = Animated.timing(animatedDisplacement, {
+        toValue: shouldAdjust ? -keyboardDisplacement : 0,
+        duration: keyboard.animationDuration,
+        useNativeDriver: true,
+      });
+      animation.start();
+      return () => animation.stop();
+    }, [
+      animatedDisplacement,
+      isAbsolutelyPositioned,
+      keyboard.animationDuration,
+      keyboardDisplacement,
+      shouldAdjust,
+    ]);
+
     const handleLayout = useCallback(
       (event: Parameters<NonNullable<typeof onLayout>>[0]) => {
         onLayout?.(event);
@@ -76,30 +128,38 @@ export const KeyboardAwareView: React.ForwardRefExoticComponent<
       },
       [measureOverlap, onLayout],
     );
-    const adjust =
-      enabled &&
-      keyboard.isVisible &&
-      behavior !== 'none' &&
-      behavior !== 'resize' &&
+    const adjustPadding =
+      shouldAdjust &&
+      !isAbsolutelyPositioned &&
       keyboardOverlap > 0 &&
       typeof flattenedStyle?.paddingBottom !== 'string';
+    const stickyTransform = isAbsolutelyPositioned
+      ? [
+          ...(Array.isArray(flattenedStyle?.transform)
+            ? flattenedStyle.transform
+            : []),
+          { translateY: animatedDisplacement },
+        ]
+      : undefined;
 
     return (
-      <View
+      <Animated.View
         {...props}
         ref={viewRef}
         onLayout={handleLayout}
         style={
-          adjust
+          adjustPadding
             ? [
                 style,
                 {
                   paddingBottom: Math.max(
                     basePadding,
-                    keyboardOverlap + Math.max(0, keyboardSpacing),
+                    keyboardOverlap + spacing,
                   ),
                 },
               ]
+            : isAbsolutelyPositioned
+            ? [style, { transform: stickyTransform }]
             : style
         }
       />

package/src/types/index.ts

@@ -52,7 +52,7 @@ export interface KeyboardAwareScrollViewProps extends ScrollViewProps {
 }
 
 export interface KeyboardAwareViewProps extends ViewProps {
-  /** Defaults to `smart`. `resize` relies on the platform window resize behavior. */
+  /** Defaults to `smart`; absolute-positioned views are moved above the keyboard. */
   behavior?: KeyboardBehavior;
   /** Extra space between the view content and the keyboard, in points. */
   keyboardSpacing?: number;

package/src/utils/scrollManager.ts

@@ -13,6 +13,18 @@ export interface ScrollCalculation {
   delta: number;
 }
 
+/** Return how far a bottom edge must move to clear the keyboard and spacing. */
+export function calculateKeyboardDisplacement(
+  viewport: ScrollViewport,
+  keyboardTop: number,
+  spacing: number,
+): number {
+  return Math.max(
+    0,
+    viewport.y + viewport.height - keyboardTop + Math.max(0, spacing),
+  );
+}
+
 /** Return the part of the measured view actually covered by the keyboard. */
 export function calculateKeyboardOverlap(
   viewport: ScrollViewport,