react-native-youtube: UNAUTHORIZED_OVERLAY Android bug

I discover that Youtube view will show when change the orientation of screen, and no need to set fullscreen nor play.

So I solved this problem by change a bit of the height in the styles after onReady event be triggered. (initial height is 301)

onReady={e => this.setState({ height: 300 })} style={{ alignSelf: 'stretch', height: this.state.height, backgroundColor: 'black', marginVertical: 10 }}

The native youtube player has several constraints like this, and is too restrictive. One of the solutions seems to be to use webviews in app. More reasons why its not very reliable - https://github.com/PierfrancescoSoffritti/Android-YouTube-Player#why-does-this-library-exist

I’ve written a simple wrapper around the webplayer with react-native-webview. You can check it out https://github.com/LonelyCpp/react-native-youtube-iframe 😃

Woow. still no solution for this old issue???

For those of you who ( @nimamyscreen ) are using react-native-navigation and seeing the issue with overlay by com.reactnativenavigation.views.SnackbarAndFabContainer, if you are not using snackbar or fabs you can uncomment the line here and it works:

https://github.com/wix/react-native-navigation/blob/0f4e30ac33e1f9793aa5efd63019f75cb3ad49d5/android/app/src/main/java/com/reactnativenavigation/layouts/SingleScreenLayout.java#L65

Definitely a hack, will try to work out a maintainable solution for react-native-navigation

I gave up to be honest, tried to remove <Text> in Youtube.android.js, because it seems to absolutely positioned, but it didn’t solved an issue. There is also a comment here, but it doesn’t seem to protect us anymore 😃 I even tried to inspect native Android UI hierarchy, and haven’t found any view that is obviously covering the player, though in properties it says “overlayed” - true. For now I’ve just embedded YT player in the WebView. As simple as this:

<WebView
  style={props.style}
  source={{uri: `https://www.youtube.com/embed/${props.videoId}?controls=0&showinfo=0`}}
/>

I know it’s not a proper solution, but at least works on both iOS and Android with RN 0.44.3. For iOS specifically it seems ridiculous to have react-native (which is kinda JS focused and encourages to unify the codebase) with the package, the adds native ObjC code, that creates webView with i-frame (which is JS-powered as well in that .html file that you have to include), just to expose that callbacks back to your JS…Ta-daaah!..I mean in RN it’s rather easier to directly create i-frame right in WebView, and map the callbacks back if you really need them, with pure JS. There was a suggestion somewhere in the other Issues for this package to make a solution with WebView, I hope it will see the world someday 😃 But for simple “just play YT videos” use-case - WebView + embed link as above would solve the problem.

Any solution using react-navigation and the YouTube component?

For anyone else working through this issue in conjunction with react-navigation:

I’ve created a bare bones app to demonstrate this issue at https://github.com/afestein/react-navigation-youtube-demo.

None of the combinations I’ve tried precisely replicate the “unauthorised overlay” error I’m seeing in my app, but they do demonstrate YouTube videos becoming unplayable when you switch tabs.

It has a few different branches:

master uses createBottomTabNavigator. This demonstrates the ‘black’ unplayable YouTube videos.

material-bottom-tabs uses the material bottom tabs. This is what I’m using in my React Native app and demonstrates the same behaviour as above.

with-stack-navigator uses a stack navigator. This branch seems to work perfectly fine when playing YouTube videos.

Hopefully this is a good starting point to try and troubleshoot this issue.

Any update on this issue?

This code is working for me.

const [iscontainerMounted, setIsContainerMounted] = useState(false);
const [containerWidth, setContainerWidth] = useState();

<View
	style={{
	  flex: 1,
	}}
	onLayout={({
	  nativeEvent: {
		layout: { width },
	  },
	}) => {
	  if (!iscontainerMounted) setIsContainerMounted(true);
	  if (containerWidth !== width) setContainerWidth(width);
	}}
	>
	{iscontainerMounted && (
	  <YouTube
		apiKey={constants.YT_KEY}
		videoId={videoData.id.videoId}
		play
		style={{
		  alignSelf: 'stretch',
		  height: PixelRatio.roundToNearestPixel(containerWidth / (16 / 9)),
		}}
	  />
	)}
</View>

@GoaGit you also need to comment this as it will result in a NullPointer otherwise https://github.com/wix/react-native-navigation/blob/0f4e30ac33e1f9793aa5efd63019f75cb3ad49d5/android/app/src/main/java/com/reactnativenavigation/layouts/SingleScreenLayout.java#L133 didn’t change anything else

