|
@@ -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
|
+```
|