Skip to content

Commit 08f9861

Browse files
authored
feat: enabled prop for KeyboardStickyView (#717)
## 📜 Description Added `enabled` property for `KeyboardStickyView` component. Also added this property to `KeyboardToolbar`. ## 💡 Motivation and Context On top of what I remember this is iOS itself moves `KeyboardToolbar` (i. e. it's not interactive keyboard dismissal). So to fix the problem I decided to add `enabled` property. Using this property you can assure that views on previous screens are not animating/don't require additional style/layout computation. A similar approach was used by `KeyboardAvoidingView`/`KeyboardAwareScrollView` components. > Even though if we fixed the problem of keeping `KeyboardToolbar` toughly bind to keyboard frame - on interactive gesture we would still see a `KeyboardToolbar` without a keyboard. So `enabled` property is the way to go at the moment. Closes #716 ## 📢 Changelog <!-- High level overview of important changes --> <!-- For example: fixed status bar manipulation; added new types declarations; --> <!-- If your changes don't affect one of platform/language below - then remove this platform/language --> ### JS - added `enabled` property for `KeyboardStickyView`; - added `enabled` property for `KeyboardToolbar`; ### Docs - update documentation to reflect new property; ## 🤔 How Has This Been Tested? Tested on CI and by external testers. ## 📸 Screenshots (if appropriate): https://github.com/user-attachments/assets/01f80257-e56c-4779-ac85-e308cb6b7235 ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent 5ded2a7 commit 08f9861

File tree

3 files changed

+20
-6
lines changed

3 files changed

+20
-6
lines changed

docs/docs/api/components/keyboard-sticky-view/index.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ const StickyFooter = () => {
5757

5858
## Props
5959

60-
### offset
60+
### `enabled`
61+
62+
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`.
63+
64+
### `offset`
6165

6266
An object containing next properties:
6367

src/components/KeyboardStickyView/index.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,23 @@ export type KeyboardStickyViewProps = {
2222
*/
2323
opened?: number;
2424
};
25+
26+
/** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
27+
enabled?: boolean;
2528
} & ViewProps;
2629

2730
const KeyboardStickyView = forwardRef<
2831
View,
2932
React.PropsWithChildren<KeyboardStickyViewProps>
3033
>(
3134
(
32-
{ children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
35+
{
36+
children,
37+
offset: { closed = 0, opened = 0 } = {},
38+
style,
39+
enabled = true,
40+
...props
41+
},
3342
ref,
3443
) => {
3544
const { height, progress } = useReanimatedKeyboardAnimation();
@@ -38,9 +47,9 @@ const KeyboardStickyView = forwardRef<
3847
const offset = interpolate(progress.value, [0, 1], [closed, opened]);
3948

4049
return {
41-
transform: [{ translateY: height.value + offset }],
50+
transform: [{ translateY: enabled ? height.value + offset : closed }],
4251
};
43-
}, [closed, opened]);
52+
}, [closed, opened, enabled]);
4453

4554
const styles = useMemo(
4655
() => [style, stickyViewStyle],

src/components/KeyboardToolbar/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export type KeyboardToolbarProps = Omit<
5454
* A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
5555
*/
5656
opacity?: HEX;
57-
} & Pick<KeyboardStickyViewProps, "offset">;
57+
} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
5858

5959
const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
6060
const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
@@ -82,6 +82,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
8282
blur = null,
8383
opacity = DEFAULT_OPACITY,
8484
offset: { closed = 0, opened = 0 } = {},
85+
enabled = true,
8586
...rest
8687
}) => {
8788
const colorScheme = useColorScheme();
@@ -151,7 +152,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
151152
);
152153

153154
return (
154-
<KeyboardStickyView offset={offset}>
155+
<KeyboardStickyView enabled={enabled} offset={offset}>
155156
<View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
156157
{blur}
157158
{showArrows && (

0 commit comments

Comments
 (0)