diff --git a/docs/docs/api/components/keyboard-toolbar/index.mdx b/docs/docs/api/components/keyboard-toolbar/index.mdx index 504d33428a..aa866b0e88 100644 --- a/docs/docs/api/components/keyboard-toolbar/index.mdx +++ b/docs/docs/api/components/keyboard-toolbar/index.mdx @@ -44,6 +44,10 @@ import toolbar from "./toolbar.lottie.json"; Inherits [View Props](https://reactnative.dev/docs/view#props). +### [`KeyboardStickyViewProps`](./keyboard-sticky-view) + +Inherits [KeyboardStickyViewProps](./keyboard-sticky-view). + ### `button` This property allows to render custom touchable component for next, previous and done button. diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx index 19e4f40b64..1dcb8f586c 100644 --- a/src/components/KeyboardToolbar/index.tsx +++ b/src/components/KeyboardToolbar/index.tsx @@ -11,6 +11,7 @@ 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"; @@ -53,7 +54,7 @@ export type KeyboardToolbarProps = Omit< * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`. */ opacity?: HEX; -}; +} & Pick; const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar"; const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`; @@ -63,7 +64,6 @@ 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 }; /** * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and @@ -81,6 +81,7 @@ const KeyboardToolbar: React.FC = ({ onDoneCallback, blur = null, opacity = DEFAULT_OPACITY, + offset: { closed = 0, opened = 0 } = {}, ...rest }) => { const colorScheme = useColorScheme(); @@ -111,6 +112,10 @@ const KeyboardToolbar: React.FC = ({ ], [colorScheme, opacity, theme], ); + const offset = useMemo( + () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }), + [closed, opened], + ); const ButtonContainer = button || Button; const IconContainer = icon || Arrow;