Tech %2F React Native WebView

Error converting content: marked is not a function

title:: Tech / React Native WebView
  - Official webview library - [react-native-webview](https://github.com/react-native-webview/react-native-webview)
- Docs: [Guide](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md), [API Reference](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)
- ## 101
- WebView Component
  - It is intended to be a replacement for the built-in WebView (which will be removed from core).
  - ```jsx
		  class MyWeb extends Component {
		    render() {
		      return (
		        
		      );
		    }
		  ```
- #### Communicating between JS and Nativeaa
  - React Native WebView exposes three different options:
  - React Native -> Web: The ^^**injectedJavaScript prop**^^
    - This is a script that runs immediately after the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away.
    - ```jsx
					  export default class App extends Component {
					    render() {
					      const runFirst = `
					        document.body.style.backgroundColor = 'red';
					        setTimeout(function() { window.alert('hi') }, 2000);
					        true; // note: this is required, or you'll sometimes get silent failures
					      `;
					      return (
					        
					           {}}
					            injectedJavaScript={runFirst}
					          />
					        
					      );
					    }
					  }
					  ```
    - This runs the JavaScript in the runFirst string once the page is loaded. In this case, you can see that both the body style was changed to red and the alert showed up after 2 seconds. **An onMessage event is required as well to inject the JavaScript code into the WebView.**
    - The ^^**injectedJavaScriptBeforeContentLoaded prop**^^
      - This is a script that runs before the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away. This is useful if you want to inject anything into the window, localstorage, or document prior to the web code executing.
  - React Native -> Web: The ^^**injectJavaScript method**^^
    - While convenient, the downside to the previously mentioned injectedJavaScript prop is that it only runs once. That's why we also expose a method on the webview ref called injectJavaScript
    - ```jsx
				  export default class App extends Component {
				    render() {
				      const run = `
				        document.body.style.backgroundColor = 'blue';
				        true;
				      `;
				  
				      setTimeout(() => {
				        this.webref.injectJavaScript(run);
				      }, 3000);
				  
				      return (
				        
				           (this.webref = r)}
				            source={{
				              uri: 'https://github.com/react-native-webview/react-native-webview',
				            }}
				          />
				        
				      );
				    }
				  }
				  ```
    - - Web -> React Native: The ^^**postMessage method**^^ and ^^**onMessage prop**^^
    - You must set onMessage or the window.ReactNativeWebView.postMessage method will not be injected into the web page.
    - window.ReactNativeWebView.postMessage only accepts one argument which must be a string.
    - ```jsx
				  // This code will result in this alert 
				  export default class App extends Component {
				    render() {
				      const html = `
				        
				        
				        
				          
				        
				        
				      `;
				  
				      return (
				        
				           {
				              alert(event.nativeEvent.data);
				            }}
				          />
				        
				      );
				    }
				  }
				  ```
    - - ## Advanced
- By setting `injectedJavaScriptForMainFrameOnly: false`, the JavaScript injection will occur on all frames (not just the main frame) if supported for the given platform. For example, if a page contains an iframe, the javascript will be injected into that iframe as well with this set to false. (Note this is not supported on Android.) There is also `injectedJavaScriptBeforeContentLoadedForMainFrameOnly` for injecting prior to content loading. Read more about this in the Reference.
- Under the hood
- On iOS, injectJavaScript calls WebView's evaluateJS:andThen: On Android, injectJavaScript calls Android WebView's evaluateJavascriptWithFallback method
- [HTTP request headers on each WebView request](https://www.bigbinary.com/blog/passing-request-headers-on-each-webview-request-in-react-native)
- You can set cookies on the React Native side using the [react-native-community/cookies](https://github.com/react-native-community/cookies) package. When you do, you'll likely want to enable the sharedCookiesEnabled prop as well
  - Hardware Silence Switch
		  There are some inconsistencies in how the hardware silence switch is handled between embedded audio and video elements and between iOS and Android platforms.
  - Audio on iOS will be muted when the hardware silence switch is in the on position, unless the ignoreSilentHardwareSwitch parameter is set to true.
  - Video on iOS will always ignore the hardware silence switch
-