React-native: React native web view zooms webpage on iOS.. works fine on android...

[sarathvad1811]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

I am using WebView of react native to display a web page. It show correctly on android mobile. But it gets zoomed unnecessarily on iOS. I have this meta data added to the site url which webview is loading.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Still No Idea what's causing the issue.

It's opening quite well and correctly when I open the link in Safari browser of the same mobile

Environment:
OS: macOS High Sierra 10.13.4
Node: 9.4.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.2 => 0.53.2

Steps to Reproduce

1. Load this url: http://v4.vaave.net/albums.dz into react-native WebView component
2. Check the result on android and ios. On iOS you can observe the view is zoomed
   The code is
   import {WebView as NativeWebView} from "react-native";

<NativeWebView startInLoadingState scalesPageToFit source={{ uri: this.props.url }} ref={webview => { this.myWebView = webview; }} />

Expected Behavior

1. It should not be zoomed on both iOS and android
   It's opening quite well and correctly when I open the link in Safari browser of the same mobile like in the below screenshot which is actually a screenshot of android mobile

This One

Actual Behavior

It is getting zoomed

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[sarathvad1811]

Yes the issue is on latest 0.55 too

[rsinnet]

Any update on this?

[forrestgrant]

Same. React Native: 0.55.4

[Feng999]

try to modify 'scalesPageToFit' of webview.

[forrestgrant]

@Feng999, thanks for the reply. I still experience the issue with salesPageToFit set to either true or false.

[forrestgrant]

I just got this working. The bug—for me—is not related to React Native. In my case, the page loaded insecure assets that were blocked by iOS App Transport Security. To check if this is affecting your app, try:

<key>NSAppTransportSecurity</key>
<dict>
  <!--Include to allow all connections (DANGER)-->
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

[452MJ]

+1

[452MJ]

[452MJ]

maybe you can try the folow code:

window.onload = function(){
    //resize code
   ...
}

[ItsNoHax]

Try giving your webview a height and a width. For example your screen dimension's width/height.

[danaee123]

same,to show image in android
when
my code is
ref={ref => this.WEBVIEW_REF = ref}
style={{ justifyContent: 'center',alignItems: 'center',width:'100%',height:height,}}
source={{uri: 'https://test.com/images/s1/s1.jpg'}}
/>

zoomed unnecessarily in first load

[fangrm]

+1. The image uri is 'https://img.alicdn.com/imgextra/i1/4045187964/TB2z.KQpAomBKNjSZFqXXXtqVXa_!!4045187964.jpg'. it gets zoomed unnecessarily on iOS.

[Titozzz]

React-native Webview component is being extracted to https://github.com/react-native-community/react-native-webview. Please if that bug still exists with the extracted component, open an issue on the other repository, as it will probably be easier to get attention there.

Thank you !

[yakupad]

try to modify 'scalesPageToFit' of webview.

Thanks! Worked for me 💯

[LBCross]

try to modify 'scalesPageToFit' of webview.

https://github.com/ShivamKJJW/react-native/commit/d42290959364963f3cb3717b9a2464a78ce13f6f