Force React-Native webview to load url as Mobile?

Question

In java with android studio I achieve this by adding this code:

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);

webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);

but I don't know how to do this in React-Native, I try some css style but nothing did the trick.

here is my webview in React:

<WebView
  ref="WebView"
  scalesPageToFit={true}
  onLoadStart={this.onLoadStart}
  onLoadEnd={this.onLoadEnd}
  source = {{ uri:this.props.navigation.getParam('main_url', 
  'https://xxxx.xxx/')}}
  style={{backgroundColor: 'transparent',width: '100%'}}
/>:null}

The WebView shows the website though, right? Just not in a mobile layout? — romin21, Feb 24 '19 at 18:17
yes, it show the desktop version, and works ok, but we need to load the mobilie version — JonTargaryen, Feb 24 '19 at 18:23
What device are you using to test this? When you open that website in that device's browser, do you see the mobile version? — romin21, Feb 24 '19 at 18:27
Yes we see mobile version on the device if we use chrome for example... — JonTargaryen, Feb 24 '19 at 18:34
@SanyamJain cant you tell me what user agent use to load mobile versions? — JonTargaryen, Feb 24 '19 at 18:35

score 2 · Accepted Answer · edited Dec 31 '20 at 06:07

2

Use user-agent.

Note: This used to only work in Android. For iOS, you could use this link Change User-Agent Now it seems to work on both iOS and android

<Webview
  userAgent="Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3714.0 Mobile Safari/537.36"
/>

edited Dec 31 '20 at 06:07

Raphael Pinel

2,352
24
26

answered Feb 25 '19 at 06:19

Sanyam Jain

1,154
6
9

score 0 · Answer 2 · answered Feb 24 '19 at 18:43

0

Inspired from Sanyam's comment, you need to set user-agent for it to load as mobile:

<WebView
    userAgent={DeviceInfo.getUserAgent() + " - MYAPPNAME - android "}
    {...otherProps}
/>

answered Feb 24 '19 at 18:43

romin21

1,532
1
14
35

Force React-Native webview to load url as Mobile?

2 Answers2