react-native-keyboard-controller 1.18.6 → 1.19.1

package/lib/module/types/module.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["module.ts"],"sourcesContent":["import type { EmitterSubscription, TextInputProps } from \"react-native\";\n\n// Event module declarations\nexport type KeyboardControllerEvents =\n  | \"keyboardWillShow\"\n  | \"keyboardDidShow\"\n  | \"keyboardWillHide\"\n  | \"keyboardDidHide\";\nexport type KeyboardEventData = {\n  /** Height of the keyboard. */\n  height: number;\n  /** Duration of the keyboard animation. */\n  duration: number;\n  /** Timestamp of the last keyboard event. */\n  timestamp: number;\n  /** Tag of the focused `TextInput`. */\n  target: number;\n  /** `keyboardType` property from focused `TextInput`. */\n  type: NonNullable<TextInputProps[\"keyboardType\"]>;\n  /** Keyboard appearance. Can be one of `dark` or `light`. */\n  appearance: \"dark\" | \"light\";\n};\n/**\n * An object that represent current keyboard state.\n */\nexport type KeyboardState = {\n  /** Whether the keyboard is currently visible. */\n  isVisible: boolean;\n} & KeyboardEventData;\nexport type KeyboardEventsModule = {\n  /**\n   * The `addListener` function connects a JavaScript function to an identified native\n   * keyboard notification event.\n   *\n   * This function then returns the reference to the listener.\n   *\n   * `name` is the string that identifies the event you're listening for. This\n   * can be any of the following:\n   *\n   * - `keyboardWillShow`;\n   * - `keyboardDidShow`;\n   * - `keyboardWillHide`;\n   * - `keyboardDidHide`.\n   */\n  addListener: (\n    name: KeyboardControllerEvents,\n    cb: (e: KeyboardEventData) => void,\n  ) => EmitterSubscription;\n};\nexport type Direction = \"next\" | \"prev\" | \"current\";\nexport type DismissOptions = {\n  /**\n   * A boolean property indicating whether focus should be kept on the input after dismissing the keyboard. Default is `false`.\n   */\n  keepFocus: boolean;\n};\nexport type KeyboardControllerModule = {\n  // android only\n  /**\n   * Sets default `windowSoftInputMode` (the one that declared in `AndroidManifest.xml`).\n   *\n   * @platform android\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setdefaultmode-|docs} page for more details.\n   */\n  setDefaultMode: () => void;\n  /**\n   * Changes `windowSoftInputMode` on Android.\n   *\n   * @platform android\n   * @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.\n   */\n  setInputMode: (mode: number) => void;\n  // ios only\n  /**\n   * A method that preloads the keyboard. It's useful when you want to avoid a delay when the user focuses the first input.\n   *\n   * @platform ios\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#preload-|docs} page for more details.\n   */\n  preload: () => void;\n  // all platforms\n  /**\n   * Dismisses the active keyboard. Removes a focus by default, but allows to pass `{keepFocus: true}` to keep focus.\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#dismiss|docs} page for more details.\n   */\n  dismiss: (options?: DismissOptions) => Promise<void>;\n  /**\n   * Moves focus to the specified direction (`next`, `prev` or `current` to restore a focus).\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setfocusto|docs} page for more details.\n   */\n  setFocusTo: (direction: Direction) => void;\n  /**\n   * Whether the keyboard is fully visible.\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#isvisible|docs} page for more details.\n   */\n  isVisible: () => boolean;\n  /**\n   * Method that returns current keyboard state.\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#state|docs} page for more details.\n   */\n  state: () => KeyboardEventData;\n};\nexport type KeyboardControllerNativeModule = {\n  // android only\n  setDefaultMode: () => void;\n  setInputMode: (mode: number) => void;\n  // ios only\n  preload: () => void;\n  // all platforms\n  dismiss: (keepFocus: boolean) => void;\n  setFocusTo: (direction: Direction) => void;\n  // native event module stuff\n  addListener: (eventName: string) => void;\n  removeListeners: (count: number) => void;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["module.ts"],"sourcesContent":["import type { EmitterSubscription, TextInputProps } from \"react-native\";\n\n// Event module declarations\nexport type KeyboardControllerEvents =\n  | \"keyboardWillShow\"\n  | \"keyboardDidShow\"\n  | \"keyboardWillHide\"\n  | \"keyboardDidHide\";\nexport type KeyboardEventData = {\n  /** Height of the keyboard. */\n  height: number;\n  /** Duration of the keyboard animation. */\n  duration: number;\n  /** Timestamp of the last keyboard event. */\n  timestamp: number;\n  /** Tag of the focused `TextInput`. */\n  target: number;\n  /** `keyboardType` property from focused `TextInput`. */\n  type: NonNullable<TextInputProps[\"keyboardType\"]>;\n  /** Keyboard appearance. Can be one of `dark` or `light`. */\n  appearance: \"dark\" | \"light\";\n};\n/**\n * An object that represent current keyboard state.\n */\nexport type KeyboardState = {\n  /** Whether the keyboard is currently visible. */\n  isVisible: boolean;\n} & KeyboardEventData;\nexport type KeyboardEventsModule = {\n  /**\n   * The `addListener` function connects a JavaScript function to an identified native\n   * keyboard notification event.\n   *\n   * This function then returns the reference to the listener.\n   *\n   * `name` is the string that identifies the event you're listening for. This\n   * can be any of the following:\n   *\n   * - `keyboardWillShow`;\n   * - `keyboardDidShow`;\n   * - `keyboardWillHide`;\n   * - `keyboardDidHide`.\n   */\n  addListener: (\n    name: KeyboardControllerEvents,\n    cb: (e: KeyboardEventData) => void,\n  ) => EmitterSubscription;\n};\nexport type Direction = \"next\" | \"prev\" | \"current\";\nexport type DismissOptions = {\n  /**\n   * A boolean property indicating whether focus should be kept on the input after dismissing the keyboard. Default is `false`.\n   */\n  keepFocus: boolean;\n  /**\n   * A boolean property controlling whether dismissal should be animated. Default is `true`.\n   */\n  animated: boolean;\n};\nexport type KeyboardControllerModule = {\n  // android only\n  /**\n   * Sets default `windowSoftInputMode` (the one that declared in `AndroidManifest.xml`).\n   *\n   * @platform android\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setdefaultmode-|docs} page for more details.\n   */\n  setDefaultMode: () => void;\n  /**\n   * Changes `windowSoftInputMode` on Android.\n   *\n   * @platform android\n   * @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.\n   */\n  setInputMode: (mode: number) => void;\n  // ios only\n  /**\n   * A method that preloads the keyboard. It's useful when you want to avoid a delay when the user focuses the first input.\n   *\n   * @platform ios\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#preload-|docs} page for more details.\n   */\n  preload: () => void;\n  // all platforms\n  /**\n   * Dismisses the active keyboard. Removes a focus by default, but allows to pass `{keepFocus: true}` to keep focus.\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#dismiss|docs} page for more details.\n   */\n  dismiss: (options?: DismissOptions) => Promise<void>;\n  /**\n   * Moves focus to the specified direction (`next`, `prev` or `current` to restore a focus).\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#setfocusto|docs} page for more details.\n   */\n  setFocusTo: (direction: Direction) => void;\n  /**\n   * Whether the keyboard is fully visible.\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#isvisible|docs} page for more details.\n   */\n  isVisible: () => boolean;\n  /**\n   * Method that returns current keyboard state.\n   *\n   * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#state|docs} page for more details.\n   */\n  state: () => KeyboardEventData;\n};\nexport type KeyboardControllerNativeModule = {\n  // android only\n  setDefaultMode: () => void;\n  setInputMode: (mode: number) => void;\n  // ios only\n  preload: () => void;\n  // all platforms\n  dismiss: (keepFocus: boolean, animated: boolean) => void;\n  setFocusTo: (direction: Direction) => void;\n  // native event module stuff\n  addListener: (eventName: string) => void;\n  removeListeners: (count: number) => void;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/typescript/components/KeyboardToolbar/compound/components/Background.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { ReactNode } from "react";
+declare const Background: React.FC<{
+    children: ReactNode;
+}>;
+export default Background;

package/lib/typescript/components/KeyboardToolbar/compound/components/Content.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+declare const Content: React.FC<ViewProps & {
+    children?: ReactNode;
+}>;
+export default Content;

package/lib/typescript/components/KeyboardToolbar/compound/components/Done.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ButtonSubProps } from "./types";
+import type { ReactNode } from "react";
+declare const Done: React.FC<Omit<ButtonSubProps, "icon"> & {
+    text?: ReactNode;
+}>;
+export default Done;