Hey @DeviousM , I think i’ve found a solution (this bug doesn’t seem to be on the react-native-youtube lib, but rather with the wrapping drawer). If we have a similar setup (with a drawer wrapping the entire content of the app and all nested scenes), try doing something like this to your tweenHandler prop in the Drawer (assuming you’re using react-native-drawer).

The key thing that got it working for me was setting mainOverlay: width: 0. It seems as if the default main overlay of the drawer is covering the entire screen, so setting this to 0 seems to keep everything else working as is and not affect the video overlay. Definitely let me know if this workaround works for you too, thanks!

    return (
      <Drawer
        ref={ref => (this._drawer = ref)}
        open={state.open}
        type="displace"
        content={SideMenu}
        tapToClose={true}
        openDrawerOffset={0.5}
        panOpenMask={0.2}
        panCloseMask={0.4}
        panThreshold={0.5}
        negotiatePan={true}
        // tweenHandler={Drawer.tweenPresets.parallax}
        tweenHandler={ratio => ({
          main: { opacity: Math.max(0.54, 1 - ratio) },
          mainOverlay: { width: 0 }
        })}
      >
        <DefaultRenderer
          navigationState={children[0]}
          onNavigate={this.props.onNavigate}
        />
      </Drawer>
    );

I managed to make this work. Just make sure the view with youtube is not hidden or covered by another view AND the height of the component is properly set. So, I put padding in the wrapper view as following:

<View style={{
    height: (Dimensions.get("window").width * (9/16)) + 20 , 
    paddingVertical: 10
}}>
     <YouTube 
          apiKey="key"
          videoId={"id"}
          play 
          loop 
          style={{ alignSelf: 'stretch', height: (Dimensions.get("window").width * (9/16)) }}
          controls={1}
      />
</View>

@tafelito There seems to be some change that cause a bug in Android on RN > 0.44 I already solved it and will probably push the next few days

I’ve ran into a same problem, but with react-navigation. My components hierarchy is: Drawer -> StackNavigator -> TabNavigator. On one of the tab i render Youtube component, it works normally until i try to make it full-screen. The traceback from android studio is:

E/AndroidRuntime: FATAL EXCEPTION: main
                  Process: com.myapp, PID: 2718
                  java.lang.RuntimeException: Unable to start activity ComponentInfo{com.myapp/com.myapp.MainActivity}: android.app.Fragment$InstantiationException: Unable to instantiate fragment com.inprogress.reactnativeyoutube.VideoFragment: make sure class name exists, is public, and has an empty constructor that is public
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
                      at android.app.ActivityThread.handleRelaunchActivity(ActivityThread.java:4519)
                      at android.app.ActivityThread.-wrap19(ActivityThread.java)
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1483)
                      at android.os.Handler.dispatchMessage(Handler.java:102)
                      at android.os.Looper.loop(Looper.java:154)
                      at android.app.ActivityThread.main(ActivityThread.java:6119)
                      at java.lang.reflect.Method.invoke(Native Method)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
                   Caused by: android.app.Fragment$InstantiationException: Unable to instantiate fragment com.inprogress.reactnativeyoutube.VideoFragment: make sure class name exists, is public, and has an empty constructor that is public
                      at android.app.Fragment.instantiate(Fragment.java:633)
                      at android.app.FragmentState.instantiate(Fragment.java:111)
                      at android.app.FragmentManagerImpl.restoreAllState(FragmentManager.java:1942)
                      at android.app.FragmentController.restoreAllState(FragmentController.java:135)
                      at android.app.Activity.onCreate(Activity.java:957)
                      at com.facebook.react.ReactActivity.onCreate(ReactActivity.java:53)
                      at android.app.Activity.performCreate(Activity.java:6679)
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) 
                      at android.app.ActivityThread.handleRelaunchActivity(ActivityThread.java:4519) 
                      at android.app.ActivityThread.-wrap19(ActivityThread.java) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1483) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:154) 
                      at android.app.ActivityThread.main(ActivityThread.java:6119) 
                      at java.lang.reflect.Method.invoke(Native Method) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) 
                   Caused by: java.lang.InstantiationException: java.lang.Class<com.inprogress.reactnativeyoutube.VideoFragment> has no zero argument constructor
                      at java.lang.Class.newInstance(Native Method)
                      at android.app.Fragment.instantiate(Fragment.java:622)
                      at android.app.FragmentState.instantiate(Fragment.java:111) 
                      at android.app.FragmentManagerImpl.restoreAllState(FragmentManager.java:1942) 
                      at android.app.FragmentController.restoreAllState(FragmentController.java:135) 
                      at android.app.Activity.onCreate(Activity.java:957) 
                      at com.facebook.react.ReactActivity.onCreate(ReactActivity.java:53) 
                      at android.app.Activity.performCreate(Activity.java:6679) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) 
                      at android.app.ActivityThread.handleRelaunchActivity(ActivityThread.java:4519) 
                      at android.app.ActivityThread.-wrap19(ActivityThread.java) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1483) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:154) 
                      at android.app.ActivityThread.main(ActivityThread.java:6119) 
                      at java.lang.reflect.Method.invoke(Native Method) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) 

