Use Easing.out on closeAnimation

[yekta]

The animationEasing 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 and then slow down a bit towards the end. So for this use case, if both open and close uses Easing.out, I think it 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.

[iway1]

Yeah that's a good point. The reason I did Easing.in is because it prevented the input from going behind the keyboard during closing, but Easing.out will follow the keyboard motion more closely and should prevent any instances of the animation not feeling snappy