package/lib/typescript/components/KeyboardToolbar/compound/components/Next.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonSubProps } from "./types";
+declare const Next: React.FC<ButtonSubProps>;
+export default Next;

package/lib/typescript/components/KeyboardToolbar/compound/components/Prev.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonSubProps } from "./types";
+declare const Prev: React.FC<ButtonSubProps>;
+export default Prev;

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

@@ -0,0 +1,5 @@
+export { default as Background } from "./Background";
+export { default as Content } from "./Content";
+export { default as Done } from "./Done";
+export { default as Next } from "./Next";
+export { default as Prev } from "./Prev";

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

@@ -0,0 +1,14 @@
+import type Arrow from "../../Arrow";
+import type Button from "../../Button";
+import type { ReactNode } from "react";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
+export type ButtonSubProps = {
+    children?: ReactNode;
+    onPress?: (event: GestureResponderEvent) => void;
+    disabled?: boolean;
+    testID?: string;
+    rippleRadius?: number;
+    style?: ViewStyle;
+    button?: typeof Button;
+    icon?: typeof Arrow;
+};

package/lib/typescript/components/KeyboardToolbar/compound/context.d.ts

@@ -0,0 +1,9 @@
+import type { KeyboardToolbarTheme } from "../types";
+type ToolbarContextType = {
+    theme: KeyboardToolbarTheme;
+    isPrevDisabled: boolean;
+    isNextDisabled: boolean;
+};
+export declare const ToolbarContext: import("react").Context<ToolbarContextType | undefined>;
+export declare const useToolbarContext: () => ToolbarContextType;
+export {};

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

