multiple transitions are overlapping
MarianBe opened this issue · comments
i have a big image and an icon that sits on top of it. Whilst transitioning each of them, the Image which should be behind the icon gets in front of it so that the transition of the icon is not visible.
I would suggest a zIndex prop where we can give each transition their own zIndex to decide which order they will follow. Let me know if this sounds possible for you.
Right I see. I'll take a look at that. Thanks for reporting.
@MarianBe Do you have a suggestion for an API?
@IjzerenHein I would suggest a simple prop called zIndex that receives an integer.
So something like this:
<MagicMove.View id="logo" zIndex={3} style={{ width: 200, height: 200, backgroundColor: "purple", borderRadius: 0 }} />
Yeah, sounds good. What would make more sense to you, to set it on the source or the target MagicMove.View component?
@IjzerenHein for me personally it would be the source but both options would be fine I guess
I made it so, so that it looks at either the zIndex of the source or the target (the source has preference over the target though).
I just released this as v0.6.0-rc0 on NPM. Can you give it a test by installing yarn add react-native-magic-move@next?
@IjzerenHein works like a charm, thank you very much!
Sweet, thanks for testing!
I'll probably release an update today, will let you know.
cheers
Released on NPM as v0.6.0 (https://www.npmjs.com/package/react-native-magic-move/v/0.6.0)
@IjzerenHein sweet thank you very much! Loving this library!