react-native-keyboard-controller 1.11.6 → 1.12.0

package/lib/typescript/components/KeyboardStickyView/index.d.ts

@@ -1,5 +1,20 @@
 import React from "react";
 import type { View, ViewProps } from "react-native";
+export type KeyboardStickyViewProps = {
+    /**
+     * Specify additional offset to the view for given keyboard state.
+     */
+    offset?: {
+        /**
+         * Adds additional `translateY` when keyboard is close. By default `0`.
+         */
+        closed?: number;
+        /**
+         * Adds additional `translateY` when keyboard is open. By default `0`.
+         */
+        opened?: number;
+    };
+} & ViewProps;
 declare const KeyboardStickyView: React.ForwardRefExoticComponent<{
     /**
      * Specify additional offset to the view for given keyboard state.

package/lib/typescript/components/KeyboardToolbar/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
-import type { KeyboardToolbarTheme } from "./types";
+import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
 export type KeyboardToolbarProps = {
     /** An element that is shown in the middle of the toolbar. */
@@ -20,6 +20,26 @@ export type KeyboardToolbarProps = {
      * and want to show only `Done` button. Default to `true`.
      */
     showArrows?: boolean;
+    /**
+     * A callback that is called when the user presses the next button along with the default action.
+     */
+    onNextCallback?: () => void;
+    /**
+     * A callback that is called when the user presses the previous button along with the default action.
+     */
+    onPrevCallback?: () => void;
+    /**
+     * A callback that is called when the user presses the done button along with the default action.
+     */
+    onDoneCallback?: () => void;
+    /**
+     * A component that applies blur effect to the toolbar.
+     */
+    blur?: JSX.Element | null;
+    /**
+     * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+     */
+    opacity?: HEX;
 };
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and

package/lib/typescript/components/KeyboardToolbar/types.d.ts

@@ -5,7 +5,7 @@ type Theme = {
     /** Color for arrow when it's disabled */
     disabled: ColorValue;
     /** Keyboard toolbar background color */
-    background: ColorValue;
+    background: string;
     /** Color for ripple effect (on button touch) on Android */
     ripple: ColorValue;
 };
@@ -13,4 +13,6 @@ export type KeyboardToolbarTheme = {
     light: Theme;
     dark: Theme;
 };
+type HexSymbol = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "A" | "B" | "C" | "D" | "E" | "F" | "a" | "b" | "c" | "d" | "e" | "f";
+export type HEX = `${HexSymbol}${HexSymbol}`;
 export {};

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

@@ -2,4 +2,7 @@ export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
 export { default as KeyboardStickyView } from "./KeyboardStickyView";
 export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
 export { default as KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
 export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/lib/typescript/index.d.ts

@@ -5,4 +5,4 @@ export * from "./hooks";
 export * from "./constants";
 export * from "./types";
 export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
-export type { KeyboardToolbarProps } from "./components";
+export type { KeyboardAvoidingViewProps, KeyboardStickyViewProps, KeyboardAwareScrollViewProps, KeyboardToolbarProps, } from "./components";

package/lib/typescript/reanimated.d.ts

@@ -1,4 +1,5 @@
-import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
+import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputSelectionChangedEvent, FocusedInputSelectionHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
 export declare const useAnimatedKeyboardHandler: KeyboardHandlerHook<Record<string, unknown>, EventWithName<NativeEvent>>;
 export declare const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<Record<string, unknown>, EventWithName<FocusedInputLayoutChangedEvent>>;
 export declare const useFocusedInputTextHandler: FocusedInputTextHandlerHook<Record<string, unknown>, EventWithName<FocusedInputTextChangedEvent>>;
+export declare const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<Record<string, unknown>, EventWithName<FocusedInputSelectionChangedEvent>>;

package/lib/typescript/reanimated.native.d.ts

@@ -1,4 +1,7 @@
-import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
-export declare const useAnimatedKeyboardHandler: KeyboardHandlerHook<Record<string, unknown>, EventWithName<NativeEvent>>;
-export declare const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<Record<string, unknown>, EventWithName<FocusedInputLayoutChangedEvent>>;
-export declare const useFocusedInputTextHandler: FocusedInputTextHandlerHook<Record<string, unknown>, EventWithName<FocusedInputTextChangedEvent>>;
+import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputSelectionChangedEvent, FocusedInputSelectionHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
+type EventContext = Record<string, unknown>;
+export declare const useAnimatedKeyboardHandler: KeyboardHandlerHook<EventContext, EventWithName<NativeEvent>>;
+export declare const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<EventContext, EventWithName<FocusedInputLayoutChangedEvent>>;
+export declare const useFocusedInputTextHandler: FocusedInputTextHandlerHook<EventContext, EventWithName<FocusedInputTextChangedEvent>>;
+export declare const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<EventContext, EventWithName<FocusedInputSelectionChangedEvent>>;
+export {};

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

@@ -22,6 +22,21 @@ type FocusedInputLayoutChangedEvent = Readonly<{
 type FocusedInputTextChangedEvent = Readonly<{
     text: string;
 }>;
+type FocusedInputSelectionChangedEvent = Readonly<{
+    target: Int32;
+    selection: {
+        start: {
+            x: Double;
+            y: Double;
+            position: Int32;
+        };
+        end: {
+            x: Double;
+            y: Double;
+            position: Int32;
+        };
+    };
+}>;
 export interface NativeProps extends ViewProps {
     enabled?: boolean;
     statusBarTranslucent?: boolean;
@@ -32,6 +47,7 @@ export interface NativeProps extends ViewProps {
     onKeyboardMoveInteractive?: DirectEventHandler<KeyboardMoveEvent>;
     onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;
     onFocusedInputTextChanged?: DirectEventHandler<FocusedInputTextChangedEvent>;
+    onFocusedInputSelectionChanged?: DirectEventHandler<FocusedInputSelectionChangedEvent>;
 }
 declare const _default: HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/types.d.ts

@@ -20,6 +20,21 @@ export type FocusedInputLayoutChangedEvent = {
 export type FocusedInputTextChangedEvent = {
     text: string;
 };
+export type FocusedInputSelectionChangedEvent = {
+    target: number;
+    selection: {
+        start: {
+            x: number;
+            y: number;
+            position: number;
+        };
+        end: {
+            x: number;
+            y: number;
+            position: number;
+        };
+    };
+};
 export type EventWithName<T> = {
     eventName: string;
 } & T;
@@ -30,9 +45,11 @@ export type KeyboardControllerProps = {
     onKeyboardMoveInteractive?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onFocusedInputLayoutChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>) => void;
     onFocusedInputTextChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>) => void;
+    onFocusedInputSelectionChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>) => void;
     onKeyboardMoveReanimated?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onFocusedInputLayoutChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>) => void;
     onFocusedInputTextChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>) => void;
+    onFocusedInputSelectionChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>) => void;
     statusBarTranslucent?: boolean;
     navigationBarTranslucent?: boolean;
     enabled?: boolean;
