Browse Source

Docs updates

Jamon Holmgren 6 years ago
parent
commit
935e9518ee
2 changed files with 51 additions and 2 deletions
  1. 49
    2
      docs/Guide.md
  2. 2
    0
      docs/Reference.md

+ 49
- 2
docs/Guide.md View File

@@ -1,5 +1,52 @@
1 1
 # React Native WebView Guide
2 2
 
3
-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 you should have a good sense for how the WebView works and common patterns for using the WebView.
3
+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.
4
+
5
+_This guide is currently a work in progress._
6
+
7
+## Guide Index
8
+
9
+- [Basic Inline HTML](Guide.md#basic-inline-html)
10
+- [Basic URL Source](Guide.md#basic-url-source)
11
+
12
+### Basic inline HTML
13
+
14
+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 `['*']`.
15
+
16
+```js
17
+import React, { Component } from 'react';
18
+import { WebView } from 'react-native-webview';
19
+
20
+class MyInlineWeb extends Component {
21
+  render() {
22
+    return (
23
+      <WebView
24
+        originWhitelist={['*']}
25
+        source={{ html: '<h1>This is a static HTML source!</h1>' }}
26
+      />
27
+    );
28
+  }
29
+}
30
+```
31
+
32
+Passing a new static html source will cause the WebView to rerender.
33
+
34
+### Basic URL Source
35
+
36
+This is the most common use-case for WebView.
37
+
38
+```js
39
+import React, { Component } from 'react';
40
+import { WebView } from 'react-native-webview';
41
+
42
+class MyWeb extends Component {
43
+  render() {
44
+    return (
45
+      <WebView
46
+        source={{uri: 'https://infinite.red/react-native'}}
47
+      />
48
+    );
49
+  }
50
+}
51
+```
4 52
 
5
-_Coming soon!_

+ 2
- 0
docs/Reference.md View File

@@ -71,6 +71,8 @@ The object passed to `source` can have either of the following shapes:
71 71
 
72 72
 **Static HTML**
73 73
 
74
+_Note that using static HTML requires the WebView property [originWhiteList](Reference.md#originWhiteList) to `['*']`._
75
+
74 76
 * `html` (string) - A static HTML page to display in the WebView.
75 77
 * `baseUrl` (string) - The base URL to be used for any relative links in the HTML.
76 78