Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding keyboardHiding and keyboardShowing state flags to useKeyboard #168

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

rhdeck
Copy link

@rhdeck rhdeck commented May 7, 2020

Summary

This feature exposes transitional flags, keyboardHiding and keyboardShowing for when the keyboard is in the process of animating in and out.

This is handy for preparing changes in layout that we wish to be true at the end without observing the late jank when the keyboard "lands" (e.g. by waiting for keyboardShown to be true.

Use Case: In iPhone X/11/S configurations, it can be handy to have a different treatment of SafeAreaContext insets when keyboard is up vs down. e.g. the sample/test below

Test Plan

This is a really simple change. It allows the following style configuration to work nicely:

const { keyboardHiding, keyboardShowing, keyboardShown} = useKeyboard()
{
marginBottom:
      keyboardHiding || (!keyboardShown && !keyboardShowing)
        ? insets.bottom
        : 0,
}

What's required for testing (prerequisites)?

Nothing, this is a really simple change. Results are clearest on an iPhone X-like.

Compatibility

OS Implemented
iOS
Android
Web

Checklist

  • I have tested this on a device and a simulator
  • I added the documentation in README.md
  • I updated the typed files (TS )

@rhdeck rhdeck marked this pull request as ready for review May 7, 2020 03:24
@LinusU
Copy link
Member

LinusU commented May 7, 2020

Hey 👋

Thanks for the PR! Did you see #140, do you think that maybe that is a better approach? or do you think that we need both?

@rhdeck
Copy link
Author

rhdeck commented May 7, 2020

It's a simplicity vs precision tradeoff.

The benefit of this approach is being able to very easily and simply trigger a style (or any other behavior) during the fast transition without worrying about matching every frame. It's an immediate improvement over using keyboardShown for the X-class insets problem and requires very little advanced knowledge to exploit.

#140 seems very cool. In order to work, it needs a level of frame-by-frame precision matching the curve of each device's keyboard animation that is important to get right for its implementation that means more dev and probably more testing. I'll be interested in checking it out when it merges!

I'd have this repo support both in the longer run to give both power and ease-of-use. But probably this PR can be merged first for its simplicity, and #140 when it is ready and tested.

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.

2 participants