Implementing Portal in React Native

Photo by Jeremy Perkins on Unsplash

I was handling a react native project of which i had created a custom bottom sheet using re-animated and react-native-gesture-handler. Due to component nesting and z-index issues, the bottom sheet did not display properly above some component such as tab navigation. I decided on using portal to resolve the issue. Hence, this article uncovers the pieces for creating custom portal in react native.

React Portal as explained in react docs is “provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.” In simple term, portal is a way to render a react component outside the component tree. Consider each component declared in react to be in a particular level of the component tree e.gRoot -> Navigation -> App -> Login -> LoginForm. Hence its a way to show a component on top of other component regardless of component tree.

Components are displayed based on their z-index level, but if a component is expected to appear above a particular/all other components but does not have the z-index to do so, it will definitely not show above all others.

In React, there is built-in support for Portal, but in react native there is not built-in support for portal. Hence, this article will show how to implement a portal in react native and as well do justice to explaining each step.