Set WebView initial zoom level (start it so page fits)

Question

I have a webview, and I set it's html like this:

<WebView source={{ html:body }} style={{ width:400; }} scalesPageToFit />

However on load, the page within is zoomed at 100% so its outside of the boundaries. Is it possible to start the zoom at a level so it fits perfectly inside the boundaries?

Here is a screenshot of what it looks like right now: https://i.sstatic.net/CiNeg.png

I want it to start zoomed so all content fits like this: https://i.sstatic.net/YN3BT.png (i manually pinched to zoom out here)

I thought the scalesPageToFit prop would do this, but its not doing anything, whether true or false. Does anyone know what scalesPageToFit does?

Thanks

Answer 1

scalesPageToFit avoids your web page to outscale in the webView, so that its minimum zoom does not show empty spaces. Since React Native Docs version 0.52 a new prop initialScale is provided and seems to be exactly what you're looking for. Unfortunately it has never been added to the code: an issue is still open.

So, in order to achieve your objective, you have to use nativeConfig to override the native component behavior: what I mean is fully explained in these two examples:

1. First
2. Second