react-native-keyboard-controller 1.17.5 → 1.18.1

package/lib/typescript/views/KeyboardExtender/index.ios.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { KeyboardExtenderProps } from "../../types";
+import type { PropsWithChildren } from "react";
+/**
+ * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
+ *
+ * @param props - Component props.
+ * @returns A view component that renders inside the keyboard above all system buttons.
+ * @example
+ * ```tsx
+ * <KeyboardExtender>
+ *   <Button>10$</Button>
+ *   <Button>20$</Button>
+ *   <Button>50$</Button>
+ * </KeyboardExtender>
+ * ```
+ */
+declare const KeyboardExtender: (props: PropsWithChildren<KeyboardExtenderProps>) => React.JSX.Element;
+export default KeyboardExtender;

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

@@ -1 +1,2 @@
 export { default as OverKeyboardView } from "./OverKeyboardView";
+export { default as KeyboardExtender } from "./KeyboardExtender";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.17.5",
+  "version": "1.18.1",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -60,11 +60,13 @@
     "avoid keyboard",
     "sticky view",
     "over keyboard view",
+    "keyboard background view",
     "keyboard aware scroll view",
     "keyboard toolbar",
     "keyboard done button",
     "keyboard next button",
     "keyboard previous button",
+    "extend keyboard",
     "ios",
     "android"
   ],
@@ -79,7 +81,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "react-native-is-edge-to-edge": "^1.1.6"
+    "react-native-is-edge-to-edge": "^1.2.1"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
@@ -180,7 +182,9 @@
       "componentProvider": {
         "KeyboardControllerView": "KeyboardControllerView",
         "KeyboardGestureArea": "KeyboardGestureArea",
-        "OverKeyboardView": "OverKeyboardView"
+        "OverKeyboardView": "OverKeyboardView",
+        "KeyboardBackgroundView": "KeyboardBackgroundView",
+        "KeyboardExtender": "KeyboardExtender"
       }
     }
   }

package/react-native.config.js

@@ -6,6 +6,7 @@ module.exports = {
           "KeyboardControllerViewComponentDescriptor",
           "KeyboardGestureAreaComponentDescriptor",
           "OverKeyboardViewComponentDescriptor",
+          "KeyboardBackgroundViewComponentDescriptor",
         ],
         cmakeListsPath: "../android/src/main/jni/CMakeLists.txt",
       },

package/src/animated.tsx

@@ -1,5 +1,5 @@
 /* eslint react/jsx-sort-props: off */