UPDATE I have tested the YouTubeStandaloneAndroid and it works perfectly with no crashes.

UPDATE Ok, temporary fix is to use react-native-thumbnail-video to render only preview image of the video, and, after clicking on it launch Standalone player. For now code looks like this:

import { YouTubeStandaloneAndroid } from 'react-native-youtube';
import Thumbnail from 'react-native-thumbnail-video';

const API_KEY = '***';

class VideoTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.video.videoId !== this.props.video.videoId) {
      this.setState({ show: false });
    }
  }

  openPlayer = (videoId) => {
    YouTubeStandaloneAndroid.playVideo({
      apiKey: API_KEY,
      videoId,
      autoplay: true
    })
      .then(() => console.log('Player closed'))
      .catch(e => console.error(e));
  };

  render() {
    const { title, date, videoId } = this.props.video;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.date}>{date}</Text>
        </View>
        {this.state.show &&
        <View style={styles.youtubeContainer}>
          <Thumbnail
            url={videoId}
            onPress={() => this.openPlayer(videoId)}
            imageHeight="100%"
          />
        </View>
        }
      </View>
    )
  }
}

I can confirm this is being caused by the wrapping drawer component @DeviousM . After removing the drawer seems that things work just fine… now to figure out how to integrate it without it causing issues

@davidohayon669 I’ve been following this issue as it unfolds and also am having the same trouble. If you need more information I hope I could help at least a little bit.

Project is using nativebase layouts (Container as a main wrapper for each component). Video loads up fine and plays for half a second then immediately stops with the overlay error. Also i have installed and relinked the latest version (alpha 6) and am on RN v44). Project is also using react-native-router-flux with a drawer component but I wouldn’t imagine that causing any issues.

This problem persists on both emulator && physical device

YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 789, right: 293, bottom: 15

code

return (
            <View style={styles.playerContainer}>
              <YouTube
                ref="youtubePlayer"
                videoId={song.songInfo.fkid}
                play={true}
                rel={false}
                fullscreen={false}
                showFullscreenButton={true}
                showinfo={false}
                controls={0}
                apiKey={myKey}
                origin={"https://www.youtube.com"}
                style={styles.youtube}
              />
            </View>
          );

styles.playerContainer = { 
    alignItems: "center",
    justifyContent: "center",
    marginTop: 300,
    marginLeft: 50
  }
styles.youtube= {
    alignSelf: "stretch",
    height: 300,
    width: 300
}

Edit1: trying a bunch of different configurations and it seems like it’s got something to do with a view much higher up in the tree. RCTView is super fucky with it

