use react-native-teleport instead of js built in portal?

[efstathiosntonas]

Hi @MatiPl01,

Can you please consider using the native portal/teleport by @kirillzyusko (the author of react-native-keyboard-controller) instead of the custom built in one?

[MatiPl01]

Hey @efstathiosntonas!

Thanks for your suggestion but I'd prefer not to have third party dependencies installed with this library, especially these which use native code, unless it is absolutely necessary. I think that the current custom portal implementation is sufficient and I am not going to replace it by anything else if not necessary.

Anyways, thanks for letting me know about this teleport library!

[kirillzyusko]

The author of react-native-teleport is here 👋

The main advantage of this lib over js-based portals is that it actually allows you to teleport views between different containers.

If your draggable items contain only views/text - it's fine to use js-based portals, since views/text don't have internal state. However if your items have gifs/video previews/lottie and other dynamic content that has internal state (i. e. progress), then js-based portals are not perfect fit here, because they unmount and mount new item, which eventually will lead to glitch/lag/freeze and other unpleasant UI bugs. With react-native-teleport you can re-use the same instance of native view and teleport them between different containers without remounting components. So to give a shorter answer:

• react-native-teleport re-uses native views (and it helps to preserve internal state)
• react doesn't unmount view, so as a result it gives a better performance (literally instead of O(n) operations (re-mount of N-views) you perform O(1) operations (move view to a different container)). For items with view/text it doesn't make a difference, if you handle more heavy UI elements (images etc.) - it will make a difference

For sure @MatiPl01 it's totally up to you whether to add this lib into example app or not, but I just thought to add this comment so that you better know the difference between implementations and which extra-features the react-native-teleport brings.

This lib (react-native-portal) is very young (it's only 3 weeks old 😅), so there will be various bugs etc. and I haven't made any promotions of the lib yet, but a long-term vision is that it'll serve for all libs that are actually doing teleportation (and drag&drop functionality was in mind when I developed it)

Thank you for reading this long post 🙌 😅 I hope I made a little bit more clearance on what this lib is doing etc.

[MatiPl01]

Hey @kirillzyusko! Thanks for sharing more context about your library. If it is able to preserve state, then I can see that it might be worth integrating into my library as it seems to be a perfect use case.

Thank you @efstathiosntonas for suggesting it and @kirillzyusko for implementing this library as it it something that React Native was missing.

I hope I'll find some time this week to experiment with this library and see if it works as intended. Will let you know once I try integrating it.

[efstathiosntonas]

thank you both guys, keep up the good work ❤️

[kirillzyusko]

Sure @MatiPl01

This is my Discord (nickname is kiryl.ziusko) - I'm responding much faster there, so feel free to reach out if you have any questions or discover any bugs. I'll try to help and assist you 😊

[MatiPl01]

Thank you @kirillzyusko for sharing the contact. I sent a friend request on Discord.