Skip to content

Commit

Permalink
feat: enabled prop for KeyboardStickyView (#717)
Browse files Browse the repository at this point in the history
## 📜 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
  • Loading branch information
kirillzyusko authored Dec 3, 2024
1 parent 5ded2a7 commit 08f9861
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 6 deletions.
6 changes: 5 additions & 1 deletion docs/docs/api/components/keyboard-sticky-view/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
15 changes: 12 additions & 3 deletions src/components/KeyboardStickyView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,23 @@ export type KeyboardStickyViewProps = {
*/
opened?: number;
};

/** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
enabled?: boolean;
} & ViewProps;

const KeyboardStickyView = forwardRef<
View,
React.PropsWithChildren<KeyboardStickyViewProps>
>(
(
{ children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
{
children,
offset: { closed = 0, opened = 0 } = {},
style,
enabled = true,
...props
},
ref,
) => {
const { height, progress } = useReanimatedKeyboardAnimation();
Expand All @@ -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],
Expand Down
5 changes: 3 additions & 2 deletions src/components/KeyboardToolbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<KeyboardStickyViewProps, "offset">;
} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;

const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
Expand Down Expand Up @@ -82,6 +82,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
blur = null,
opacity = DEFAULT_OPACITY,
offset: { closed = 0, opened = 0 } = {},
enabled = true,
...rest
}) => {
const colorScheme = useColorScheme();
Expand Down Expand Up @@ -151,7 +152,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
);

return (
<KeyboardStickyView offset={offset}>
<KeyboardStickyView enabled={enabled} offset={offset}>
<View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
{blur}
{showArrows && (
Expand Down

0 comments on commit 08f9861

Please sign in to comment.