GeekyAnts
Action sheet animation slides up instead of fading in
Description
The backdrop for Actionsheet slides up instead of fading in. Ideally I would like this transition to be configurable if nothing else, the slide feels quite weird atm
CodeSandbox/Snack link
N/A
Steps to reproduce
For Slide animation
- Use Native base v3.4.X
- Add actionsheet to a RN app
- Actionsheet backdrop slides up weirdly
For fade animation
- I am currently using v3.3.0 Which has the face animation
- Add actionsheet
- Actionsheet backdrop fades in
NativeBase Version
3.4.X
Platform
- [X] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [ ] Next
Other Platform
No response
Additional Information
I did find this issue but ideally would prefer if this transition is configurable rather than just always doing a slide. Makes me not want to upgrade my version as it looks a bit jank with what I want to use it for. Any help here would be amazing 🙏
Thanks for looking into it @AshwiniKumar007 lmk if I can give anymore details or help in anyway :D
Same here.
https://github.com/GeekyAnts/NativeBase/blob/099c77e780d4814727048378389e3a74390aeb37/src/components/composites/Actionsheet/Actionsheet.tsx#L28-L40
And, seems props._backdrop did not pass to _overlay.
Hey @AshwiniKumar007 Wondering if you had any luck with looking into this one :)
Currently experiencing this issue too, Works fine on IOS, just not android.
Same issue here. Android. Also, when actionsheet is open, the statusbar changes to dark-content, which i believe it should not.
It can be fixed temporarily by passing animationPreset="fade" to ActionSheet as a prop.
But note that doing this will make the Action sheet fade in & out instead of sliding.
So, it can be a temporary solution until the bug is fixed.
The root of this issue is in the implementation of Modals: https://github.com/GeekyAnts/NativeBase/blob/b9a36dc9fec2f9f5aff30046d2f304e97673d71a/src/components/composites/Modal/Modal.tsx#L81-L90
Since the overlay of modals uses the same animationPreset as the content it's not possible to control only the content animation for Modals/ActionsSheets/Selects etc. If you want to fix it for now and don't use any modals where backdrops are supposed to slide in you can just set animationPreset='fade' on the Overlay
Hey team thanks for the suggestions around animationPreset='fade' I think we won't do this for now as it looks kinda jank with the actionsheet. At least more jank than the slide up backdrop does haha 😅
It is interesting though that the animation works correctly on iOS? Maybe just some underlying native animation that is different or something?
Are there any viable workarounds yet?
Did you try this approach? https://github.com/GeekyAnts/NativeBase/issues/5583#issuecomment-1470139631
it works for me on android and is only one line of code changed in the source files of the native base modals
Isn't there a possibility to pass down the _backdrop props to _overlay, or set a separate animationPreset on the ActionSheet?
https://github.com/GeekyAnts/NativeBase/blob/b9a36dc9fec2f9f5aff30046d2f304e97673d71a/src/components/composites/Modal/Modal.tsx#L92-L101
My workaround is just move the <Backdrop> inside another <Overlay> with animationPreset="fade" and remove the <Fade> component like the code below. This will keep the slide animation for the sheet and fade for the backdrop instead of fade for both when updating animation preset of the Modal in Actionsheet.tsx or in the https://github.com/GeekyAnts/NativeBase/issues/5583#issuecomment-1470139631. Note that i only change this for android, this change will behave different in ios.
The changes:
