Multiple shared elements

[p-syche]

copied from https://github.com/IjzerenHein/react-native-shared-element/issues/103 by @devggm

Hi Thanks for providing this awesome lib for smooth transitions.

Recently, I have started using this lib in my React Native project, and I am happy with the animation, but I, also facing an issue.

Issue Details:- Using createSharedElementStackNavigator for navigator and as per example placing unique ids for the SharedElements which needs to be animated.

sharedElements={(route, otherRoute, showing) => { const { slug, isFrom } = route.params; return [ { id: item.${slug}${isFrom}.photo, animation: "fade", resize: "stretch", align: "center-top", }, { id: item.${slug}${isFrom}.name, animation: "fade", resize: "clip", align: "left-center", }, { id: item.${slug}${isFrom}.dineInOptions, animation: "fade", resize: "clip", align: "left-center", }, ]; }}

for one Screen it's working fine but in same navigator if I set above values with different unique ids to another screen, then on second screen SharedElement does not work.

If I remove sharedElements prop from one screen then only second one works and vice versa. I can't see SharedElement works for multiple screens.

Please let me know if we can use this for multiple screen. If you guys need sample please let me know.

Effected Platform : Android and iOS

Any help is appreciated. Thanks

[takahiro-saeki]

any update?

[p-syche]

@takahiro-saeki not yet, but hopefully soon :)

[devggm]

@p-syche I, noticed that sometimes the animation works from a particular place, for example I have used shared element at 4 different places and one of them works then from other places it won't work. and this behaviour is also works randomly.