Portal not placed over react native navigation tabs

[andreiwow2]

As noticed in the below image, my portal, which is the red background with the input, is placed inbetween the navigation view, I want it to be teleported above everything.

The host is placed in App.tsx like this

<PortalProvider>
      <InternetProvider>
        <StatusBar
          animated
          backgroundColor={colorScheme === 'dark' ? 'white' : 'black'}
          barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
        />
        <UserProvider>
          <NativeBaseProvider>
            <ApolloProvider client={client}>
              <SafeAreaProvider>
                <NavigationContainer>
                  <Stack.Navigator screenOptions={{ gestureEnabled: false }}>
                    <Stack.Screen
                      options={{ headerShown: false }}
                      name="MainPage"
                      component={MainPage}
                    />
                    <Stack.Screen
                      name="MusterHalle"
                      options={{ title: 'Muster Halle' }}
                      component={MusterHallePage}
                    />
                    <Stack.Screen name="Ersatz" component={ErsatzPage} />
                  </Stack.Navigator>
                </NavigationContainer>
              </SafeAreaProvider>
            </ApolloProvider>
          </NativeBaseProvider>
          <Toast />
          <PortalHost name="mainPortal" />
        </UserProvider>
      </InternetProvider>
    </PortalProvider>

Any idea how could I achieve what I am trying to do?

[jackdewhurst]

Exactly the same issue here observed on Android. I've not worked out a solution yet..

[jackdewhurst]

Other portal libraries like react-native-paper and react-native-portalize behave the same unfortunately..

[dentemm]

You can solve this by using FullWindowOverlay from rn-screens

<Portal>
  <FullWindowOverlay>
  {/* Your component */}
  </FullWindowOverlay>
</Portal>

[SnowingFox]

You can solve this by using FullWindowOverlay from rn-screens

<Portal>
  <FullWindowOverlay>
  {/* Your component */}
  </FullWindowOverlay>
</Portal>

But this is just valid for IOS

[jeyjeycodes]

You can solve this by using FullWindowOverlay from rn-screens

<Portal>
  <FullWindowOverlay>
  {/* Your component */}
  </FullWindowOverlay>
</Portal>

This works however, when I change the theme it decided to go behind the modal? Then I have to clear cache to make it work :(

[SnowingFox]

add

<Statusbar translucent />

[GhayoorUlHaq]

If you ment react-native-navigation ( from wix ):

I have to hide the bottom tab bar using mergeOptions

Navigation.mergeOptions(componentId, {
      bottomTabs: {
        visible: false,
        animate: true, // Optional: use it to animate the transition
      },
    });