chore(docs): Added guide for working with custom headers and cookies (#994)

* Added guide for working with custom headers and cookies

* Remove extraneous files

docs/Guide.md

@@ -389,3 +389,92 @@ export default class App extends Component {
 This code will result in this alert:
 
 <img alt="Alert showing communication from web page to React Native" width="200" src="https://user-images.githubusercontent.com/1479215/53671269-7e822300-3c32-11e9-9937-7ddc34ba8af3.png" />
+
+### Working with custom headers, sessions, and cookies
+
+#### Setting Custom Headers
+
+In React Native WebView, you can set a custom header like this:
+
+```jsx
+<WebView
+  source={{
+    uri: 'http://example.com',
+    headers: {
+      'my-custom-header-key': 'my-custom-header-value',
+    },
+  }}
+/>
+```
+
+This will set the header on the first load, but not on subsequent page navigations.
+
+In order to work around this, you can track the current URL, intercept new page loads, and navigate to them yourself ([original credit for this technique to Chirag Shah from Big Binary](https://blog.bigbinary.com/2016/07/26/passing-request-headers-on-each-webview-request-in-react-native.html)):
+
+```jsx
+const CustomHeaderWebView = props => {
+  const { uri, onLoadStart, ...restProps } = props;
+  const [currentURI, setURI] = useState(props.source.uri);
+  const newSource = { ...props.source, uri: currentURI };
+
+  return (
+    <WebView
+      {...restProps}
+      source={newSource}
+      onShouldStartLoadWithRequest={request => {
+        // If we're loading the current URI, allow it to load
+        if (request.url === currentURI) return true;
+        // We're loading a new URL -- change state first
+        setURI(request.url);
+        return false;
+      }}
+    />
+  );
+};
+
+<CustomHeaderWebView
+  source={{
+    uri: 'http://example.com',
+    headers: {
+      'my-custom-header-key': 'my-custom-header-value',
+    },
+  }}
+/>;
+```
+
+#### Managing Cookies
+
+You can set cookies on the React Native side using the [react-native-cookies](https://github.com/joeferraro/react-native-cookies) package.
+
+When you do, you'll likely want to enable the [sharedCookiesEnabled](Reference#sharedCookiesEnabled) prop as well.
+
+```jsx
+const App = () => {
+  return (
+    <WebView
+      source={{ uri: 'http://example.com' }}
+      sharedCookiesEnabled={true}
+    />
+  );
+};
+```
+
+If you'd like to send custom cookies in the WebView itself, you can do so in a custom header, like this:
+
+```jsx
+const App = () => {
+  return (
+    <WebView
+      source={{
+        uri: 'http://example.com',
+        headers: {
+          Cookie: 'cookie1=asdf; cookie2=dfasdfdas',
+        },
+      }}
+      sharedCookiesEnabled={true}
+    />
+  );
+};
+```
+
+Note that these cookies will only be sent on the first request unless you use the technique above for [setting custom headers on each page load](#Setting-Custom-Headers).

docs/Reference.md

@@ -85,9 +85,9 @@ The object passed to `source` can have either of the following shapes:
 
 **Load uri**
 
-- `uri` (string) - The URI to load in the `WebView`. Can be a local or remote file.
+- `uri` (string) - The URI to load in the `WebView`. Can be a local or remote file, and can be changed with React state or props to navigate to a new page.
 - `method` (string) - The HTTP Method to use. Defaults to GET if not specified. On Android, the only supported methods are GET and POST.
-- `headers` (object) - Additional HTTP headers to send with the request. On Android, this can only be used with GET requests.
+- `headers` (object) - Additional HTTP headers to send with the request. On Android, this can only be used with GET requests. See the [Guide](Guide.md#setting-custom-headers) for more information on setting custom headers.
 - `body` (string) - The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. On Android, this can only be used with POST requests.
 
 **Static HTML**
@@ -689,7 +689,7 @@ Possible values for `mixedContentMode` are:
 
 ### `thirdPartyCookiesEnabled`
 
-Boolean value to enable third party cookies in the `WebView`. Used on Android Lollipop and above only as third party cookies are enabled by default on Android Kitkat and below and on iOS. The default value is `true`.
+Boolean value to enable third party cookies in the `WebView`. Used on Android Lollipop and above only as third party cookies are enabled by default on Android Kitkat and below and on iOS. The default value is `true`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies)
 
 | Type | Required | Platform |
 | ---- | -------- | -------- |
@@ -879,7 +879,7 @@ Set whether Geolocation is enabled in the `WebView`. The default value is `false
 
 ### `allowFileAccessFromFileURLs`
 
- Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs. The default value is `false`.
+Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs. The default value is `false`.
 
 | Type | Required | Platform |
 | ---- | -------- | -------- |
@@ -1002,14 +1002,15 @@ Sets whether WebView should use browser caching.
 Overrides the way the cache is used. The way the cache is used is based on the navigation type. For a normal page load, the cache is checked and content is re-validated as needed. When navigating back, content is not revalidated, instead the content is just retrieved from the cache. This property allows the client to override this behavior.
 
 Possible values are:
+
 - `LOAD_DEFAULT` - Default cache usage mode. If the navigation type doesn't impose any specific behavior, use cached resources when they are available and not expired, otherwise load resources from the network.
 - `LOAD_CACHE_ELSE_NETWORK` - Use cached resources when they are available, even if they have expired. Otherwise load resources from the network.
 - `LOAD_NO_CACHE` - Don't use the cache, load from the network.
-- `LOAD_CACHE_ONLY` - Don't use the network, load from the cache. 
- 
-| Type    | Required | Default      | Platform |
-| ------- | -------- | -------------| -------- |
-| string  | No       | LOAD_DEFAULT | Android  |
+- `LOAD_CACHE_ONLY` - Don't use the network, load from the cache.
+
+| Type   | Required | Default      | Platform |
+| ------ | -------- | ------------ | -------- |
+| string | No       | LOAD_DEFAULT | Android  |
 
 ---
 
@@ -1035,7 +1036,7 @@ A Boolean value that determines whether pressing on a link displays a preview of
 
 ### `sharedCookiesEnabled`
 
-Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`.
+Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies)
 
 | Type    | Required | Platform |
 | ------- | -------- | -------- |