| 
				
			 | 
			
			
				@@ -1,12 +1,10 @@ 
			 | 
		
	
		
			
			| 
				1
			 | 
			
				
			 | 
			
			
				-**NOTE: This document was imported from [the original WebView documentation](https://github.com/facebook/react-native-website/blob/7d3e9e120e38a7ba928f6b173eb98f88b6f2f85f/docs/custom-webview-android.md). While it may prove useful, it has not been adapted to React Native WebView yet.** 
			 | 
		
	
		
			
			| 
				2
			 | 
			
				
			 | 
			
			
				- 
			 | 
		
	
		
			
			| 
				3
			 | 
			
				1
			 | 
			
			
				 While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. 
			 | 
		
	
		
			
			| 
				4
			 | 
			
				2
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				5
			 | 
			
				3
			 | 
			
			
				 Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. 
			 | 
		
	
		
			
			| 
				6
			 | 
			
				4
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				7
			 | 
			
				5
			 | 
			
			
				 ## Native Code 
			 | 
		
	
		
			
			| 
				8
			 | 
			
				6
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				9
			 | 
			
				
			 | 
			
			
				-To get started, you'll need to create a subclass of `ReactWebViewManager`, `ReactWebView`, and `ReactWebViewClient`. In your view manager, you'll then need to override: 
			 | 
		
	
		
			
			| 
				
			 | 
			
				7
			 | 
			
			
				+To get started, you'll need to create a subclass of `RNCWebViewManager`, `RNCWebView`, and `ReactWebViewClient`. In your view manager, you'll then need to override: 
			 | 
		
	
		
			
			| 
				10
			 | 
			
				8
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				11
			 | 
			
				9
			 | 
			
			
				 * `createReactWebViewInstance` 
			 | 
		
	
		
			
			| 
				12
			 | 
			
				10
			 | 
			
			
				 * `getName` 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -14,20 +12,20 @@ To get started, you'll need to create a subclass of `ReactWebViewManager`, `Reac 
			 | 
		
	
		
			
			| 
				14
			 | 
			
				12
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				15
			 | 
			
				13
			 | 
			
			
				 ```java 
			 | 
		
	
		
			
			| 
				16
			 | 
			
				14
			 | 
			
			
				 @ReactModule(name = CustomWebViewManager.REACT_CLASS) 
			 | 
		
	
		
			
			| 
				17
			 | 
			
				
			 | 
			
			
				-public class CustomWebViewManager extends ReactWebViewManager { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				15
			 | 
			
			
				+public class CustomWebViewManager extends RNCWebViewManager { 
			 | 
		
	
		
			
			| 
				18
			 | 
			
				16
			 | 
			
			
				   /* This name must match what we're referring to in JS */ 
			 | 
		
	
		
			
			| 
				19
			 | 
			
				17
			 | 
			
			
				   protected static final String REACT_CLASS = "RCTCustomWebView"; 
			 | 
		
	
		
			
			| 
				20
			 | 
			
				18
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				21
			 | 
			
				19
			 | 
			
			
				   protected static class CustomWebViewClient extends ReactWebViewClient { } 
			 | 
		
	
		
			
			| 
				22
			 | 
			
				20
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				23
			 | 
			
				
			 | 
			
			
				-  protected static class CustomWebView extends ReactWebView { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				21
			 | 
			
			
				+  protected static class CustomWebView extends RNCWebView { 
			 | 
		
	
		
			
			| 
				24
			 | 
			
				22
			 | 
			
			
				     public CustomWebView(ThemedReactContext reactContext) { 
			 | 
		
	
		
			
			| 
				25
			 | 
			
				23
			 | 
			
			
				       super(reactContext); 
			 | 
		
	
		
			
			| 
				26
			 | 
			
				24
			 | 
			
			
				     } 
			 | 
		
	
		
			
			| 
				27
			 | 
			
				25
			 | 
			
			
				   } 
			 | 
		
	
		
			
			| 
				28
			 | 
			
				26
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				29
			 | 
			
				27
			 | 
			
			
				   @Override 
			 | 
		
	
		
			
			| 
				30
			 | 
			
				
			 | 
			
			
				-  protected ReactWebView createReactWebViewInstance(ThemedReactContext reactContext) { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				28
			 | 
			
			
				+  protected RNCWebView createRNCWebViewInstance(ThemedReactContext reactContext) { 
			 | 
		
	
		
			
			| 
				31
			 | 
			
				29
			 | 
			
			
				     return new CustomWebView(reactContext); 
			 | 
		
	
		
			
			| 
				32
			 | 
			
				30
			 | 
			
			
				   } 
			 | 
		
	
		
			
			| 
				33
			 | 
			
				31
			 | 
			
			
				  
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -50,10 +48,10 @@ You'll need to follow the usual steps to [register the module](native-modules-an 
			 | 
		
	
		
			
			| 
				50
			 | 
			
				48
			 | 
			
			
				 To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`. 
			 | 
		
	
		
			
			| 
				51
			 | 
			
				49
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				52
			 | 
			
				50
			 | 
			
			
				 ```java 
			 | 
		
	
		
			
			| 
				53
			 | 
			
				
			 | 
			
			
				-public class CustomWebViewManager extends ReactWebViewManager { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				51
			 | 
			
			
				+public class CustomWebViewManager extends RNCWebViewManager { 
			 | 
		
	
		
			
			| 
				54
			 | 
			
				52
			 | 
			
			
				   ... 
			 | 
		
	
		
			
			| 
				55
			 | 
			
				53
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				56
			 | 
			
				
			 | 
			
			
				-  protected static class CustomWebView extends ReactWebView { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				54
			 | 
			
			
				+  protected static class CustomWebView extends RNCWebView { 
			 | 
		
	
		
			
			| 
				57
			 | 
			
				55
			 | 
			
			
				     public CustomWebView(ThemedReactContext reactContext) { 
			 | 
		
	
		
			
			| 
				58
			 | 
			
				56
			 | 
			
			
				       super(reactContext); 
			 | 
		
	
		
			
			| 
				59
			 | 
			
				57
			 | 
			
			
				     } 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -107,7 +105,7 @@ public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> { 
			 | 
		
	
		
			
			| 
				107
			 | 
			
				105
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				108
			 | 
			
				106
			 | 
			
			
				 You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. 
			 | 
		
	
		
			
			| 
				109
			 | 
			
				107
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				110
			 | 
			
				
			 | 
			
			
				-You should refer to [ReactWebViewManager.java](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. 
			 | 
		
	
		
			
			| 
				
			 | 
			
				108
			 | 
			
			
				+You should refer to [RNCWebViewManager.java](https://github.com/react-native-community/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the react-native-webview codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. 
			 | 
		
	
		
			
			| 
				111
			 | 
			
				109
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				112
			 | 
			
				110
			 | 
			
			
				 ```java 
			 | 
		
	
		
			
			| 
				113
			 | 
			
				111
			 | 
			
			
				 public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> { 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -131,7 +129,7 @@ public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> { 
			 | 
		
	
		
			
			| 
				131
			 | 
			
				129
			 | 
			
			
				 } 
			 | 
		
	
		
			
			| 
				132
			 | 
			
				130
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				133
			 | 
			
				131
			 | 
			
			
				 // CustomWebViewManager.java 
			 | 
		
	
		
			
			| 
				134
			 | 
			
				
			 | 
			
			
				-protected static class CustomWebViewClient extends ReactWebViewClient { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				132
			 | 
			
			
				+protected static class CustomWebViewClient extends RNCWebViewClient { 
			 | 
		
	
		
			
			| 
				135
			 | 
			
				133
			 | 
			
			
				   @Override 
			 | 
		
	
		
			
			| 
				136
			 | 
			
				134
			 | 
			
			
				   public boolean shouldOverrideUrlLoading(WebView view, String url) { 
			 | 
		
	
		
			
			| 
				137
			 | 
			
				135
			 | 
			
			
				     boolean shouldOverride = super.shouldOverrideUrlLoading(view, url); 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -150,7 +148,7 @@ protected static class CustomWebViewClient extends ReactWebViewClient { 
			 | 
		
	
		
			
			| 
				150
			 | 
			
				148
			 | 
			
			
				 Finally, you'll need to expose the events in `CustomWebViewManager` through `getExportedCustomDirectEventTypeConstants`. Note that currently, the default implementation returns `null`, but this may change in the future. 
			 | 
		
	
		
			
			| 
				151
			 | 
			
				149
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				152
			 | 
			
				150
			 | 
			
			
				 ```java 
			 | 
		
	
		
			
			| 
				153
			 | 
			
				
			 | 
			
			
				-public class CustomWebViewManager extends ReactWebViewManager { 
			 | 
		
	
		
			
			| 
				
			 | 
			
				151
			 | 
			
			
				+public class CustomWebViewManager extends RNCWebViewManager { 
			 | 
		
	
		
			
			| 
				154
			 | 
			
				152
			 | 
			
			
				   ... 
			 | 
		
	
		
			
			| 
				155
			 | 
			
				153
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				156
			 | 
			
				154
			 | 
			
			
				   @Override 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -177,7 +175,8 @@ To get your native component, you must use `requireNativeComponent`: the same as 
			 | 
		
	
		
			
			| 
				177
			 | 
			
				175
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				178
			 | 
			
				176
			 | 
			
			
				 ```javascript 
			 | 
		
	
		
			
			| 
				179
			 | 
			
				177
			 | 
			
			
				 import React, {Component, PropTypes} from 'react'; 
			 | 
		
	
		
			
			| 
				180
			 | 
			
				
			 | 
			
			
				-import {WebView, requireNativeComponent} from 'react-native'; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				178
			 | 
			
			
				+import {requireNativeComponent} from 'react-native'; 
			 | 
		
	
		
			
			| 
				
			 | 
			
				179
			 | 
			
			
				+import {WebView} from 'react-native-webview'; 
			 | 
		
	
		
			
			| 
				181
			 | 
			
				180
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				182
			 | 
			
				181
			 | 
			
			
				 export default class CustomWebView extends Component { 
			 | 
		
	
		
			
			| 
				183
			 | 
			
				182
			 | 
			
			
				   static propTypes = WebView.propTypes; 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -200,7 +199,7 @@ If you want to add custom props to your native component, you can use `nativeCon 
			 | 
		
	
		
			
			| 
				200
			 | 
			
				199
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				201
			 | 
			
				200
			 | 
			
			
				 For events, the event handler must always be set to a function. This means it isn't safe to use the event handler directly from `this.props`, as the user might not have provided one. The standard approach is to create a event handler in your class, and then invoking the event handler given in `this.props` if it exists. 
			 | 
		
	
		
			
			| 
				202
			 | 
			
				201
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				203
			 | 
			
				
			 | 
			
			
				-If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.android.js) in the React Native source. 
			 | 
		
	
		
			
			| 
				
			 | 
			
				202
			 | 
			
			
				+If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/react-native-community/react-native-webview/blob/master/js/WebView.android.js) in the React Native source. 
			 | 
		
	
		
			
			| 
				204
			 | 
			
				203
			 | 
			
			
				  
			 | 
		
	
		
			
			| 
				205
			 | 
			
				204
			 | 
			
			
				 ```javascript 
			 | 
		
	
		
			
			| 
				206
			 | 
			
				205
			 | 
			
			
				 export default class CustomWebView extends Component { 
			 | 
		
	
	
		
			
			| 
				
			 | 
			
			
				@@ -252,4 +251,4 @@ const RCTCustomWebView = requireNativeComponent( 
			 | 
		
	
		
			
			| 
				252
			 | 
			
				251
			 | 
			
			
				     }, 
			 | 
		
	
		
			
			| 
				253
			 | 
			
				252
			 | 
			
			
				   } 
			 | 
		
	
		
			
			| 
				254
			 | 
			
				253
			 | 
			
			
				 ); 
			 | 
		
	
		
			
			| 
				255
			 | 
			
				
			 | 
			
			
				-``` 
			 | 
		
	
		
			
			| 
				
			 | 
			
				254
			 | 
			
			
				+``` 
			 |