https://github.com/scazzy/react-native-webview-autoheight

WebView which sets it's height automatically with minimal efforts
https://github.com/scazzy/react-native-webview-autoheight

react-native webview

Last synced: about 1 month ago
JSON representation

WebView which sets it's height automatically with minimal efforts

• Host: GitHub
• URL: https://github.com/scazzy/react-native-webview-autoheight
• Owner: scazzy
• Created: 2017-01-23T07:51:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-04-23T02:15:37.000Z (about 2 years ago)
• Last Synced: 2025-03-30T02:05:44.348Z (about 2 months ago)
• Topics: react-native, webview
• Language: JavaScript
• Size: 17.6 KB
• Stars: 109
• Watchers: 4
• Forks: 75
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native WebView Autoheight

React Native WebView which sets it's height automatically with minimal efforts.

You can also add custom CSS style or javascript to your webview using below example.

![Downloads](https://nodei.co/npm/react-native-webview-autoheight.png?downloads=true&stars=true)

## Installation

> npm install --save react-native-webview-autoheight

## Usage

```

import MyWebView from 'react-native-webview-autoheight';

const customStyle = "* {max-width: 100%;} body {font-family: sans-serif;} h1 {color: red;}";

const htmlContent = "
This is title
Throw your entire HTML here
";


```

```

```

## Props

* Same as https://facebook.github.io/react-native/docs/webview.html#props

* `autoHeight` (default: true)

* `width` (default: Screen width)

* `defaultHeight` (default height unless autoHeight)

## How it works

It is a very simple wrapper around the built-in React Native Webview, which updates the height of the webview based on a state change using `onNavigationStateChange`.

### Feel free to add issues or feature requests