UI Youtube on android here style={{ height: 250, width: Layout.window.width, // with of your screen alignSelf: ‘stretch’, marginVertical: 10 }} Please add marginVertical <------ into style. It will work well

Exactly the same with me. It worked for me on the deprecated navigation. But It doesnt work with react-native-navigation

Just in case anyone is still facing this issue. I ended up using react-native-portal to place the player outside of the react-navigation. This fixed the issue at least for me.

For those who are using Wix/React Native Navigation, it had been fixed by version 6.7.5. Please see here for details https://github.com/wix/react-native-navigation/pull/6220 Here is my suggestion for using YT view in component:

• If you push or present a component that contains single YT view, you can use this lib
• If you want to load playlist or change videoId of YT in the same component, you can use https://github.com/LonelyCpp/react-native-youtube-iframe and pls test it on real Android device. Thanks @LonelyCpp 👍 👍

For anyone who using this with react navigation, I got this problem gone, just by adding the screen on the most top / root of stacknavigator. the one that usually the value of createAppContainer parameter. 🍻

@rochapablo @brasrox

Apparently, this is a react-navigation issue, especially if you’re using ‘createBottomTabNavigator’.

I switched to “react-navigation”: “2.18.2”. Which in turn needed me to remove ‘createAppContainer’ call from my main nav setup and return my nav simply without the AppContainer. It worked!

Same problem！ When some other view on top of “Youtube View”, this may case "UNAUTHORIZED_OVERLAY ". Youtube View needs to be on the top zIndex of the screen. I reslove this bug : move the “Youtube View” to top of you views.

@abbasfreestyle “Youtube View” can not be blocked by other views

@DeviousM @tafelito try alpha.6

@davidohayon669 did you manage to push it already? It’s kinda killing purpose of the app I’m creating at the moment 😛

Previously, I faced same issues. Then, I use below library for render the YouTube videos. https://www.npmjs.com/package/react_native_youtube_streamer

<YouTube
    videoId={youtubeId}
    apiKey="Your API Key"
    play
    fullscreen={false} // control whether the video should play in fullscreen or inline
    loop={true} // control whether the video should loop when ended
    onReady={()=>{
       
    }}
    onError={e => {
        console.log('[Youtube-Play-Error]', e)
    }}
    onEnd={() => {

    }}
    origin={"https://www.youtube.com"}
    style={{ width: '100%', resizeMode: 'stretch', height: 350 }}
  />

Please try with this code. I am sure you will get success with this. also, you guys getting the overlay issue because style have {alignSelf:‘stretch’ }. alignSelf should be one of center, flex-end and flex-start. that is why you guys got the error with youtube.

In my case I have several createMaterialTopTabNavigator() and the same with createStackNavigator(). The problem wasn’t navigation, was the “MenuProvider” set in “App”.

This way it works:

AppNavigationContainer.tsx:

const MyOffersTabStack = createMaterialTopTabNavigator(
    {
        MisCuponesAhorroScreen,
        MisFavoritosScreen,
    },
    {
        tabBarPosition: 'top',
        initialRouteName: 'MisCuponesAhorroScreen',
        lazy: true,
        swipeEnabled: true,
        animationEnabled: true,
        navigationOptions: {
            header: null,
            mode: 'float',
        },
        tabBarComponent: MCMyOffersTabBar,
    }
);

const HomeTabStack = createMaterialTopTabNavigator(
    {
        HomeScreen,
        StoreScreen,
        MyOffersTabStack,
        MyShoppingListsScreen,
        ProfileScreen
    },
    {
        tabBarPosition: 'bottom',
        initialRouteName: 'HomeScreen',
        lazy: true,
        swipeEnabled: () => LoginUtils.isUserLogged(),
        animationEnabled: true,
        // @ts-ignore
        navigationOptions: ({navigation}) => ({
            tabBarVisible: tabbarVisible(navigation),
            header: null,
            mode: 'float'
        }),
        tabBarComponent: MCHomeTabBar,
    }
);

const MainStack = createStackNavigator(
    {
        MCSplashScreen,
        HomeTabStack,
        LoginScreen,
        RegisterScreen,
        StoresFinderScreen,
        ...,
        HelpScreen,
        YoutubePlayerScreen,
    },
    {
        initialRouteName: 'MCSplashScreen',
        headerMode: 'none',
        transitionConfig: () => Platform.OS === 'ios' ? fromRight() : fromBottom(),
    }
);

const AppStack = createStackNavigator(
    {
        Main: {
            screen: MainStack,
        },
        LoadingModal,
        AddExtraIdentificationModal,
        RecoverPasswordModal,
        ...,
        MCAddProductFilterModal,
    },
    {
        mode: 'modal',
        headerMode: 'none',
        transparentCard: true,
        initialRouteName: 'Main',
        navigationOptions: {
            swipeEnabled: false,
        },
        transitionConfig: () => fadeIn(),
    }
);

/**
 * Exporting the AppNavigationContainer of the App.
 * Will be exposed all the available screens and modals.
 */
export default createAppContainer(AppStack);

and the App.tsx:

public render() {
        return (
            {/*<MenuProvider> THIS was the problem (move to the screen that really needs it)*/ }
            <View style={{flex: 1}}> 
                <StatusBar barStyle={'dark-content'} translucent backgroundColor={Colors.TRANSPARENT} />
                <Provider store={App.APP_STORE}>
                    <View style={{flex: 1, backgroundColor: Colors.WHITE_FAFAFA}}>
                        <AppNavigationContainer ref={(view: any) => NAV_REF = view} />
                    </View>
                </Provider>
            </View>
            {/*</ MenuProvider> THIS was the problem */ }
        );
    }

and YoutubePlayerScreen.tsx:

import React from 'react';
import {IScreenDefaultProps} from '../../utils/GenericUtils';
import Config from 'react-native-config';
import YouTube from 'react-native-youtube';
import {StatusBar} from 'react-native';

interface IYoutubePlayerScreenArgs {
    url: string;
}

export default class YoutubePlayerScreen extends React.Component<IScreenDefaultProps<IYoutubePlayerScreenArgs>> {

    public componentDidMount(): void {
        StatusBar.setHidden(true);
    }

    public componentWillUnmount(): void {
        StatusBar.setHidden(false);
    }

    public render() {
        const splitUrl = this.props.navigation.getParam('url', '').split('/');
        const videoId = splitUrl[splitUrl.length - 1];

        return (
            <YouTube
                play
                videoId={videoId}
                showinfo={false}
                modestbranding
                showFullscreenButton={false}
                onReady={e => console.log('onReady', e)}
                onChangeState={e => console.log('onChangeState', e)}
                onChangeQuality={e => console.log('onChangeQuality', e)}
                onError={e => console.log('onError', e)}
                style={{width: '100%', height: '100%'}}
                apiKey={Config.ANDROID_API_KEY}
            />
        )
    }
}

With this configuration, the YoutubePlayerScreen.tsx works correctly. Hope someone helps!

For example if you have a file that use createAppContainer like this :

Example :

Homepage.js

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

App.js

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

And you have a component that have react-native-vdeo in it, lets call the component is <YoutubeVideo />

then modify the Homepage.js (the stackNavigator that putted into createAppContainer a.k.a the root), like this

Homepage.js

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import YoutubeVideo from './YoutubeVideo';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Video: {
    screen: YoutubeVideo,
  },
  Home: {
    screen: HomeScreen,
  },
  //Dont put it here it will not resolve the UNAUTHORIZED_OVERLAY problem
});

