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