mirror of
https://github.com/status-im/react-native-webview.git
synced 2025-02-23 01:08:36 +00:00
752a5b295a
Fixes #33 I could really use some help from an Android developer on this one, because I just "made it work", don't know how to "make it work good". Some things that should be reviewed: - [ ] validate Android 5.0 devices (my emulator work, but outputs some weird sounds; a Galaxy 4 I tested on crashes) - [ ] validate Android 5.1 devices (emulator works, couldn't find a real device) - [ ] how to handle File Extensions? (https://www.w3schools.com/tags/att_input_accept.asp) I'm sure that there's more refactoring to be done, so any help and advice would be appreciated.
108 lines
2.6 KiB
Markdown
108 lines
2.6 KiB
Markdown
# React Native WebView Guide
|
|
|
|
This document walks you through the most common use cases for React Native WebView. It doesn't cover [the full API](Reference.md), but after reading it and looking at the sample code snippets you should have a good sense for how the WebView works and common patterns for using the WebView.
|
|
|
|
_This guide is currently a work in progress._
|
|
|
|
## Guide Index
|
|
|
|
- [Basic Inline HTML](Guide.md#basic-inline-html)
|
|
- [Basic URL Source](Guide.md#basic-url-source)
|
|
|
|
### Basic inline HTML
|
|
|
|
The simplest way to use the WebView is to simply pipe in the HTML you want to display. Note that setting an `html` source requires the [originWhiteList](Reference.md#originWhiteList) property to be set to `['*']`.
|
|
|
|
```js
|
|
import React, { Component } from 'react';
|
|
import { WebView } from 'react-native-webview';
|
|
|
|
class MyInlineWeb extends Component {
|
|
render() {
|
|
return (
|
|
<WebView
|
|
originWhitelist={['*']}
|
|
source={{ html: '<h1>This is a static HTML source!</h1>' }}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Passing a new static html source will cause the WebView to rerender.
|
|
|
|
### Basic URL Source
|
|
|
|
This is the most common use-case for WebView.
|
|
|
|
```js
|
|
import React, { Component } from 'react';
|
|
import { WebView } from 'react-native-webview';
|
|
|
|
class MyWeb extends Component {
|
|
render() {
|
|
return (
|
|
<WebView
|
|
source={{uri: 'https://infinite.red/react-native'}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Add support for File Upload
|
|
|
|
##### iOS
|
|
|
|
For iOS, all you need to do is specify the permissions in your `ios/[project]/Info.plist` file:
|
|
|
|
Photo capture:
|
|
```
|
|
<key>NSCameraUsageDescription</key>
|
|
<string>Take pictures for certain activities</string>
|
|
```
|
|
|
|
Gallery selection:
|
|
```
|
|
<key>NSPhotoLibraryUsageDescription</key>
|
|
<string>Select pictures for certain activities</string>
|
|
```
|
|
|
|
Video recording:
|
|
```
|
|
<key>NSMicrophoneUsageDescription</key>
|
|
<string>Need microphone access for recording videos</string>
|
|
```
|
|
|
|
##### Android
|
|
|
|
Add permission in AndroidManifest.xml:
|
|
```xml
|
|
<manifest ...>
|
|
......
|
|
|
|
<!-- this is required only for Android 4.1-5.1 (api 16-22) -->
|
|
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
|
|
|
|
......
|
|
</manifest>
|
|
```
|
|
|
|
##### Check for File Upload support, with `static isFileUploadSupported()`
|
|
|
|
File Upload using `<input type="file" />` is not supported for Android 4.4 KitKat (see [details](https://github.com/delight-im/Android-AdvancedWebView/issues/4#issuecomment-70372146)):
|
|
|
|
```
|
|
import { WebView } from "react-native-webview";
|
|
|
|
WebView.isFileUploadSupported().then(res => {
|
|
if (res === true) {
|
|
// file upload is supported
|
|
} else {
|
|
// not file upload support
|
|
}
|
|
});
|
|
|
|
```
|
|
|