Open mrousavy opened 4 years ago
I've investigated the issue further and noticed that this bug only appears when using the ModalPresentationIOS
or ScaleFromCenterAndroid
transition preset in the screenOptions of the Navigator
.
<SharedElementStack.Navigator
mode="modal"
screenOptions={{
gestureEnabled: false,
cardOverlayEnabled: true,
...TransitionPresets.ModalPresentationIOS, // <-- this right here
}}
...
Hi 👋This problem appears to be on the native side and is has to do with additional "transforms" applied by the ModalPresentationIOS.
Unfortunately ModalPresentationIOS wont work at the moment.
I've moved this issue here 👍
+1
+1
TransitionPresets.ModalSlideFromBottomIOS works better for now as a workaround
Status update: This preset still doesn't work on both Android and iOS. Some glitches have been resolved with regards to vertical translations, but the top position is still not obtained correctly. As an alternative, please use one of the other presets (nearly all of them work correctly). You can view the supported transitions in the react-navigation example app: https://github.com/IjzerenHein/react-navigation-shared-element/tree/main/example
The animation begins smoothly, but when the animation finishes, the items (
SharedElement
s) are off by some pixels which causes this stuttering glitch. This issue only appears when using theModalPresentationIOS
transition preset. All other presets work fine.Demo here:
My Navigator:
I've tried playing around with the
animation
property, but I can't seem to get it working with this animation I found in the example project (springyFadeIn.js
):Packages used:
I don't know if that's a bug in the library or if I am making a mistake, would appreciate some help here!