@@ -1,56 +1,7 @@
 import React from "react";
-import Arrow from "./Arrow";
-import Button from "./Button";
 import { colors } from "./colors";
-import type { HEX, KeyboardToolbarTheme } from "./types";
-import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
-import type { ReactNode } from "react";
-import type { GestureResponderEvent, ViewProps } from "react-native";
-type SafeAreaInsets = {
-    left: number;
-    right: number;
-};
-export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "children"> & {
-    /** An element that is shown in the middle of the toolbar. */
-    content?: React.JSX.Element | null;
-    /** A set of dark/light colors consumed by toolbar component. */
-    theme?: KeyboardToolbarTheme;
-    /** Custom text for done button. */
-    doneText?: ReactNode;
-    /** Custom touchable component for toolbar (used for prev/next/done buttons). */
-    button?: typeof Button;
-    /** Custom icon component used to display next/prev buttons. */
-    icon?: typeof Arrow;
-    /**
-     * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
-     * 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?: (event: GestureResponderEvent) => void;
-    /**
-     * A callback that is called when the user presses the previous button along with the default action.
-     */
-    onPrevCallback?: (event: GestureResponderEvent) => void;
-    /**
-     * A callback that is called when the user presses the done button along with the default action.
-     */
-    onDoneCallback?: (event: GestureResponderEvent) => void;
-    /**
-     * A component that applies blur effect to the toolbar.
-     */
-    blur?: React.JSX.Element | null;
-    /**
-     * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
-     */
-    opacity?: HEX;
-    /**
-     * A object containing `left`/`right` properties. Used to specify proper container padding in landscape mode.
-     */
-    insets?: SafeAreaInsets;
-} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
+import { Background, Content, Done, Next, Prev } from "./compound/components";
+import type { KeyboardToolbarProps } from "./types";
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` buttons from left and
  * `Done` button from the right (to dismiss the keyboard). Allows to add customizable content (yours UI elements) in the middle.
@@ -60,9 +11,17 @@ export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "childre
  * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-toolbar|Documentation} page for more details.
  * @example
  * ```tsx
- * <KeyboardToolbar doneText="Close" />
+ * <KeyboardToolbar>
+ *   <KeyboardToolbar.Done text="Close" />
+ * </KeyboardToolbar>
  * ```
  */
-declare const KeyboardToolbar: React.FC<KeyboardToolbarProps>;
-export { colors as DefaultKeyboardToolbarTheme };
+declare const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
+    Background: typeof Background;
+    Content: typeof Content;
+    Prev: typeof Prev;
+    Next: typeof Next;
+    Done: typeof Done;
+};
+export { colors as DefaultKeyboardToolbarTheme, KeyboardToolbarProps };
 export default KeyboardToolbar;

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

@@ -1,12 +1,16 @@
-import type { ColorValue } from "react-native";
+import type Arrow from "./Arrow";
+import type Button from "./Button";
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+import type { ReactNode } from "react";
+import type { ColorValue, GestureResponderEvent, ViewProps } from "react-native";
 type Theme = {
-    /** Color for arrow when it's enabled */
+    /** Color for arrow when it's enabled. */
     primary: ColorValue;
-    /** Color for arrow when it's disabled */
+    /** Color for arrow when it's disabled. */
     disabled: ColorValue;
-    /** Keyboard toolbar background color */
+    /** Keyboard toolbar background color. */
     background: string;
-    /** Color for ripple effect (on button touch) on Android */
+    /** Color for ripple effect (on button touch) on Android. */
     ripple: ColorValue;
 };
 export type KeyboardToolbarTheme = {
@@ -15,4 +19,87 @@ export type KeyboardToolbarTheme = {
 };
 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}`;
+type SafeAreaInsets = {
+    left: number;
+    right: number;
+};
+export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "children"> & {
+    /**
+     * An element that is shown in the middle of the toolbar.
+     *
+     * @deprecated Use compound API with `<KeyboardToolbar.Content />` component instead.
+     */
+    content?: React.JSX.Element | null;
+    /** A set of dark/light colors consumed by toolbar component. */
+    theme?: KeyboardToolbarTheme;
+    /**
+     * Custom text for done button.
+     *
+     * @deprecated Use compound API with `<KeyboardToolbar.Done />` component and `text` prop instead.
+     */
+    doneText?: ReactNode;
+    /**
+     * Custom touchable component for toolbar (used for prev/next/done buttons).
+     *
+     * @deprecated Use `button` property for corresponding element instead:
+     * ```tsx
+     * <KeyboardToolbar>
+     *   <KeyboardToolbar.Prev button={MyCustomButton} />
+     * </KeyboardToolbar>
+     * ```.
+     */
+    button?: typeof Button;
+    /**
+     * Custom icon component used to display next/prev buttons.
+     *
+     * @deprecated Use `icon` property for corresponding element instead:
+     * ```tsx
+     * <KeyboardToolbar>
+     *   <KeyboardToolbar.Prev icon={MyCustomIcon} />
+     * </KeyboardToolbar>
+     * ```.
+     */
+    icon?: typeof Arrow;
+    /**
+     * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
+     * and want to show only `Done` button. Default to `true`.
+     *
+     * @deprecated Use compound API and conditional rendering for `<KeyboardToolbar.Next />` and `<KeyboardToolbar.Prev />`.
+     */
+    showArrows?: boolean;
+    /**
+     * A callback that is called when the user presses the next button along with the default action.
+     *
+     * @deprecated Use compound API with `<KeyboardToolbar.Next />` and `onPress` callback instead.
+     */
+    onNextCallback?: (event: GestureResponderEvent) => void;
+    /**
+     * A callback that is called when the user presses the previous button along with the default action.
+     *
+     * @deprecated Use compound API with `<KeyboardToolbar.Prev />` and `onPress` callback instead.
+     */
+    onPrevCallback?: (event: GestureResponderEvent) => void;
+    /**
+     * A callback that is called when the user presses the done button along with the default action.
+     *
+     * @deprecated Use compound API with `<KeyboardToolbar.Done />` and `onPress` callback instead.
+     */
+    onDoneCallback?: (event: GestureResponderEvent) => void;
+    /**
+     * A component that applies blur effect to the toolbar.
+     *
+     * @deprecated Use compound API and `<KeyboardToolbar.Effect />` instead.
+     */
+    blur?: React.JSX.Element | null;
+    /**
+     * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+     */
+    opacity?: HEX;
+    /**
+     * A object containing `left`/`right` properties. Used to specify proper container padding in landscape mode.
+     */
+    insets?: SafeAreaInsets;
+    /** JSX children in case if compound API is used. */
+    children?: ReactNode;
+} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 export {};

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

