react-native webview embed youtube video doesn't have fullscreen options in Android

Question

I am trying to embed youtube videos in my react-native app, it is working fine but I am unable to get fullscreen button/ functionality for those videos. Here is my code:

 <WebView
  source={{uri: "https://www.youtube.com/embed/VaC9CivyV7I?version=3&enablejsapi=1&rel=0&autoplay=1&showinfo=0&controls=1&modestbranding=0"}}
style={{height:240, width:width, justifyContent:'center', alignItems:'center', backgroundColor:'black'}}
 />

I even tried using iframe as an html with allowfullscren="true", but I didn't get any success.

Edit

After some more search I come across this document for Full screen support, and come to know that I need to implement onShowCustomView and onHideCustomView within webView.setWebChromeClient, I dig little bit in my app's node_modules folder and found out ReactWebViewManager.java at location *"../node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java".

It seems that may need to add some custom code webView.setWebChromeClient, but as I am not that good in native programming, hence not being able to proceed further.

Answer 1

The WebView component accepts an allowsFullscreenVideo prop. When this prop is true, the fullscreen icon will become active.

See https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#allowsfullscreenvideo.