export default createAppContainer(AppNavigator);

@marksturm @Tercera I’m sorry for the slow response i’m pretty hectic this week 😅😅😅

Had the same problem when i changed from stackNavigatior to drawerNavigatior

EDIT:

I’ve found a workaround for my problem, i created a new stackNavigator inside the switchNavigator with the youtube player view and manually handled the navigation

const TutorialVideoStack = createStackNavigator({
	tutorialView: {
		screen: TutorialView,
		navigationOptions: ({ navigation }) => ({
			title: 'Tutorial',
			headerLeft: <BackArrow navigation={navigation} />,
			...navigationConstants,
		}),
	},
});

export default createAppContainer(
	createSwitchNavigator(
		{
			App: AppStack,
			Auth: AuthStack,
			Tutorial: TutorialVideoStack,
		},
		{
			initialRouteName: 'Auth',
		},
	),
);

Same here error: "UNAUTHORIZED_OVERLAY".

"react": "16.8.3",
"react-native": "0.59.9",
"react-native-youtube": "^1.1.0",
"react-navigation": "^3.11.0",

So we haven’t found a solution to this? I’m going to file an issue with react-navigation and see wha they say. I’m on RN 59.2, react-navigation 3.3.2 and react-native-youtube 1.1.0

The issue is here in case any of y’all want to go over and comment/add your thoughts.

UPDATE: We found that it worked on Android at 2.18.2

@GoaGit SnackbarAndFabContainer is used not only in SingleScreenLayout, but also in BottomTabsLayout. If your app is tab based, try commenting out everything related to snackbarAndFabContainer in BottomTabsLayout. That worked for me.

@nimamyscreen try delaying the mounting of the <YouTube /> to after the navigation ended. Maybe the animation of the navigation disrupts the native component.

I would try to find some event to attach to, or just try 500-1000ms delay just to test if the problem got anything to do with the navigation event

This not working, even using the sample example. I was never able to get the video running (One sec then it pauses again) giving UNAUTHORIZED_OVERLAY I took out all other components, nothing else except the Youtube. Tried to adjust margins as well; but still same result.

@davidohayon669 I think the problem with react-native-navigation and probably other navigation libraries that uses the same logic, is that all the content is put inside a parent layout, where then you get access to the FAB or the snackbar or even the drawer. So the relative layout that the player uses, ends up within the main layout, hence it complains being covered.

I’m not completely sure about the internals of react-navigation because I haven’t used it yet, but I’ll give it a try and see how it goes.

@davidohayon669 I just tried the example app with the alpha.6 and it’s working fine for me. But I tried it within my app that uses react-native-navigation and it’s not working. I’m trying to figure it out what the issue could be.

Thanks for the update anyway

@davidohayon669 - unfortunately, problem persists. If this can help that’s the output from logcat:

06-25 17:35:33.725 16783-16783/com.vloggerapp W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.view.ReactViewGroup{da778f3 V.E...... ........ 0,0-1080,1936 #22}. YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 1, top: 319, right: 1, bottom: 929..