-import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Platform, StyleSheet } from "react-native";
 import {
   controlEdgeToEdgeValues,
@@ -11,7 +11,7 @@ import { KeyboardControllerView } from "./bindings";
 import { KeyboardContext } from "./context";
 import { focusedInputEventsMap, keyboardEventsMap } from "./event-mappings";
 import { useAnimatedValue, useEventHandlerRegistration } from "./internal";
-import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
+import { KeyboardController } from "./module";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
@@ -83,6 +83,13 @@ type KeyboardProviderProps = {
    * Defaults to `true`.
    */
   enabled?: boolean;
+  /**
+   * A boolean prop indicating whether to preload the keyboard to reduce time-to-interaction (TTI) on first input focus.
+   * Defaults to `true`.
+   *
+   * @platform ios
+   */
+  preload?: boolean;
 };
 
 // capture `Platform.OS` in separate variable to avoid deep workletization of entire RN package
@@ -110,6 +117,7 @@ export const KeyboardProvider = (props: KeyboardProviderProps) => {
     navigationBarTranslucent,
     preserveEdgeToEdge,
     enabled: initiallyEnabled = true,
+    preload = true,
   } = props;
   // ref
   const viewTagRef = useRef<React.Component<KeyboardControllerProps>>(null);
@@ -216,14 +224,11 @@ export const KeyboardProvider = (props: KeyboardProviderProps) => {
     [],
   );
 
-  // layout effects
-  useLayoutEffect(() => {
-    if (enabled) {
-      applyMonkeyPatch();
-    } else {
-      revertMonkeyPatch();
+  useEffect(() => {
+    if (preload) {
+      KeyboardController.preload();
     }
-  }, [enabled]);
+  }, [preload]);
 
   if (__DEV__) {
     controlEdgeToEdgeValues({

package/src/bindings.native.ts

@@ -2,9 +2,11 @@ import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
   FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
+  KeyboardExtenderProps,
   KeyboardGestureAreaProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
@@ -60,3 +62,9 @@ export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
     : ({ children }: KeyboardGestureAreaProps) => children;
 export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
   require("./specs/OverKeyboardViewNativeComponent").default;
+export const KeyboardBackgroundView: React.FC<KeyboardBackgroundViewProps> =
+  require("./specs/KeyboardBackgroundViewNativeComponent").default;
+export const RCTKeyboardExtender: React.FC<KeyboardExtenderProps> =
+  Platform.OS === "ios"
+    ? require("./specs/KeyboardExtenderNativeComponent").default
+    : ({ children }: KeyboardExtenderProps) => children;

package/src/bindings.ts

@@ -2,9 +2,11 @@ import { View } from "react-native";
 
 import type {
   FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
+  KeyboardExtenderProps,
   KeyboardGestureAreaProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
@@ -16,6 +18,7 @@ const NOOP = () => {};
 export const KeyboardControllerNative: KeyboardControllerNativeModule = {
   setDefaultMode: NOOP,
   setInputMode: NOOP,
+  preload: NOOP,
   dismiss: NOOP,
   setFocusTo: NOOP,
   addListener: NOOP,
@@ -59,3 +62,18 @@ export const KeyboardGestureArea =
   View as unknown as React.FC<KeyboardGestureAreaProps>;
 export const RCTOverKeyboardView =
   View as unknown as React.FC<OverKeyboardViewProps>;
+/**
+ * A view that matches keyboard background.
+ *
+ * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-background-view|Documentation} page for more details.
+ */
+export const KeyboardBackgroundView =
+  View as unknown as React.FC<KeyboardBackgroundViewProps>;
+/**
+ * A container that will embed its children into the keyboard
+ * and will always show them above the keyboard.
+ *
+ * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-extender|Documentation} page for more details.
+ */
+export const RCTKeyboardExtender =
+  View as unknown as React.FC<KeyboardExtenderProps>;

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useMemo } from "react";
 import Reanimated, {
+  clamp,
   interpolate,
   runOnUI,
   scrollTo,
@@ -32,7 +33,7 @@ import type {
 } from "react-native-keyboard-controller";
 
 export type KeyboardAwareScrollViewProps = {
-  /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
+  /** The distance between the keyboard and the caret inside a focused `TextInput` when the keyboard is shown. Default is `0`. */
   bottomOffset?: number;
   /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
   disableScrollOnKeyboardHide?: boolean;
@@ -127,6 +128,8 @@ const KeyboardAwareScrollView = forwardRef<
     const scrollBeforeKeyboardMovement = useSharedValue(0);
     const { input } = useReanimatedFocusedInput();
     const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
+    const lastSelection =
+      useSharedValue<FocusedInputSelectionChangedEvent | null>(null);
 
     const { height } = useWindowDimensions();
 
@@ -191,9 +194,9 @@ const KeyboardAwareScrollView = forwardRef<
           return interpolatedScrollTo;
         }
 
-        if (absoluteY < 0) {
-          const positionOnScreen = visibleRect - inputHeight - bottomOffset;
-          const topOfScreen = scrollPosition.value + absoluteY;
+        if (point < 0) {
+          const positionOnScreen = visibleRect - bottomOffset;
+          const topOfScreen = scrollPosition.value + point;
 
           scrollTo(
             scrollViewAnimatedRef,
@@ -222,65 +225,89 @@ const KeyboardAwareScrollView = forwardRef<
       [extraKeyboardSpace],
     );
 
-    const scrollFromCurrentPosition = useCallback(
-      (customHeight?: number) => {
-        "worklet";
+    const updateLayoutFromSelection = useCallback(() => {
+      "worklet";
 
-        const prevScrollPosition = scrollPosition.value;
-        const prevLayout = layout.value;
+      const customHeight = lastSelection.value?.selection.end.y;
 
-        if (!input.value?.layout) {
-          return;
-        }
+      if (!input.value?.layout || !customHeight) {
+        return false;
+      }
 
-        // eslint-disable-next-line react-compiler/react-compiler
-        layout.value = {
-          ...input.value,
-          layout: {
-            ...input.value.layout,
-            height: customHeight ?? input.value.layout.height,
-          },
-        };
-        scrollPosition.value = position.value;
-        maybeScroll(keyboardHeight.value, true);
-        scrollPosition.value = prevScrollPosition;
-        layout.value = prevLayout;
-      },
-      [maybeScroll],
-    );
-    const onChangeText = useCallback(() => {
+      layout.value = {
+        ...input.value,
+        layout: {
+          ...input.value.layout,
+          // when we have multiline input with limited amount of lines, then custom height can be very big
+          // so we clamp it to max input height
+          height: clamp(customHeight, 0, input.value.layout.height),
+        },
+      };
+
+      return true;
+    }, [input, lastSelection, layout]);
+    const scrollFromCurrentPosition = useCallback(() => {
       "worklet";
 
-      // if typing a text caused layout shift, then we need to ignore this handler
-      // because this event will be handled in `useAnimatedReaction` below
-      if (layout.value?.layout.height !== input.value?.layout.height) {
+      const prevScrollPosition = scrollPosition.value;
+      const prevLayout = layout.value;
+
+      if (!updateLayoutFromSelection()) {
         return;
       }
 
+      // eslint-disable-next-line react-compiler/react-compiler
+      scrollPosition.value = position.value;
+      maybeScroll(keyboardHeight.value, true);
+      scrollPosition.value = prevScrollPosition;
+      layout.value = prevLayout;
+    }, [maybeScroll]);
+    const onChangeText = useCallback(() => {
+      "worklet";
+
+      console.debug("maybeScroll - onChangeText");
       scrollFromCurrentPosition();
     }, [scrollFromCurrentPosition]);
+    const onChangeTextHandler = useMemo(
+      () => debounce(onChangeText, 200),
+      [onChangeText],
+    );
     const onSelectionChange = useCallback(
       (e: FocusedInputSelectionChangedEvent) => {
         "worklet";
 
+        const lastTarget = lastSelection.value?.target;
+        const latestSelection = lastSelection.value?.selection;
+
+        lastSelection.value = e;
+
+        if (e.target !== lastTarget) {
+          // ignore this event, because "focus changed" event handled in `useSmoothKeyboardHandler`
+          return;
+        }
+        // caret in the end + end coordinates has been changed -> we moved to a new line
+        // so input may grow
+        if (
+          e.selection.end.position === e.selection.start.position &&
+          latestSelection?.end.y !== e.selection.end.y
+        ) {
+          return scrollFromCurrentPosition();
+        }
+        // selection has been changed
         if (e.selection.start.position !== e.selection.end.position) {
-          scrollFromCurrentPosition(e.selection.end.y);
+          return scrollFromCurrentPosition();
         }
-      },
-      [scrollFromCurrentPosition],
-    );
 
-    const onChangeTextHandler = useMemo(
-      () => debounce(onChangeText, 200),
-      [onChangeText],
+        onChangeTextHandler();
+      },
+      [scrollFromCurrentPosition, onChangeTextHandler],
     );
 
     useFocusedInputHandler(
       {
-        onChangeText: onChangeTextHandler,
         onSelectionChange: onSelectionChange,
       },
-      [onChangeTextHandler, onSelectionChange],
+      [onSelectionChange],
     );
 
     useSmoothKeyboardHandler(
@@ -322,9 +349,8 @@ const KeyboardAwareScrollView = forwardRef<
           // focus was changed
           if (focusWasChanged) {
             tag.value = e.target;
-
             // save position of focused text input when keyboard starts to move
-            layout.value = input.value;
+            updateLayoutFromSelection();
             // save current scroll position - when keyboard will hide we'll reuse
             // this value to achieve smooth hide effect
             scrollBeforeKeyboardMovement.value = position.value;
@@ -369,11 +395,10 @@ const KeyboardAwareScrollView = forwardRef<
           current?.target === previous?.target &&
           current?.layout.height !== previous?.layout.height
         ) {
-          const prevLayout = layout.value;
-
-          layout.value = input.value;
-          scrollPosition.value += maybeScroll(keyboardHeight.value, true);
-          layout.value = prevLayout;
+          // input has changed layout - let's check if we need to scroll
+          // may happen when you paste text, then onSelectionChange will be
+          // fired earlier than text actually changes its layout
+          scrollFromCurrentPosition();
         }
       },
       [],

package/src/components/KeyboardToolbar/Arrow.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 
-import useColorScheme from "../hooks/useColorScheme";
+import { useKeyboardState } from "../../hooks";
 
 import type { KeyboardToolbarTheme } from "./types";
 import type { ViewStyle } from "react-native";
@@ -13,7 +13,7 @@ type ArrowProps = {
 };
 
 const ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
 
   const color = useMemo(
     () => ({

package/src/components/KeyboardToolbar/Button.tsx

@@ -6,7 +6,7 @@ import {
   View,
 } from "react-native";
 
-import useColorScheme from "../hooks/useColorScheme";
+import { useKeyboardState } from "../../hooks";
 
 import type { KeyboardToolbarTheme } from "./types";
 import type { PropsWithChildren } from "react";
@@ -64,7 +64,7 @@ const ButtonAndroid = ({
   style,
   theme,
 }: PropsWithChildren<ButtonProps>) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
   const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
   const ripple = useMemo(
     () =>

package/src/components/KeyboardToolbar/index.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
 import { FocusedInputEvents } from "../../bindings";
+import { useKeyboardState } from "../../hooks";
 import { KeyboardController } from "../../module";
-import useColorScheme from "../hooks/useColorScheme";
 import KeyboardStickyView from "../KeyboardStickyView";
 
 import Arrow from "./Arrow";
@@ -106,7 +106,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = (props) => {
     insets,
     ...rest
   } = props;
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
   const [inputs, setInputs] = useState({
     current: 0,
     count: 0,

package/src/hooks/useKeyboardState/index.ts

@@ -12,17 +12,25 @@ const getLatestState = () => ({
   isVisible: KeyboardController.isVisible(),
 });
 
+type KeyboardStateSelector<T> = (state: KeyboardState) => T;
+
+const defaultSelector: KeyboardStateSelector<KeyboardState> = (state) => state;
+
 /**
  * React Hook that represents the current keyboard state on iOS and Android.
  * It tracks keyboard visibility, height, appearance, type and other properties.
  * This hook subscribes to keyboard events and updates the state reactively.
  *
+ * @template T - A type of the returned object from the `selector`.
+ * @param selector - A function that receives the current keyboard state and picks only necessary properties to avoid frequent re-renders.
  * @returns Object {@link KeyboardState|containing} keyboard state information.
  * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-state|Documentation} page for more details.
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { isVisible, height } = useKeyboardState();
+ *   const isVisible = useKeyboardState((state) => state.isVisible);
+ *   const height = useKeyboardState((state) => state.height);
+ *
  *   return (
  *     <View>
  *       <Text>Keyboard is {isVisible ? 'visible' : 'hidden'}</Text>
@@ -32,27 +40,38 @@ const getLatestState = () => ({
  * }
  * ```
  */
-export const useKeyboardState = (): KeyboardState => {
-  const [state, setState] = useState(getLatestState);
+function useKeyboardState<T = KeyboardState>(
+  selector: KeyboardStateSelector<T> = defaultSelector as KeyboardStateSelector<T>,
+): T {
+  const [state, setState] = useState<T>(() => selector(getLatestState()));
 
   useEffect(() => {
     const subscriptions = EVENTS.map((event) =>
       KeyboardEvents.addListener(event, () =>
         // state will be updated by global listener first,
         // so we simply read it and don't derive data from the event
-        setState(getLatestState),
+        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
     // no change, React will filter out this update as a no-op.
-    setState(getLatestState);
+    setState(selector(getLatestState()));
 
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
+      willShowSubscription.remove();
     };
   }, []);
 
   return state;
-};
+}
+
+export { useKeyboardState };

package/src/index.ts

@@ -20,4 +20,4 @@ export type {
   KeyboardAwareScrollViewProps,
   KeyboardToolbarProps,
 } from "./components";
-export { OverKeyboardView } from "./views";
+export { OverKeyboardView, KeyboardExtender } from "./views";

package/src/module.ts

@@ -13,7 +13,7 @@ let lastState: KeyboardEventData = {
   timestamp: new Date().getTime(),
   target: -1,
   type: "default",
-  appearance: "default",
+  appearance: "light",
 };
 
 KeyboardEvents.addListener("keyboardDidHide", (e) => {
@@ -54,6 +54,7 @@ export const KeyboardController: KeyboardControllerModule = {
   setDefaultMode: KeyboardControllerNative.setDefaultMode,
   setInputMode: KeyboardControllerNative.setInputMode,
   setFocusTo: KeyboardControllerNative.setFocusTo,
+  preload: KeyboardControllerNative.preload,
   dismiss,
   isVisible,
   state,

package/src/specs/KeyboardBackgroundViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>("KeyboardBackgroundView", {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/specs/KeyboardExtenderNativeComponent.ts

@@ -0,0 +1,13 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+export interface NativeProps extends ViewProps {
+  enabled?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>("KeyboardExtender", {
+  interfaceOnly: true,
+  excludedPlatforms: ["android"],
+}) as HostComponent<NativeProps>;

package/src/specs/NativeKeyboardController.ts

@@ -8,6 +8,7 @@ export interface Spec extends TurboModule {
   // methods
   setInputMode(mode: number): void;
   setDefaultMode(): void;
+  preload(): void;
   dismiss(keepFocus: boolean): void;
   setFocusTo(direction: string): void;
 

package/src/types/module.ts

@@ -17,8 +17,8 @@ export type KeyboardEventData = {
   target: number;
   /** `keyboardType` property from focused `TextInput`. */
   type: NonNullable<TextInputProps["keyboardType"]>;
-  /** Keyboard appearance. Can be one of `default`, `dark` or `light`. */
-  appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
+  /** Keyboard appearance. Can be one of `dark` or `light`. */
+  appearance: "dark" | "light";
 };
 /**
  * An object that represent current keyboard state.
@@ -59,13 +59,25 @@ export type KeyboardControllerModule = {
   /**
    * Sets default `windowSoftInputMode` (the one that declared in `AndroidManifest.xml`).
    *
+   * @platform android
    * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setdefaultmode-|docs} page for more details.
    */
   setDefaultMode: () => void;
   /**
-   * Changes `windowSoftInputMode` on Android. @see AndroidSoftInputModes for all possible values and {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setinputmode-|docs} page for more details.
+   * Changes `windowSoftInputMode` on Android.
+   *
+   * @platform android
+   * @see AndroidSoftInputModes for all possible values and {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setinputmode-|docs} page for more details.
    */
   setInputMode: (mode: number) => void;
+  // ios only
+  /**
+   * A method that preloads the keyboard. It's useful when you want to avoid a delay when the user focuses the first input.
+   *
+   * @platform ios
+   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#preload-|docs} page for more details.
+   */
+  preload: () => void;
   // all platforms
   /**
    * Dismisses the active keyboard. Removes a focus by default, but allows to pass `{keepFocus: true}` to keep focus.
@@ -96,6 +108,8 @@ export type KeyboardControllerNativeModule = {
   // android only
   setDefaultMode: () => void;
   setInputMode: (mode: number) => void;
+  // ios only
+  preload: () => void;
   // all platforms
   dismiss: (keepFocus: boolean) => void;
   setFocusTo: (direction: Direction) => void;

package/src/types/views.ts

@@ -44,3 +44,8 @@ export type OverKeyboardViewProps = PropsWithChildren<{
    */
   visible: boolean;
 }>;
+export type KeyboardBackgroundViewProps = PropsWithChildren<ViewProps>;
+export type KeyboardExtenderProps = PropsWithChildren<{
+  /** Controls whether this `KeyboardExtender` instance should take an effect. Default is `true`. */
+  enabled: boolean;
+}>;

package/src/views/KeyboardExtender/index.ios.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { View } from "react-native";
+
+import { RCTKeyboardExtender } from "../../bindings";
+import { useWindowDimensions } from "../../hooks";
+
+import type { KeyboardExtenderProps } from "../../types";
+import type { PropsWithChildren } from "react";
+
+/**
+ * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
+ *
+ * @param props - Component props.
+ * @returns A view component that renders inside the keyboard above all system buttons.
+ * @example
+ * ```tsx
+ * <KeyboardExtender>
+ *   <Button>10$</Button>
+ *   <Button>20$</Button>
+ *   <Button>50$</Button>
+ * </KeyboardExtender>
+ * ```
+ */
+const KeyboardExtender = (props: PropsWithChildren<KeyboardExtenderProps>) => {
+  const { children, enabled = true } = props;
+  const { width } = useWindowDimensions();
+
+  return (
+    <RCTKeyboardExtender enabled={enabled}>
+      <View style={{ width }}>{children}</View>
+    </RCTKeyboardExtender>
+  );
+};
+
+export default KeyboardExtender;