|
|
|
|
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
|
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.
|
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
|
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.
|
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
|
## Native Code
|
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
|
* `createReactWebViewInstance`
|
9
|
* `createReactWebViewInstance`
|
12
|
* `getName`
|
10
|
* `getName`
|
|
|
|
|
14
|
|
12
|
|
15
|
```java
|
13
|
```java
|
16
|
@ReactModule(name = CustomWebViewManager.REACT_CLASS)
|
14
|
@ReactModule(name = CustomWebViewManager.REACT_CLASS)
|
17
|
-public class CustomWebViewManager extends ReactWebViewManager {
|
|
|
|
|
15
|
+public class CustomWebViewManager extends RNCWebViewManager {
|
18
|
/* This name must match what we're referring to in JS */
|
16
|
/* This name must match what we're referring to in JS */
|
19
|
protected static final String REACT_CLASS = "RCTCustomWebView";
|
17
|
protected static final String REACT_CLASS = "RCTCustomWebView";
|
20
|
|
18
|
|
21
|
protected static class CustomWebViewClient extends ReactWebViewClient { }
|
19
|
protected static class CustomWebViewClient extends ReactWebViewClient { }
|
22
|
|
20
|
|
23
|
- protected static class CustomWebView extends ReactWebView {
|
|
|
|
|
21
|
+ protected static class CustomWebView extends RNCWebView {
|
24
|
public CustomWebView(ThemedReactContext reactContext) {
|
22
|
public CustomWebView(ThemedReactContext reactContext) {
|
25
|
super(reactContext);
|
23
|
super(reactContext);
|
26
|
}
|
24
|
}
|
27
|
}
|
25
|
}
|
28
|
|
26
|
|
29
|
@Override
|
27
|
@Override
|
30
|
- protected ReactWebView createReactWebViewInstance(ThemedReactContext reactContext) {
|
|
|
|
|
28
|
+ protected RNCWebView createRNCWebViewInstance(ThemedReactContext reactContext) {
|
31
|
return new CustomWebView(reactContext);
|
29
|
return new CustomWebView(reactContext);
|
32
|
}
|
30
|
}
|
33
|
|
31
|
|
|
|
|
|
50
|
To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`.
|
48
|
To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`.
|
51
|
|
49
|
|
52
|
```java
|
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
|
public CustomWebView(ThemedReactContext reactContext) {
|
55
|
public CustomWebView(ThemedReactContext reactContext) {
|
58
|
super(reactContext);
|
56
|
super(reactContext);
|
59
|
}
|
57
|
}
|
|
|
|
|
107
|
|
105
|
|
108
|
You can trigger the event in your web view client. You can hook existing handlers if your events are based on them.
|
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
|
```java
|
110
|
```java
|
113
|
public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
|
111
|
public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
|
|
|
|
|
131
|
}
|
129
|
}
|
132
|
|
130
|
|
133
|
// CustomWebViewManager.java
|
131
|
// CustomWebViewManager.java
|
134
|
-protected static class CustomWebViewClient extends ReactWebViewClient {
|
|
|
|
|
132
|
+protected static class CustomWebViewClient extends RNCWebViewClient {
|
135
|
@Override
|
133
|
@Override
|
136
|
public boolean shouldOverrideUrlLoading(WebView view, String url) {
|
134
|
public boolean shouldOverrideUrlLoading(WebView view, String url) {
|
137
|
boolean shouldOverride = super.shouldOverrideUrlLoading(view, url);
|
135
|
boolean shouldOverride = super.shouldOverrideUrlLoading(view, url);
|
|
|
|
|
150
|
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.
|
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
|
```java
|
150
|
```java
|
153
|
-public class CustomWebViewManager extends ReactWebViewManager {
|
|
|
|
|
151
|
+public class CustomWebViewManager extends RNCWebViewManager {
|
154
|
...
|
152
|
...
|
155
|
|
153
|
|
156
|
@Override
|
154
|
@Override
|
|
|
|
|
177
|
|
175
|
|
178
|
```javascript
|
176
|
```javascript
|
179
|
import React, {Component, PropTypes} from 'react';
|
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
|
export default class CustomWebView extends Component {
|
181
|
export default class CustomWebView extends Component {
|
183
|
static propTypes = WebView.propTypes;
|
182
|
static propTypes = WebView.propTypes;
|
|
|
|
|
200
|
|
199
|
|
201
|
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.
|
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
|
```javascript
|
204
|
```javascript
|
206
|
export default class CustomWebView extends Component {
|
205
|
export default class CustomWebView extends Component {
|
|
|
|
|
252
|
},
|
251
|
},
|
253
|
}
|
252
|
}
|
254
|
);
|
253
|
);
|
255
|
-```
|
|
|
|
|
254
|
+```
|