React Native Portals

[intergalacticspacehighway]

Introduction

React Native portals would allow to render a component into a different native hierarchy while preserving the context and react tree hierarchy. This feature already exists in the source code and works fine on Android but throws this error on iOS.

I have created a repo that makes this feature work on iOS and Android in the current non-fabric architecture.

Details

I tried a fix on iOS by commenting this assertion. This assertion states that the container should be a root shadow view instance. The above error doesn't occur if we pass rootTag (e.g. one which we get in logs on app start) in createPortal API. However, to make the Portal work consistently on iOS and Android we might need to remove this assertion or find an alternate way (I am not sure why this assertion is added).

Discussion points

• Is there an alternate way to keep the assertion and make Portals work on iOS?
• The Portal API would be a great addition for usecases like Toasts, Alerts, BottomSheets etc and can be used as an alternate to multiple modal usecases.
• I am yet to test this on fabric architecture. Fabric uses UIManager.cpp and this assertion exists on RCTUIManager. I'll try to test it.

Since this feature is not yet exported officially, I thought of starting it as a discussion. :)

[nandorojo]

First-class portals would be great, especially with the limitations modals have now.

[mmazzarolo]

First-class portals would be great, especially with the limitations modals have now.

If I can add some context, here are a few limitations of the native modal we've discovered while working on React Native Modal:

• Stacking multiple modals/alerts/dialogs on top of each other it's not possible or buggy.
• On Android, there are some artifact leftovers when animating modal contents with elevation.
• In some cases, animating the modal content with useNativeDriver causes a flash on Android.
• On some Android devices, hiding/showing the navbar doesn't update the modal height until it's re-opened.

To be clear: I don't have anything against React Native's built-in modal component. I know that most of the issues reported around it are just limitations of the native modal implementation itself. I think there's a place and time for using the built-in modal component, but in some cases having a way to portal a JavaScript component to the root (while preserving its context) would be handy.

[pvinis]

there's this that could help for a PR https://github.com/callstack/react-native-paper/tree/master/src/components/Portal

[mmazzarolo]

there's this that could help for a PR https://github.com/callstack/react-native-paper/tree/master/src/components/Portal

This portal implementation works entirely in the JavaScript land though, right?

[savelichalex]

I use a pure JS implementation similar to react-native-paper one for quite a long time. @mmazzarolo could I kindly ask you, what benefits do you think it would have if it was implemented in native?

[natew]

@savelichalex don't manual portals break context? At the least they are much less performant.

Would love to see Portals in React Native, they are an immensely useful abstraction.