From c3c4a52302e98ea87a1de32ed6ef4e56c86230e2 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 2 Dec 2024 17:59:08 +0100 Subject: [PATCH 1/5] feat: `enabled` prop for `KeyboardStickyView` --- .../api/components/keyboard-sticky-view/index.mdx | 6 +++++- src/components/KeyboardStickyView/index.tsx | 15 ++++++++++++--- 2 files changed, 17 insertions(+), 4 deletions(-) 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..096586875 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, + ...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 : 0 }], }; - }, [closed, opened]); + }, [closed, opened, enabled]); const styles = useMemo( () => [style, stickyViewStyle], From 373da389c9be9af5faceb5d8bbd611ec3b5bb05a Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 2 Dec 2024 18:40:08 +0100 Subject: [PATCH 2/5] fix: enable `KeyboardStickyView` by default --- src/components/KeyboardStickyView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/KeyboardStickyView/index.tsx b/src/components/KeyboardStickyView/index.tsx index 096586875..16696e717 100644 --- a/src/components/KeyboardStickyView/index.tsx +++ b/src/components/KeyboardStickyView/index.tsx @@ -36,7 +36,7 @@ const KeyboardStickyView = forwardRef< children, offset: { closed = 0, opened = 0 } = {}, style, - enabled, + enabled = true, ...props }, ref, From 38cc0f2e38bffa7b9afcf8d5b85c1020105aedf4 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 2 Dec 2024 18:41:45 +0100 Subject: [PATCH 3/5] fix: pass `enabled` to `KeyboardToolbar` too --- src/components/KeyboardToolbar/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx index 1dcb8f586..eb70882c2 100644 --- a/src/components/KeyboardToolbar/index.tsx +++ b/src/components/KeyboardToolbar/index.tsx @@ -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 && ( From 440a7676be9a8bc2c3cb96f0eab9b193e6baf605 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 2 Dec 2024 18:48:32 +0100 Subject: [PATCH 4/5] fix: TS --- src/components/KeyboardToolbar/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx index eb70882c2..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`; @@ -152,7 +152,7 @@ const KeyboardToolbar: React.FC = ({ ); return ( - + {blur} {showArrows && ( From f4fe9258590dd6a5558b7c7a81cc85887a2ba501 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 2 Dec 2024 19:46:00 +0100 Subject: [PATCH 5/5] fix: take `closed` offset into consideration when view disabled --- src/components/KeyboardStickyView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/KeyboardStickyView/index.tsx b/src/components/KeyboardStickyView/index.tsx index 16696e717..5057cb016 100644 --- a/src/components/KeyboardStickyView/index.tsx +++ b/src/components/KeyboardStickyView/index.tsx @@ -47,7 +47,7 @@ const KeyboardStickyView = forwardRef< const offset = interpolate(progress.value, [0, 1], [closed, opened]); return { - transform: [{ translateY: enabled ? height.value + offset : 0 }], + transform: [{ translateY: enabled ? height.value + offset : closed }], }; }, [closed, opened, enabled]);