@@ -4,7 +4,7 @@ export interface Spec extends TurboModule {
     setInputMode(mode: number): void;
     setDefaultMode(): void;
     preload(): void;
-    dismiss(keepFocus: boolean): void;
+    dismiss(keepFocus: boolean, animated: boolean): void;
     setFocusTo(direction: string): void;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;

package/lib/typescript/types/module.d.ts

@@ -44,6 +44,10 @@ export type DismissOptions = {
      * A boolean property indicating whether focus should be kept on the input after dismissing the keyboard. Default is `false`.
      */
     keepFocus: boolean;
+    /**
+     * A boolean property controlling whether dismissal should be animated. Default is `true`.
+     */
+    animated: boolean;
 };
 export type KeyboardControllerModule = {
     /**
@@ -96,7 +100,7 @@ export type KeyboardControllerNativeModule = {
     setDefaultMode: () => void;
     setInputMode: (mode: number) => void;
     preload: () => void;
-    dismiss: (keepFocus: boolean) => void;
+    dismiss: (keepFocus: boolean, animated: boolean) => void;
     setFocusTo: (direction: Direction) => void;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.18.6",
+  "version": "1.19.1",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,7 +41,7 @@
     "typescript": "tsc --noEmit --project tsconfig.build.json",
     "lint": "eslint --quiet \"**/*.{js,ts,tsx}\"",
     "lint-clang": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm | grep -v -e Pods -e build | xargs clang-format -i -n --Werror",
-    "prepare": "bob build",
+    "prepare": "bob build > /dev/null 2>&1",
     "release": "release-it",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
@@ -85,8 +85,8 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@react-native/babel-preset": "0.78.0",
-    "@react-native/eslint-config": "0.78.0",
+    "@react-native/babel-preset": "0.81.4",
+    "@react-native/eslint-config": "0.81.4",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.13",
@@ -111,13 +111,13 @@
     "jest": "^29.6.3",
     "pod-install": "^0.1.0",
     "prettier": "^2.8.8",
-    "react": "19.0.0",
-    "react-native": "0.78.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-reanimated": "3.17.0",
+    "react-native-reanimated": "3.19.2",
     "react-test-renderer": "19.0.0",
     "release-it": "^14.2.2",
-    "typescript": "5.6.3"
+    "typescript": "5.8.3"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/KeyboardToolbar/compound/components/Background.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import type { ReactNode } from "react";
+
+const Background: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <>{children}</>
+);
+
+export default Background;

package/src/components/KeyboardToolbar/compound/components/Content.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+import { TEST_ID_KEYBOARD_TOOLBAR_CONTENT } from "../../constants";
+
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+
+const Content: React.FC<ViewProps & { children?: ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+});
+
+export default Content;

package/src/components/KeyboardToolbar/compound/components/Done.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { useCallback, useMemo } from "react";
+import { StyleSheet, Text } from "react-native";
+
+import { useKeyboardState } from "../../../../hooks";
+import { KeyboardController } from "../../../../module";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_DONE } from "../../constants";
+import { useToolbarContext } from "../context";
+
+import type { ButtonSubProps } from "./types";
+import type { ReactNode } from "react";
+import type { GestureResponderEvent } from "react-native";
+
+const Done: React.FC<Omit<ButtonSubProps, "icon"> & { text?: ReactNode }> = ({
+  children,
+  onPress,
+  rippleRadius = 28,
+  text,
+  button: ButtonContainer = Button,
+}) => {
+  const colorScheme = useKeyboardState((state) => state.appearance);
+  const context = useToolbarContext();
+  const { theme } = context;
+
+  const doneStyle = useMemo(
+    () => [styles.doneButton, { color: theme[colorScheme].primary }],
+    [colorScheme, theme],
+  );
+
+  const onPressDone = useCallback(
+    (event: GestureResponderEvent) => {
+      onPress?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        KeyboardController.dismiss();
+      }
+    },
+    [onPress],
+  );
+
+  return (
+    <ButtonContainer
+      accessibilityHint="Closes the keyboard"
+      accessibilityLabel="Done"
+      rippleRadius={rippleRadius}
+      style={styles.doneButtonContainer}
+      testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
+      theme={theme}
+      onPress={onPressDone}
+    >
+      <Text maxFontSizeMultiplier={1.3} style={doneStyle}>
+        {children ?? text ?? "Done"}
+      </Text>
+    </ButtonContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  doneButton: {
+    fontWeight: "600",
+    fontSize: 15,
+  },
+  doneButtonContainer: {
+    marginRight: 16,
+    marginLeft: 8,
+  },
+});
+
+export default Done;

