React Native WebView autoheight for video

Question

I am showing videos in a WebView from a videoUrl, which is a YouTube embed link.

    <WebView
        javaScriptEnabled={true}
        allowsFullscreenVideo={true}
        allowsInlineMediaPlayback={true}
        ref={(ref) => { webview = ref }}
        onNavigationStateChange={(event) => {
                if(event.url !== videoUrl) {
                        webview.stopLoading()
                        Linking.openURL(event.url)
                }
        }}
        source={{ uri: videoUrl }}
    />

When setting a height or minHeight, it shows at that height and the full width, and the video works correctly. The problem is that I have found no way of setting the height automatically, so depending on the device width the video is usually cropped. I have already tried these libraries, to no avail:

https://github.com/iou90/react-native-autoheight-webview
https://github.com/scazzy/react-native-webview-autoheight

Hi, did you find out any solution, I am facing the same issue — SHIVANI GARG

Jules Sam. Randolph Jules Sam. Randolph · Accepted Answer · 2020-10-09T18:43:14

You can useAutoheight hook from webshell library:

import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature,
  HandleLinkPressFeature,
  useAutoheight
} from '@formidable-webview/webshell';
import { Linking } from 'react-native';
import WebView from 'react-native-webview';
const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature(),
  new HandleLinkPressFeature()
);
export default function MinimalAutoheightWebView(props) {
  const { autoheightWebshellProps } = useAutoheight({
    webshellProps: {
      ...props,
      allowsInlineMediaPlayback: true,
      allowsFullscreenVideo: true,
      onDOMLinkPress: (e) => Linking.openURL(e.uri)
    }
  });
  return <Webshell {...autoheightWebshellProps} />;
}

PS: I replaced onNavigationStateChange with HandleLinkPressFeature + onDOMLinkPress which is more reliable.

Full guide here.

React Native WebView autoheight for video

1 Answers