status-im
/
react-native-webview
mirror of https://github.com/status-im/react-native-webview.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(types): Remove references to nonexistent extraNativeComponentConfig prop (#1958)

This commit is contained in:
Caleb Clarke 2021-05-20 15:11:12 -07:00 committed by GitHub
parent ca696b586f
commit c1e91f7d73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/Custom-Android.md
View File

@ -166,21 +166,16 @@ public class CustomWebViewManager extends RNCWebViewManager {
## JavaScript Interface
To use your custom web view, you'll need to create a class for it. Your class must:
To use your custom web view, you may want to create a class for it. Your class must return a `WebView` component with the prop `nativeConfig.component` set to your native component (see below).
- Export all the prop types from `WebView.propTypes`
- Return a `WebView` component with the prop `nativeConfig.component` set to your native component (see below)
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components.
```javascript
import React, { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
import { WebView } from 'react-native-webview';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
render() {
return (
<WebView {...this.props} nativeConfig={{ component: RCTCustomWebView }} />
@ -188,31 +183,17 @@ export default class CustomWebView extends Component {
}
}
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
CustomWebView,
WebView.extraNativeComponentConfig,
);
const RCTCustomWebView = requireNativeComponent('RCTCustomWebView');
```
If you want to add custom props to your native component, you can use `nativeConfig.props` on the web view.
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.
If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/react-native-webview/react-native-webview/blob/master/js/WebView.android.js) in the React Native source.
If you are unsure how something should be implemented from the JS side, look at [WebView.android.tsx](https://github.com/react-native-webview/react-native-webview/blob/master/src/WebView.android.tsx) in the React Native WebView source.
```javascript
export default class CustomWebView extends Component {
static propTypes = {
...WebView.propTypes,
finalUrl: PropTypes.string,
onNavigationCompleted: PropTypes.func,
};
static defaultProps = {
finalUrl: 'about:blank',
};
_onNavigationCompleted = (event) => {
const { onNavigationCompleted } = this.props;
onNavigationCompleted && onNavigationCompleted(event);
@ -234,21 +215,3 @@ export default class CustomWebView extends Component {
}
}
```
Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the `nativeOnly` property of the third argument previously mentioned. For event handlers, you have to use the value `true` instead of a regular prop type.
For example, if you wanted to add an internal event handler called `onScrollToBottom`, you would use,
```javascript
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
CustomWebView,
{
...WebView.extraNativeComponentConfig,
nativeOnly: {
...WebView.extraNativeComponentConfig.nativeOnly,
onScrollToBottom: true,
},
},
);
```

49
docs/Custom-iOS.md
View File

@ -168,26 +168,21 @@ If you need to connect to a server which has a self signed certificate, or want
```
Multiple hosts can be added to the directionary, and only one certificate for a host is allowed. The verification will succeed if any of the certificates in the chain of the request matches the one defined for the request's host.
Multiple hosts can be added to the dictionary, and only one certificate for a host is allowed. The verification will succeed if any of the certificates in the chain of the request matches the one defined for the request's host.
## JavaScript Interface
To use your custom web view, you'll need to create a class for it. Your class must:
To use your custom web view, you may want to create a class for it. Your class must return a `WebView` component with the prop `nativeConfig.component` set to your native component (see below).
* Export all the prop types from `WebView.propTypes`
* Return a `WebView` component with the prop `nativeConfig.component` set to your native component (see below)
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components.
```javascript
import React, {Component, PropTypes} from 'react';
import React, {Component} from 'react';
import {WebView, requireNativeComponent, NativeModules} from 'react-native';
const {CustomWebViewManager} = NativeModules;
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
render() {
return (
<WebView
@ -201,31 +196,17 @@ export default class CustomWebView extends Component {
}
}
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
CustomWebView,
WebView.extraNativeComponentConfig
);
const RCTCustomWebView = requireNativeComponent('RCTCustomWebView');
```
If you want to add custom props to your native component, you can use `nativeConfig.props` on the web view. For iOS, you should also set the `nativeConfig.viewManager` prop with your custom WebView ViewManager as in the example above.
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.
If you are unsure how something should be implemented from the JS side, look at [WebView.ios.js](https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.ios.js) in the React Native source.
If you are unsure how something should be implemented from the JS side, look at [WebView.ios.tsx](https://github.com/react-native-webview/react-native-webview/blob/master/src/WebView.ios.tsx) in the React Native WebView source.
```javascript
export default class CustomWebView extends Component {
static propTypes = {
...WebView.propTypes,
finalUrl: PropTypes.string,
onNavigationCompleted: PropTypes.func,
};
static defaultProps = {
finalUrl: 'about:blank',
};
_onNavigationCompleted = (event) => {
const {onNavigationCompleted} = this.props;
onNavigationCompleted && onNavigationCompleted(event);
@ -248,21 +229,3 @@ export default class CustomWebView extends Component {
}
}
```
Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the `nativeOnly` property of the third argument previously mentioned. For event handlers, you have to use the value `true` instead of a regular prop type.
For example, if you wanted to add an internal event handler called `onScrollToBottom`, you would use,
```javascript
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
CustomWebView,
{
...WebView.extraNativeComponentConfig,
nativeOnly: {
...WebView.extraNativeComponentConfig.nativeOnly,
onScrollToBottom: true,
},
}
);
```

7
docs/Reference.md
View File

@ -79,7 +79,6 @@ This document lays out the current public properties and methods for the React N
## Methods Index
- [`extraNativeComponentConfig`](Reference.md#extranativecomponentconfig)
- [`goForward`](Reference.md#goforward)
- [`goBack`](Reference.md#goback)
- [`reload`](Reference.md#reload)
@ -1367,12 +1366,6 @@ Example:
## Methods
### `extraNativeComponentConfig()`[⬆](#methods-index)<!-- Link generated with jump2header -->
```javascript
static extraNativeComponentConfig()
```
### `goForward()`[⬆](#methods-index)<!-- Link generated with jump2header -->
```javascript

5
index.d.ts vendored
View File

@ -27,11 +27,6 @@ declare class WebView<P = {}> extends Component<WebViewProps & P> {
*/
stopLoading(): void;
/**
* Extra Native Component Config.
*/
extraNativeComponentConfig: () => any;
/**
* Executes the JavaScript string.
*/