package/src/components/KeyboardToolbar/compound/components/Next.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+
+import { KeyboardController } from "../../../../module";
+import Arrow from "../../Arrow";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_NEXT } from "../../constants";
+import { useToolbarContext } from "../context";
+
+import type { ButtonSubProps } from "./types";
+import type { GestureResponderEvent } from "react-native";
+
+const Next: React.FC<ButtonSubProps> = ({
+  children,
+  onPress,
+  disabled,
+  rippleRadius,
+  style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow,
+}) => {
+  const context = useToolbarContext();
+  const { theme, isNextDisabled } = context;
+
+  const isDisabled = disabled ?? isNextDisabled;
+
+  const onPressNext = useCallback(
+    (event: GestureResponderEvent) => {
+      onPress?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        KeyboardController.setFocusTo("next");
+      }
+    },
+    [onPress],
+  );
+
+  return (
+    <ButtonContainer
+      accessibilityHint="Moves focus to the next field"
+      accessibilityLabel="Next"
+      disabled={isDisabled}
+      rippleRadius={rippleRadius}
+      style={style}
+      testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
+      theme={theme}
+      onPress={onPressNext}
+    >
+      {children ?? (
+        <IconContainer disabled={isDisabled} theme={theme} type="next" />
+      )}
+    </ButtonContainer>
+  );
+};
+
+export default Next;

package/src/components/KeyboardToolbar/compound/components/Prev.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useCallback } from "react";
+
+import { KeyboardController } from "../../../../module";
+import Arrow from "../../Arrow";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS } from "../../constants";
+import { useToolbarContext } from "../context";
+
+import type { ButtonSubProps } from "./types";
+import type { GestureResponderEvent } from "react-native";
+
+const Prev: React.FC<ButtonSubProps> = ({
+  children,
+  onPress: onPressCallback,
+  disabled,
+  rippleRadius,
+  style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow,
+}) => {
+  const context = useToolbarContext();
+  const { theme, isPrevDisabled } = context;
+
+  const isDisabled = disabled ?? isPrevDisabled;
+
+  const onPressPrev = useCallback(
+    (event: GestureResponderEvent) => {
+      onPressCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        KeyboardController.setFocusTo("prev");
+      }
+    },
+    [onPressCallback],
+  );
+
+  return (
+    <ButtonContainer
+      accessibilityHint="Moves focus to the previous field"
+      accessibilityLabel="Previous"
+      disabled={isDisabled}
+      rippleRadius={rippleRadius}
+      style={style}
+      testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
+      theme={theme}
+      onPress={onPressPrev}
+    >
+      {children ?? (
+        <IconContainer disabled={isDisabled} theme={theme} type="prev" />
+      )}
+    </ButtonContainer>
+  );
+};
+
+export default Prev;

package/src/components/KeyboardToolbar/compound/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Background } from "./Background";
+export { default as Content } from "./Content";
+export { default as Done } from "./Done";
+export { default as Next } from "./Next";
+export { default as Prev } from "./Prev";

package/src/components/KeyboardToolbar/compound/components/types.ts

@@ -0,0 +1,15 @@
+import type Arrow from "../../Arrow";
+import type Button from "../../Button";
+import type { ReactNode } from "react";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
+
+export type ButtonSubProps = {
+  children?: ReactNode;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  testID?: string;
+  rippleRadius?: number;
+  style?: ViewStyle;
+  button?: typeof Button;
+  icon?: typeof Arrow;
+};

package/src/components/KeyboardToolbar/compound/context.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+
+import type { KeyboardToolbarTheme } from "../types";
+
+type ToolbarContextType = {
+  theme: KeyboardToolbarTheme;
+  isPrevDisabled: boolean;
+  isNextDisabled: boolean;
+};
+
+export const ToolbarContext = createContext<ToolbarContextType | undefined>(
+  undefined,
+);
+
+export const useToolbarContext = () => {
+  const context = useContext(ToolbarContext);
+
+  if (!context) {
+    throw new Error(
+      "KeyboardToolbar.* component must be used inside <KeyboardToolbar>",
+    );
+  }
+
+  return context;
+};