https://github.com/shqld/react-native-auto-expanding-webview

Auto-expanding WebView for React Native
https://github.com/shqld/react-native-auto-expanding-webview

android ios reactnative webview

Last synced: 17 days ago
JSON representation

Auto-expanding WebView for React Native

• Host: GitHub
• URL: https://github.com/shqld/react-native-auto-expanding-webview
• Owner: shqld
• License: mit
• Created: 2017-08-17T04:44:37.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-09-04T15:33:42.000Z (about 5 years ago)
• Last Synced: 2024-10-03T07:58:21.222Z (about 1 month ago)
• Topics: android, ios, reactnative, webview
• Language: JavaScript
• Size: 37.1 KB
• Stars: 9
• Watchers: 1
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-auto-expanding-webview

Auto-expanding WebView for React Native

## Feature

This can be nested in `ScrollView`

### Why this?

This module

- fully accepts all props of `WebView` in React Native for customizability

- is written only in JavaScript

## Requirements

This module has not yet been tested  

in every version except for:

  - `react`: `16.0.0-alpha.12`

  - `react-native`: `0.47.1`

## Installation

```sh

$ npm install react-native-auto-expanding-webview

```

## Props

- `LoadingViewComponent`: `ReactClass` | `React.Element`

- `onLoad`: `(contentHeight) => void`

## Example

```jsx

import { ScrollView, Text, ActivityIndicator, Dimensions } from 'react-native';

import AutoExpandingWebView from 'react-native-auto-expanding-webview';

const embedHtml = (html) => `

  

  

    ${html}

  

`;

const Content = ({ children }) => (

   console.log(contentHeight)}

  />

);

const Title = ({ children }) => (

  

    { children }

  

);

const Footer = ({ children }) => (

  

    { children }

  

);

const ArticleView = ({ article }) => (

  

    { article.title }

    { article.content }

    { article.footer }

  

);

```