Scale webpage in webview

#1

Okay I have been searching for an answer for this but can not find one.

I have the following code that loads a webpage in a webview. What I want to do is scale the webpage to fit the width of the screen. This should be both on portrait and landscape. Granted on some devices and some webpages it will be really small.

I would like to do this without any changes to the webpage as I want it to be as generic as possible but if a solution requires it it would at least solve the issue.

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class App extends Component {
  render() {
    const url = 'http://dashingdemo.herokuapp.com/sample';
    return (
      <WebView
        source={{
          uri: url,
        }}
        onNavigationStateChange={this.onNavigationStateChange}
        startInLoadingState
        scalesPageToFit={true}
        javaScriptEnabled
        style={{ flex: 1 }}
      />
    );
  }
}
#2

Try using react-native-autoheight-webview module instead.