Browse Source

chore(docs): Custom Android: Reflect migration to react-native-webview project (#347)

Doc is now up-to-date with latest `react-native-webview` changes
Julien Eluard 5 years ago
parent
commit
b1cbf077e0
1 changed files with 13 additions and 14 deletions
  1. 13
    14
      docs/Custom-Android.md

+ 13
- 14
docs/Custom-Android.md View File

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