diff --git a/docs/docs/api/components/keyboard-sticky-view/index.mdx b/docs/docs/api/components/keyboard-sticky-view/index.mdx index 6cd97ec23..f19694188 100644 --- a/docs/docs/api/components/keyboard-sticky-view/index.mdx +++ b/docs/docs/api/components/keyboard-sticky-view/index.mdx @@ -57,7 +57,11 @@ const StickyFooter = () => { ## Props -### offset +### `enabled` + +A boolean prop indicating whether `KeyboardStickyView` is enabled or disabled. If disabled then view will be moved to its initial position (as keyboard would be closed) and will not react on keyboard movements. Default is `true`. + +### `offset` An object containing next properties: diff --git a/src/components/KeyboardStickyView/index.tsx b/src/components/KeyboardStickyView/index.tsx index 387062e0c..5057cb016 100644 --- a/src/components/KeyboardStickyView/index.tsx +++ b/src/components/KeyboardStickyView/index.tsx @@ -22,6 +22,9 @@ export type KeyboardStickyViewProps = { */ opened?: number; }; + + /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */ + enabled?: boolean; } & ViewProps; const KeyboardStickyView = forwardRef< @@ -29,7 +32,13 @@ const KeyboardStickyView = forwardRef< React.PropsWithChildren >( ( - { children, offset: { closed = 0, opened = 0 } = {}, style, ...props }, + { + children, + offset: { closed = 0, opened = 0 } = {}, + style, + enabled = true, + ...props + }, ref, ) => { const { height, progress } = useReanimatedKeyboardAnimation(); @@ -38,9 +47,9 @@ const KeyboardStickyView = forwardRef< const offset = interpolate(progress.value, [0, 1], [closed, opened]); return { - transform: [{ translateY: height.value + offset }], + transform: [{ translateY: enabled ? height.value + offset : closed }], }; - }, [closed, opened]); + }, [closed, opened, enabled]); const styles = useMemo( () => [style, stickyViewStyle], diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx index 1dcb8f586..63402e108 100644 --- a/src/components/KeyboardToolbar/index.tsx +++ b/src/components/KeyboardToolbar/index.tsx @@ -54,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; +} & Pick; const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar"; const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`; @@ -82,6 +82,7 @@ const KeyboardToolbar: React.FC = ({ blur = null, opacity = DEFAULT_OPACITY, offset: { closed = 0, opened = 0 } = {}, + enabled = true, ...rest }) => { const colorScheme = useColorScheme(); @@ -151,7 +152,7 @@ const KeyboardToolbar: React.FC = ({ ); return ( - + {blur} {showArrows && (