WebView height doesn't change dynamically

Question

I am trying to set the height of WebView dynamically based on the instagram embed post. I am getting the correct height in onMessage event.nativeEvent.data. The state webViewHeight is set correctly but the WebView doesn't change.

Here is my component:

import React, { FC, useEffect, useState } from "react";
import { Dimensions, StyleSheet } from "react-native";
import { getInstagramPost } from "../api/api.services";
import WebView, { WebViewMessageEvent } from "react-native-webview";

const { width: windowWidth } = Dimensions.get("window");

type Props = {
  url: string;
};

const InstagramWrapper: FC<Props> = ({ url }) => {
  const [response, setResponse] = useState<any>();
  const [webViewHeight, setWebViewHeight] = useState(784);

  useEffect(() => {
    getInstagramPost(url)
      .then((response) => {
        const html = response.data.html;
        const index = html.indexOf("//platform.instagram.com");
        const newHtml = html
          .slice(0, index)
          .concat("https:")
          .concat(html.slice(index));
        const htmlStart =
          '<HTML><HEAD><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"></HEAD><BODY>';
        const htmlEnd = "</BODY></HTML>";
        let htmlString = htmlStart.concat(newHtml).concat(htmlEnd);
        response.data.html = htmlString;
        setResponse(response.data);
      })
      .catch((error) => {
        console.log(error.response.data); // implement exception handler
      });
  }, []);

  const onWebViewMessage = (event: WebViewMessageEvent) => {
    setWebViewHeight(Number(event.nativeEvent.data));
  };

  if (!response) {
    return null;
  }

  const styles = StyleSheet.create({
    webView: {
      width: windowWidth - 24,
      minHeight: webViewHeight,
      opacity: 0.99,
    },
  });

  return (
    <WebView
      source={{
        html: response.html,
      }}
      javaScriptEnabled
      automaticallyAdjustContentInsets={false}
      scrollEnabled={false}
      androidHardwareAccelerationDisabled={true}
      onMessage={onWebViewMessage}
      injectedJavaScript="window.ReactNativeWebView.postMessage(document.body.scrollHeight)"
      style={styles.webView}
    />
  );
};

export default InstagramWrapper;

I have used the answers provided here: React native: webview height

I have also tried using https://github.com/iou90/react-native-autoheight-webview but it didn't work.

Is there a different way to achieve this or am I missing something here?

WebView height doesn't change dynamically

0 Answers0