Height too large with explicitly set Width

[nickbassirpour]

I have html I am trying to render with the original width of the page because it fits fine when viewing the website on mobile and all of the images and text have explicitly set sizes (this is a very old website). I essentially want to be able to use the default width of the page, 607, but still have the width take up the entire width of the phone.

Here is the webshell:

import React, { ComponentProps } from "react";
import makeWebshell, {
  HandleHTMLDimensionsFeature,
  useAutoheight,
} from "@formidable-webview/webshell";
import WebView from "react-native-webview";

const Webshell = makeWebshell(WebView, new HandleHTMLDimensionsFeature());

export type WebshellProps = ComponentProps<typeof Webshell>;

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

And here is how I'm using it in my component with the scrollview:

<ScrollView
      contentContainerStyle={{
        flexGrow: 1,
      }}
    >
      <View
        style={{ flex: 1, flexDirection: "column", backgroundColor: "white" }}
      >
        <View>
          <Text>Hello World!</Text>
        </View>
        <AutoHeightWebView originWhitelist={["*"]} source={article} />
      </View>
    </ScrollView>

When the width is hard-coded and I try to render the html on the webshell (or any autoheight-webview), it zooms in too much.

<table border="0" cellpadding="2" cellspacing="1" width="607">

Untitled.video.-.Made.with.Clipchamp.2.mp4

I looked up guides online and the solutions revolved around adjusting the meta tag at the top of the html. When I adjust it to fit the size of the width, the width ends up fitting just fine but when the height is calculated it calculates it to an astronomical degree and if I drag the scroll bar the content at the top disappears:

<meta name="viewport" content="initial-scale=0.63, maximum-scale=0.63, user-scalable=no">

Untitled.video.-.Made.with.Clipchamp.1.mp4

So essentially I either have a width that isn't working with a correct height or a height that is far too big with a correct width.

I tried explicitly setting the width in the useAutoheight function but it didn't work.

I have used the regular WebView and tried to grab the height using this method:

https://yelotofu.com/reactnative-why-your-webview-disappears-inside-scrollview-c6057c9ac6dd

but this also sets the height far too big (although not as far as the webshell does).

I have used the react-native-autoheight-webview as well but this leads to the same issue as the Webshell.

I am close to giving up and just adjusting all of the heights of the images and text but as this may lead to bugs if I automate it (since there are many other articles I wanted to add), I wanted to see if it was possible to leave the html as little touched as possible and still render everything on the page properly.

Thank you

[nickbassirpour]

I have decided to just use my webscraper to adjust the sizes of the text and images as best as I can because if I have to do anymore manipulation of the html height and width it will likely not work on all screens so this is the better solution. If anyone wants to take crack at it still please let me know!