React native: webview height

Question

Hi I know it\'s a known issue about the auto height of webview in react native, and I have tried all the possibles solutions I\'ve found on the internet such as :

ht

Answer 1

A reliable implementation of this behavior is with useAutoheight hook from @formidable-webview/webshell library. The latter allows to inject "features" into WebViews, e.g. scripts and behaviors. In this example, we will use 3 features + the aforementioned hook:

• HandleHTMLDimensionsFeature which is required by useAutoheight hook to get document size updates;
• ForceResponsiveViewportFeature to work around mobile virtual viewport;
• ForceElementSizeFeature to work around cyclic size constraints

This component should work with any webpage.

import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature,
  ForceResponsiveViewportFeature,
  ForceElementSizeFeature,
  useAutoheight
} from '@formidable-webview/webshell';
import WebView from 'react-native-webview';

const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature(),
  new ForceResponsiveViewportFeature({ maxScale: 1 }),
  new ForceElementSizeFeature({
    target: 'body',
    heightValue: 'auto',
    widthValue: 'auto'
  })
);

export default function ResilientAutoheightWebView(props) {
  const { autoheightWebshellProps } = useAutoheight({
    webshellProps: props
  });
  return <Webshell {...autoheightWebshellProps} />;
}

More resources:

• Try this on Expo
• Full guide here.

Answer 2

I recommend react-native-autoheight-webview. it perfect work for me. https://github.com/iou90/react-native-autoheight-webview