search

iway1 / react-native-keyboard-avoider

MIT License
43 stars 2 forks source link

Thank you #1

Closed yekta closed 1 year ago

yekta commented 1 year ago

Just wanted to drop by and thank you 😄 I never understood why React Native's own component (or other components) for this don't work given the expected behaviour seems pretty simple. I tried your library and so far it behaves exactly the way I would expect it to behave.

One minor thing: Being able to change the animation easing would be nice, would tie in nicely with the animationTime you already have. Easing.out(Easing.quad) can be a good default since it's a good mix of smooth and fast.

iway1 commented 1 year ago

@yekta Appreciate it ❤️ I'm glad you're finding it useful, it's definitely something that's caused me a lot of frustration in the past and it always felt like it should be easier.

I like that idea. I haven't actually used quad easing before, but I'll take a look at it today and definitely add an "easing" prop. Thanks for the suggestion!

iway1 commented 1 year ago

Added animationEasing to all components in f6fffbc

yekta commented 1 year ago

Awesome, thanks for the fast response.

yekta commented 1 year ago

Hey I noticed one thing. The prop explanation says: "Open animation will use Easing.out(animationEasing), close animation will use Easing.in(animationEasing).". I tried it and it's indeed what happens.

But this is not how UI elements coming in and out of the screen is animated usually (keyboard for example). Google actually mentions it in their Material design guidelines. When things are coming into the screen, people usually expect them to start fast, then slowly snap into place. When things are going out of the screen, they either expect it to just go out fast, or start going out very fast then slow down a bit towards the end.

This behavior applies to both iOS and Android btw. So for this use case, if both open and close uses Easing.out, I think will be better.

If you set your animationTime to something unnecessarily big like 1000 and your animationEasing to something steep like Easing.exp, you can see the problem. When keyboard comes up, the animation will still feel consistent with the keyboard (even though unnecessarily long). When keyboard is going out of the screen, things won't feel consistent. Because keyboard will start going out fast, then slow a tiny bit towards the end while your component will ease at the start (as if there is a delay), then snap into place fast.