davidohayon669 / react-native-youtube

A <YouTube/> component for React Native.
MIT License
1.16k stars 473 forks source link

Android: UNAUTHORIZED_OVERLAY with react-native-navigation DRAWER #390

Open marksturm opened 5 years ago

marksturm commented 5 years ago

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 commented 5 years ago

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

davidohayon669 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

Exactly the same problem for me too

sikeeoh commented 4 years ago

same issue

elomapezoumon commented 4 years ago

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

elomapezoumon commented 4 years ago

Hi Guys I found an solution wich worked for me :

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

/* This Stack is for the drawer navigation */ /* Place the video screen at outside the drawer */
girish54321 commented 4 years ago

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 commented 4 years ago

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

girish54321 commented 4 years ago

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

xdarkleonx commented 2 years ago

Any solutions? girish54321 and elomapezoumon workaround is not working