5

The lacking of Modal in React Native Web drove me to build a pop up component that is overlaid on top of the current view.

I have tried with the position 'absolute', top: 0 and left: 0 hack. That works well but it will not work properly if it is used in a children component, due to the auto zIndex by order of the component. The image below illustrates this issue (see the blue button is blocking the dropdown pop up):

enter image description here

Eventually I found out that React can render a component directly at the root (find out more at this link), which means the component will be rendered above other components, but this is for React but not React Native.

I wonder if there's something similar in React Native.

Voyage_Mystere
  • 159
  • 1
  • 12

2 Answers2

0

Try putting up your Component at the last in hierarchy. And then use the position 'absolute', top: 0 and left: 0 hack. It should work.

For eg. 

<View>
  {renderComponent1()}
  {renderComponent2()}
  {renderComponentWithAbsoluteStyling()} //Your component
</View>

In RN, lower component gets higher priority while rendering. So your component should override component1 and component2.

atitpatel
  • 3,104
  • 1
  • 24
  • 34
0

use modal from 'react-native-paper', its worked for me

kamal verma
  • 496
  • 3
  • 16