@@ -90,6 +107,9 @@ export type FocusedInputLayoutHandlerHook<TContext, Event> = (handlers: {
 export type FocusedInputTextHandlerHook<TContext, Event> = (handlers: {
     onFocusedInputTextChanged?: (e: FocusedInputTextChangedEvent, context: TContext) => void;
 }, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputSelectionHandlerHook<TContext, Event> = (handlers: {
+    onFocusedInputSelectionChanged?: (e: FocusedInputSelectionChangedEvent, context: TContext) => void;
+}, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
 export type Handlers<T> = Record<string, T | undefined>;
 export type KeyboardHandler = Partial<{
     onStart: (e: NativeEvent) => void;
@@ -100,5 +120,6 @@ export type KeyboardHandler = Partial<{
 export type KeyboardHandlers = Handlers<KeyboardHandler>;
 export type FocusedInputHandler = Partial<{
     onChangeText: (e: FocusedInputTextChangedEvent) => void;
+    onSelectionChange: (e: FocusedInputSelectionChangedEvent) => void;
 }>;
 export type FocusedInputHandlers = Handlers<FocusedInputHandler>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.11.6",
+  "version": "1.12.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -47,6 +47,7 @@
     "focused input",
     "text changed",
     "avoiding view",
+    "avoid keyboard",
     "sticky view",
     "keyboard aware scroll view",
     "keyboard toolbar",
@@ -87,9 +88,9 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.8.8",
     "react": "18.2.0",
-    "react-native": "0.73.6",
+    "react-native": "0.74.0",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-reanimated": "3.8.0",
+    "react-native-reanimated": "3.9.0",
     "release-it": "^14.2.2",
     "typescript": "5.0.4"
   },

package/src/animated.tsx

@@ -9,6 +9,7 @@ import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
+  useFocusedInputSelectionHandler,
   useFocusedInputTextHandler,
 } from "./reanimated";
 
@@ -191,6 +192,16 @@ export const KeyboardProvider = ({
     },
     [],
   );
+  const inputSelectionHandler = useFocusedInputSelectionHandler(
+    {
+      onFocusedInputSelectionChanged: (e) => {
+        "worklet";
+
+        broadcastInputEvents("onSelectionChange", e);
+      },
+    },
+    [],
+  );
   // effects
   useEffect(() => {
     if (enabled) {
@@ -210,6 +221,7 @@ export const KeyboardProvider = ({
         onKeyboardMoveInteractive={onKeyboardMove}
         onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
         onFocusedInputTextChangedReanimated={inputTextHandler}
+        onFocusedInputSelectionChangedReanimated={inputSelectionHandler}
         navigationBarTranslucent={navigationBarTranslucent}
         statusBarTranslucent={statusBarTranslucent}
         style={styles.container}

package/src/components/KeyboardAvoidingView/index.tsx

@@ -12,7 +12,7 @@ import { useKeyboardAnimation } from "./hooks";
 
 import type { LayoutRectangle, ViewProps } from "react-native";
 
-type Props = {
+export type KeyboardAvoidingViewProps = {
   /**
    * Specify how to react to the presence of the keyboard.
    */
@@ -47,7 +47,10 @@ const defaultLayout: LayoutRectangle = {
  * View that moves out of the way when the keyboard appears by automatically
  * adjusting its height, position, or bottom padding.
  */
-const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
+const KeyboardAvoidingView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardAvoidingViewProps>
+>(
   (
     {
       behavior,

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -24,7 +24,7 @@ import type {
 } from "react-native";
 import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
 
-type KeyboardAwareScrollViewProps = {
+export type KeyboardAwareScrollViewProps = {
   /** The distance between keyboard and focused `TextInput` when 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`. */
@@ -212,77 +212,74 @@ const KeyboardAwareScrollView = forwardRef<
     );
 
     useSmoothKeyboardHandler(
-      enabled
-        ? {
-            onStart: (e) => {
-              "worklet";
-
-              const keyboardWillChangeSize =
-                keyboardHeight.value !== e.height && e.height > 0;
-              keyboardWillAppear.value =
-                e.height > 0 && keyboardHeight.value === 0;
-              const keyboardWillHide = e.height === 0;
-              const focusWasChanged =
-                (tag.value !== e.target && e.target !== -1) ||
-                keyboardWillChangeSize;
-
-              if (keyboardWillChangeSize) {
-                initialKeyboardSize.value = keyboardHeight.value;
-              }
-
-              if (keyboardWillHide) {
-                // on back transition need to interpolate as [0, keyboardHeight]
-                initialKeyboardSize.value = 0;
-                scrollPosition.value = scrollBeforeKeyboardMovement.value;
-              }
-
-              if (
-                keyboardWillAppear.value ||
-                keyboardWillChangeSize ||
-                focusWasChanged
-              ) {
-                // persist scroll value
-                scrollPosition.value = position.value;
-                // just persist height - later will be used in interpolation
-                keyboardHeight.value = e.height;
-              }
-
-              // focus was changed
-              if (focusWasChanged) {
-                tag.value = e.target;
-
-                // save position of focused text input when keyboard starts to move
-                layout.value = input.value;
-                // 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);
-              }
-            },
-            onMove: (e) => {
-              "worklet";
-
-              currentKeyboardFrameHeight.value = e.height;
-
-              // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
-              if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
-                maybeScroll(e.height);
-              }
-            },
-            onEnd: (e) => {
-              "worklet";
-
-              keyboardHeight.value = e.height;
-              scrollPosition.value = position.value;
-            },
+      {
+        onStart: (e) => {
+          "worklet";
+
+          const keyboardWillChangeSize =
+            keyboardHeight.value !== e.height && e.height > 0;
+          keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
+          const keyboardWillHide = e.height === 0;
+          const focusWasChanged =
+            (tag.value !== e.target && e.target !== -1) ||
+            keyboardWillChangeSize;
+
+          if (keyboardWillChangeSize) {
+            initialKeyboardSize.value = keyboardHeight.value;
+          }
+
+          if (keyboardWillHide) {
+            // on back transition need to interpolate as [0, keyboardHeight]
+            initialKeyboardSize.value = 0;
+            scrollPosition.value = scrollBeforeKeyboardMovement.value;
+          }
+
+          if (
+            keyboardWillAppear.value ||
+            keyboardWillChangeSize ||
+            focusWasChanged
+          ) {
+            // persist scroll value
+            scrollPosition.value = position.value;
+            // just persist height - later will be used in interpolation
+            keyboardHeight.value = e.height;
+          }
+
+          // focus was changed
+          if (focusWasChanged) {
+            tag.value = e.target;
+
+            // save position of focused text input when keyboard starts to move
+            layout.value = input.value;
+            // save current scroll position - when keyboard will hide we'll reuse
+            // this value to achieve smooth hide effect
+            scrollBeforeKeyboardMovement.value = position.value;
           }
-        : {},
-      [height, maybeScroll, disableScrollOnKeyboardHide, enabled],
+
+          if (focusWasChanged && !keyboardWillAppear.value) {
+            // update position on scroll value, so `onEnd` handler
+            // will pick up correct values
+            position.value += maybeScroll(e.height, true);
+          }
+        },
+        onMove: (e) => {
+          "worklet";
+
+          currentKeyboardFrameHeight.value = e.height;
+
+          // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
+          if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
+            maybeScroll(e.height);
+          }
+        },
+        onEnd: (e) => {
+          "worklet";
+
+          keyboardHeight.value = e.height;
+          scrollPosition.value = position.value;
+        },
+      },
+      [height, maybeScroll, disableScrollOnKeyboardHide],
     );
 
     useAnimatedReaction(
@@ -303,16 +300,19 @@ const KeyboardAwareScrollView = forwardRef<
     );
 
     const view = useAnimatedStyle(
-      () => ({
-        // animations become laggy 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,
-      }),
-      [],
+      () =>
+        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,
+            }
+          : {},
+      [enabled],
     );
 
     return (

package/src/components/KeyboardStickyView/index.tsx

@@ -8,7 +8,7 @@ import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller
 
 import type { View, ViewProps } from "react-native";
 
-type KeyboardStickyViewProps = {
+export type KeyboardStickyViewProps = {
   /**
    * Specify additional offset to the view for given keyboard state.
    */

package/src/components/KeyboardToolbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
 import {
@@ -13,7 +13,7 @@ import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
 
-import type { KeyboardToolbarTheme } from "./types";
+import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
 
 export type KeyboardToolbarProps = {
@@ -32,6 +32,26 @@ export type KeyboardToolbarProps = {
    * and want to show only `Done` button. Default to `true`.
    */
   showArrows?: boolean;
+  /**
+   * A callback that is called when the user presses the next button along with the default action.
+   */
+  onNextCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the previous button along with the default action.
+   */
+  onPrevCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the done button along with the default action.
+   */
+  onDoneCallback?: () => void;
+  /**
+   * A component that applies blur effect to the toolbar.
+   */
+  blur?: JSX.Element | null;
+  /**
+   * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+   */
+  opacity?: HEX;
 };
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
 const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
@@ -40,6 +60,7 @@ const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
 const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 const KEYBOARD_TOOLBAR_HEIGHT = 42;
+const DEFAULT_OPACITY: HEX = "FF";
 const offset = { closed: KEYBOARD_TOOLBAR_HEIGHT };
 
 const dismissKeyboard = () => KeyboardController.dismiss();
@@ -57,6 +78,11 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   button,
   icon,
   showArrows = true,
+  onNextCallback,
+  onPrevCallback,
+  onDoneCallback,
+  blur = null,
+  opacity = DEFAULT_OPACITY,
 }) => {
   const colorScheme = useColorScheme();
   const [inputs, setInputs] = useState({
@@ -81,24 +107,38 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
     () => [
       styles.toolbar,
       {
-        backgroundColor: theme[colorScheme].background,
+        backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
     ],
-    [colorScheme, theme],
+    [colorScheme, opacity, theme],
   );
   const ButtonContainer = button || Button;
   const IconContainer = icon || Arrow;
 
+  const onPressNext = useCallback(() => {
+    goToNextField();
+    onNextCallback?.();
+  }, [onNextCallback]);
+  const onPressPrev = useCallback(() => {
+    goToPrevField();
+    onPrevCallback?.();
+  }, [onPrevCallback]);
+  const onPressDone = useCallback(() => {
+    dismissKeyboard();
+    onDoneCallback?.();
+  }, [onDoneCallback]);
+
   return (
     <KeyboardStickyView offset={offset}>
       <View style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+        {blur}
         {showArrows && (
           <>
             <ButtonContainer
               accessibilityLabel="Previous"
               accessibilityHint="Will move focus to previous field"
               disabled={isPrevDisabled}
-              onPress={goToPrevField}
+              onPress={onPressPrev}
               testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
               theme={theme}
             >
@@ -112,7 +152,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
               accessibilityLabel="Next"
               accessibilityHint="Will move focus to next field"
               disabled={isNextDisabled}
-              onPress={goToNextField}
+              onPress={onPressNext}
               testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
               theme={theme}
             >
@@ -131,7 +171,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
         <ButtonContainer
           accessibilityLabel="Done"
           accessibilityHint="Will close the keyboard"
-          onPress={dismissKeyboard}
+          onPress={onPressDone}
           testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
           rippleRadius={28}
           style={styles.doneButtonContainer}

package/src/components/KeyboardToolbar/types.ts

@@ -6,7 +6,7 @@ type Theme = {
   /** Color for arrow when it's disabled */
   disabled: ColorValue;
   /** Keyboard toolbar background color */
-  background: ColorValue;
+  background: string;
   /** Color for ripple effect (on button touch) on Android */
   ripple: ColorValue;
 };
@@ -14,3 +14,27 @@ export type KeyboardToolbarTheme = {
   light: Theme;
   dark: Theme;
 };
+type HexSymbol =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F"
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f";
+export type HEX = `${HexSymbol}${HexSymbol}`;

package/src/components/index.ts

@@ -5,4 +5,7 @@ export {
   default as KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
 } from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
 export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/src/index.ts

@@ -13,4 +13,9 @@ export {
   KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
 } from "./components";
-export type { KeyboardToolbarProps } from "./components";
+export type {
+  KeyboardAvoidingViewProps,
+  KeyboardStickyViewProps,
+  KeyboardAwareScrollViewProps,
+  KeyboardToolbarProps,
+} from "./components";