Making other portals above than the others

[aprilmintacpineda]

If I call <Portal> on multiple components, there's a tendency for some components to be above than the other components, but what if I want to be able to order them, like <Portal priority={1}> the higher the number provided the higher it is on the stack, so that priority={10} is on top of priority={9}.

[calz10]

hi @aprilmintacpineda , may I ask if you have fixed or any solution regarding this? thanks

[aprilmintacpineda]

hi @aprilmintacpineda , may I ask if you have fixed or any solution regarding this? thanks

Hi, sorry but I didn't have any.

[Mursivic]

Hi @calz10 @aprilmintacpineda @jeremybarbet
Any solution yet for this issue?

[brugaspar]

Hi @calz10 @aprilmintacpineda @Mursivic
Any solution for this?

[sourabhLX]

Staking Host it self works for me

<Host>  // <-------- H1
<Stack
  screenOptions={{
    headerShown: false,
  }}
/>
</Host>
<Host style={{ position: 'absolute' }}>    / /<-------- H2
<Portal key={1}>
  <Toast config={toastConfig} position="top" />
</Portal>
</Host>

[aprilmintacpineda]

Sad to see that until today this still hasn't been attended to, maybe there's just not enough requests for it. Also it looks like RN-Portalize is not longer maintained.

[lukerlv]

I also encountered the same need. There are too many issues with react native, which is very frustrating. It's really not a mature framework.

[cbdeveloper]

I have a similar issue.

• Host inside App.tsx
• Modal inside a Portal
• PopUp inside Portal inside Modal

In that case, PopUp renders under the Modal instead of on top.

Something like this (across different files, ofc):

<App>
  <Host>
    <Portal>
      <Modal>
        <Portal>
          <PopUp>