Skip to content

Fix lite UI story sheet keyboard spacing#887

Merged
dannyhw merged 2 commits into
nextfrom
dannyhw/fix-lite-keyboard-story-sheet
May 11, 2026
Merged

Fix lite UI story sheet keyboard spacing#887
dannyhw merged 2 commits into
nextfrom
dannyhw/fix-lite-keyboard-story-sheet

Conversation

@dannyhw
Copy link
Copy Markdown
Member

@dannyhw dannyhw commented May 11, 2026

Issue:

The lite UI story select sheet could not scroll all the way to the bottom while the keyboard was open. The scroll content did not account for the keyboard height, so the last stories could remain hidden behind the keyboard. The floating "Scroll to selected" button also stayed visible while typing and could overlap the searchable list.

What I did

  • Track the keyboard height in the lite mobile menu drawer with platform-specific keyboard events.
  • Provide the drawer keyboard inset to the story tree and search result lists.
  • Add the keyboard inset to the virtualized list content padding so the bottom items remain reachable.
  • Cap the keyboard-expanded sheet height lower so the sheet shows less content while the keyboard is open.
  • Hide the "Scroll to selected" button while the keyboard is visible.

How to test

  • Open the lite UI story select sheet on iOS and Android.
  • Focus the search input so the keyboard opens.
  • Confirm the list can scroll to the final story/search result without content being trapped behind the keyboard.
  • Confirm the sheet does not expand too tall while the keyboard is open.
  • Confirm the "Scroll to selected" button is hidden while the keyboard is open and returns when the keyboard is dismissed.

Checked locally with:

pnpm -F @storybook/react-native-ui-lite check:types

This does not need a new example in examples/expo-example and does not need a documentation update.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 11, 2026

🦋 Changeset detected

Latest commit: 0e30b6e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages
Name Type
@storybook/react-native-ui-lite Patch
@storybook/react-native Patch
@storybook/react-native-ui Patch
@storybook/react-native-ui-common Patch
@storybook/react-native-theming Patch
@storybook/addon-ondevice-actions Patch
@storybook/addon-ondevice-backgrounds Patch
@storybook/addon-ondevice-controls Patch
@storybook/addon-ondevice-notes Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dannyhw dannyhw marked this pull request as ready for review May 11, 2026 11:33
@dannyhw dannyhw merged commit 5530e44 into next May 11, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant