Multiple shared elements

[p-syche]

copied from IjzerenHein/react-native-shared-element#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.