When interacting with a marker on a map using react-native-maps, an exiting animation (FadeOutDown) for a callout view associated with a focused marker does not trigger properly while on Paper.
Instead of smoothly animating out, the view is unmounted prematurely. However, the entering animation (FadeInUp) functions as expected in this scenario.
On Fabric, everything works as expected - both entering and exiting animations are triggered correctly.
Steps to reproduce
Set up RN 0.76.1+ with react-native-reanimated and react-native-maps
Use example code provided on snack
Click on marker to open the callout
Drag on map to close the callout
Solution
For now, the best solution is to move to Fabric, which is a better architecture in the long term.
Description
When interacting with a marker on a map using
react-native-maps, an exiting animation (FadeOutDown) for a callout view associated with a focused marker does not trigger properly while on Paper.Instead of smoothly animating out, the view is unmounted prematurely. However, the entering animation (FadeInUp) functions as expected in this scenario.
On Fabric, everything works as expected - both entering and exiting animations are triggered correctly.
Steps to reproduce
Solution
For now, the best solution is to move to Fabric, which is a better architecture in the long term.
Snack or a link to a repository
https://snack.expo.dev/@patrycja_kalinska/reanimated-paper-map-callout
Reanimated version
3.16.1
React Native version
0.76.2
Platforms
Android, iOS
JavaScript runtime
None
Workflow
None
Architecture
Paper (Old Architecture)
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes