chore(docs): Add API Examples in reference documentation (#329)

* Add reference examples for:
- onError
- onNavigationStateChange
- originWhiteList
- renderError
- renderLoading
- onShouldStartLoadWithRequest

* Update to use jsx as code
Add properties of objects passed into methods

* Add examples for:
- onLoad
- onLoadEnd
- onLoadStart
- onLoadProgress
- style

* Add object descriptions, fix style issues, and remove onShouldStartLoad example

Object Descriptions for:
- onLoad
- onLoadEnd
- onLoadStart
- onLoadProgress

* Update Reference.md

docs/Reference.md

@@ -147,6 +147,35 @@ Function that is invoked when the `WebView` load fails.
 | -------- | -------- |
 | function | No       |
 
+Example:
+
+```jsx
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   onError={(syntheticEvent) => {
+     const { nativeEvent } = syntheticEvent
+     console.warn('WebView error: ', nativeEvent)
+   }}
+ />
+```
+
+Function passed to `onError` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
+
+ ```
+ canGoBack
+ canGoForward
+ code
+ description
+ didFailProvisionalNavigation
+ domain
+ loading
+ target
+ title
+ url
+```
+> **_Note_**
+> Domain is only used on iOS
+
 ---
 
 ### `onLoad`
@@ -157,6 +186,29 @@ Function that is invoked when the `WebView` has finished loading.
 | -------- | -------- |
 | function | No       |
 
+Example:
+
+```jsx
+<WebView
+  source={{uri: 'https://facebook.github.io/react-native'}}
+  onLoad={(syntheticEvent) => {
+    const { nativeEvent } = syntheticEvent;
+    this.url = nativeEvent.url;
+  }}
+/>
+```
+
+Function passed to `onLoad` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
+
+ ```
+ canGoBack
+ canGoForward
+ loading
+ target
+ title
+ url
+```
+
 ---
 
 ### `onLoadEnd`
@@ -167,6 +219,31 @@ Function that is invoked when the `WebView` load succeeds or fails.
 | -------- | -------- |
 | function | No       |
 
+
+Example:
+
+```jsx
+<WebView
+  source={{uri: 'https://facebook.github.io/react-native'}}
+  onLoadEnd={(syntheticEvent) => {
+    // update component to be aware of loading status
+    const { nativeEvent } = syntheticEvent;
+    this.isLoading = nativeEvent.loading;
+  }}
+/>
+```
+
+Function passed to `onLoadEnd` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
+
+ ```
+ canGoBack
+ canGoForward
+ loading
+ target
+ title
+ url
+```
+
 ---
 
 ### `onLoadStart`
@@ -177,6 +254,31 @@ Function that is invoked when the `WebView` starts loading.
 | -------- | -------- |
 | function | No       |
 
+
+Example:
+
+```jsx
+<WebView
+  source={{uri: 'https://facebook.github.io/react-native/='}}
+  onLoadStart={(syntheticEvent) => {
+    // update component to be aware of loading status
+    const { nativeEvent } = syntheticEvent;
+    this.isLoading = nativeEvent.loading;
+  }}
+/>
+```
+
+Function passed to `onLoadStart` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
+
+ ```
+ canGoBack
+ canGoForward
+ loading
+ target
+ title
+ url
+```
+
 ---
 
 ### `onLoadProgress`
@@ -192,6 +294,29 @@ Function that is invoked when the `WebView` is loading.
 | -------- | -------- |
 | function | No       |
 
+Example:
+
+```jsx
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   onLoadProgress={({ nativeEvent }) => {
+     this.loadingProgress = nativeEvent.progress
+   }}
+ />
+```
+
+Function passed to `onLoadProgress` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
+
+ ```
+ canGoBack
+ canGoForward
+ loading
+ progress
+ target
+ title
+ url
+```
+
 ---
 
 ### `onMessage`
@@ -214,6 +339,29 @@ Function that is invoked when the `WebView` loading starts or ends.
 | -------- | -------- |
 | function | No       |
 
+Example:
+
+```jsx
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   onNavigationStateChange={(navState) => {
+    // Keep track of going back navigation within component
+    this.canGoBack = navState.canGoBack;
+}} />
+```
+
+The `navState` object includes these properties:
+
+ ```
+ canGoBack
+ canGoForward
+ loading
+ navigationType
+ target
+ title
+ url
+```
+
 ---
 
 ### `originWhitelist`
@@ -224,6 +372,16 @@ List of origin strings to allow being navigated to. The strings allow wildcards
 | ---------------- | -------- |
 | array of strings | No       |
 
+Example:
+
+```jsx
+//only allow URIs that begin with https:// or git://
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   originWhitelist={['https://*', 'git://*']}
+ />
+```
+
 ---
 
 ### `renderError`
@@ -234,6 +392,18 @@ Function that returns a view to show if there's an error.
 | -------- | -------- |
 | function | No       |
 
+
+Example:
+
+```jsx
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   renderError={(errorName) => <Error name={errorName} /> }
+ />
+```
+
+The function passed to `renderError` will be called with the name of the error 
+
 ---
 
 ### `renderLoading`
@@ -244,6 +414,17 @@ Function that returns a loading indicator. The startInLoadingState prop must be
 | -------- | -------- |
 | function | No       |
 
+
+Example:
+
+```jsx
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   startInLoadingState={true}
+   renderLoading={() => <Loading /> }
+ />
+```
+
 ---
 
 ### `scalesPageToFit`
@@ -293,6 +474,31 @@ lockIdentifier
 navigationType
 ```
 
+Example:
+
+```jsx
+<WebView
+  source={{ uri: "https://facebook.github.io/react-native" }}
+  onShouldStartLoadWithRequest={(request) => {
+    // Only allow navigating within this website
+    return request.url.startsWith("https://facebook.github.io/react-native")
+  }}
+/>
+```
+
+The `request` object includes these properties:
+
+```
+title
+url
+loading
+target
+canGoBack
+canGoForward
+lockIdentifier
+navigationType
+```
+
 ---
 
 ### `startInLoadingState`
@@ -313,6 +519,15 @@ A style object that allow you to customize the `WebView` style. Please note that
 | ----- | -------- |
 | style | No       |
 
+Example:
+
+```jsx
+<WebView
+   source={{ uri: "https://facebook.github.io/react-native" }}
+   style={{marginTop: 20}}
+ />
+```
+
 ---
 
 ### `decelerationRate`