Multiple shared elements

Nobody has claimed this yet.

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

Start from createSharedElementStackNavigator and the sharedElements configuration shown in the issue, then reproduce the behavior with multiple screens on Android and iOS. Done means shared-element transitions work for each screen without removing another screen's sharedElements prop.

Written by the indexing model from the issue text.