Animation triggers when keyboard shows or hides

[bobharley]

The show animation happens every time the keyboard shows or hides. The actions sheet moves a lot especially when typing on a multiple text input form. Even switching the keyboard layout from alpha numeric to special characters triggers the animation.

Is there a way to disable animation when keyboard shows or hide?

I am using 0.8.3

[ammarahm-ed]

Hmm 🤔 I will test this out. If you can share a tiny example, it would be great so i can repro it quickly. Normal behavior is that sheet should move on keyboard open to stay above the keyboard.

Also: Does keyboard hide between focusing different inputs or it stays open all the time and still the sheet moves?

[bobharley]

@ammarahm-ed the animation happens when the keyboard hides or closes, or when the user interacts with the form (ticks a checkbox, tap on show/hide password, or anything that causes the keyboard to hide)

Scrolling while the keyboard is open is fine because it doesn't close the keyboard, it's just when the keyboard shows, hides, or even resizes (can't reproduce on this device because the keyboard is always the same size when changing keyboard keys)

Is there a way to disable the animation when we're not showing/hiding the actions sheet?

here's the example https://github.com/bobharley/test-actionsheet-keyboard

https://user-images.githubusercontent.com/25066334/186573916-62907b6a-3963-4d65-a3ce-06341d239657.mp4

Also: Does keyboard hide between focusing different inputs or it stays open all the time and still the sheet moves?

No it doesn't, moving focus between different inputs doesn't hide the keyboard

[bobharley]

@ammarahm-ed Also it happens when a conditionally rendered component (for example a validation message) shows/hides inside the action sheet. Maybe because it's causing the actions sheet's height to change?

I think this is caused by this https://github.com/ammarahm-ed/react-native-actions-sheet/blob/90b9ccf94cd848ffc7d0ad283508ac192d8505e2/src/index.tsx#L484-L488

I tried changing gesture.vy to 0 and it stopped animating when content height changes

[ammarahm-ed]

@bobharley I think i have fixed this. Will make a new release soon.

[bobharley]

Thanks @ammarahm-ed

[ammarahm-ed]

@ammarahm-ed Also it happens when a conditionally rendered component (for example a validation message) shows/hides inside the action sheet. Maybe because it's causing the actions sheet's height to change?

I think this is caused by this

https://github.com/ammarahm-ed/react-native-actions-sheet/blob/90b9ccf94cd848ffc7d0ad283508ac192d8505e2/src/index.tsx#L484-L488

I tried changing gesture.vy to 0 and it stopped animating when content height changes

The actionsheet should animate on height change. that's normal. However it should only animate from exisiting position, not from the bottom which looks awful. The issue was that the initialValue.current check inside onSheetLayout function was not working, causing the sheet to translate out of viewport everytime it rerendered.