Android: UNAUTHORIZED_OVERLAY with react-native-navigation DRAWER

[marksturm]

Thanks for updating it but... the inlineplayer does not work on android in any productive way if you use the drawer

the problem is the "UNAUTHORIZED_OVERLAY"

This was a also a problem back in 2017 and 2018 ...

I used:
"react-native": "0.60.5",
"react-navigation": "^4.0.5",
"react-navigation-drawer": "^2.2.1",
"react-navigation-stack": "^1.7.3"

[marksturm]

I made another test - it even stopped if i open a modal. Overtime naything overlays the view... what a pitty

[davidohayon669]

how do you use the drawer? where is the player mounted?
Are you sure no other view is blocking the player? even transparent ones

[shruti8597]

Same issue.
Works well with full screen.
Without full screen runs for a second then stops.

Starts working if I take it out of drawer.

[du-hernandez]

Exactly the same problem for me too

[sikeeoh]

same issue

[elomapezoumon]

Hi Guys,
I have the same issue, please help !

[elomapezoumon]

Hi Guys
I found an solution wich worked for me :

const DrawerNavigator = () => (
/* The content of your drawer navigator goes here */
)

<Stack.Navigator headerMode='none'>
/* This Stack is for the drawer navigation /
<Stack.Screen
name="MyDrawerNavigator"
component={DrawerNavigator}
></Stack.Screen>
/ Place the video screen at outside the drawer */
<Stack.Screen name="VideoComponent" component={VideoComponent} />
</Stack.Navigator>

[girish54321]

Put the you youtube Component on top level stack not in any Drawer or BottomTab.Navigator

for me i loaded the Component before any Drawer or BottomTab.Navigator

const HomeTabsNavigator = (): React.ReactElement => (
  <BottomTab.Navigator
    // screenOptions={TabBarVisibleOnRootScreenOptions}
    initialRouteName={"myView"}
    tabBar={(props) => <HomeBottomNavigation {...props} />}
  >
    <BottomTab.Screen name="myView" component={HomeBottomTabsNavigator} /> //<====my list if video screen here
    
  </BottomTab.Navigator>
);
`

export const HomeNavigator = (): React.ReactElement => ( .  /// <=====my Drawer stack
  <Drawer.Navigator
    screenOptions={{ gestureEnabled: true }}
    drawerContent={(props) => <HomeDrawer {...props} />}
  >
    <Drawer.Screen name="Home" component={HomeTabsNavigator} />

    <Drawer.Screen name="News & PR" component={NewsAndPRNavigator} />
  </Drawer.Navigator>

//AUTH LOADING . this stacks loads before any other stack 
export const AuthLoadingNavigator = (): React.ReactElement => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="HomeNavigator" component={HomeNavigator} />
    <Stack.Screen name="VideoPlayer" component={VideoPlayer} /> .  <=== youtube player here 
  </Stack.Navigator>
);
`

[Harikasai999]

hi, can any one solve this issue??
i am using "@react-navigation/drawer". So i am getting error "UNAUTHORIZED_OVERLAY".
Please help me..

[girish54321]

Try adding the your YouTube player screen before drawer stack @Harikasai999

[xdarkleonx]

Any solutions? girish54321 and elomapezoumon workaround is not working