Skip to content

fixed compatibility problem of postMessage patch script with new RN, … #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

fixed compatibility problem of postMessage patch script with new RN, … #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c146d01
fixed compatibility problem of postMessage patch script with new RN, …
walty8 Nov 23, 2018
c6b638d
use react-native-webview instead
gongdao123 Jul 24, 2019
58a5eec
use native postmessage
gongdao123 Jul 25, 2019
aa6f340
change version
gongdao123 Jul 29, 2019
86ed6fc
for the max height
gongdao123 Nov 13, 2019
0b32782
remove version limit
gongdao123 Feb 8, 2020
34e7497
for new proj
gongdao123 Sep 11, 2020
90d4e3e
Merge branch 'bartsolutions' of https://github.com/bartsolutions/reac…
gongdao123 Sep 11, 2020
de7b4a0
use multiple string, to avoid hermes related issue
Jan 10, 2023
4f0f59f
update peer dependency
gongdao123 Apr 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 46 additions & 21 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,40 @@ import React, { Component } from 'react';
import {
View,
Dimensions,
WebView,
Platform,
} from 'react-native';
import { WebView } from 'react-native-webview';

const injectedScript = function() {
function waitForBridge() {
if (window.postMessage.length !== 1){
setTimeout(waitForBridge, 200);
}
else {
postMessage(
Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.body.clientHeight, document.body.scrollHeight)
)
}

const injectedScript = `function() {
function postSize() {
//https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript
var body = document.body, html = document.documentElement;

var maxHeight = Math.max( body.scrollHeight, body.offsetHeight, html.offsetHeight );

console.log('postSize maxHeight', maxHeight)
window.ReactNativeWebView.postMessage(maxHeight);
}

var postSizeTimeout;
function debouncedPostSize() {
clearTimeout(postSizeTimeout);
postSizeTimeout = setTimeout(function () {
postSize()
}, 500)
}
waitForBridge();
};

debouncedPostSize();
//trigger when DOM changes
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(debouncedPostSize);
observer.observe(document, {
subtree: true,
attributes: true
});
window.addEventListener('resize', debouncedPostSize);
}`

export default class MyWebView extends Component {
state = {
Expand All @@ -40,6 +57,7 @@ export default class MyWebView extends Component {

static defaultProps = {
autoHeight: true,
noWidth: false,
}

constructor (props: Object) {
Expand All @@ -52,9 +70,12 @@ export default class MyWebView extends Component {
}

_onMessage(e) {
this.setState({
webViewHeight: parseInt(e.nativeEvent.data)
});
const maxHeight = this.props.maxHeight;
let webViewHeight = parseInt(e.nativeEvent.data);
if (maxHeight && webViewHeight > maxHeight) {
webViewHeight = maxHeight
}
this.setState({ webViewHeight });
}

stopLoading() {
Expand All @@ -66,21 +87,25 @@ export default class MyWebView extends Component {
}

render () {

const _w = this.props.width || Dimensions.get('window').width;
const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight;
const androidScript = 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');' +
'(' + String(injectedScript) + ')();';
const iosScript = '(' + String(injectedScript) + ')();' + 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');';

const injectedJavaScript = '(' + String(injectedScript) + ')();';

let style = !!this.props.noWidth ? []: [{width: _w}]
style = style.concat([this.props.style, {height: _h}]);

return (
<WebView
ref={(ref) => { this.webview = ref; }}
injectedJavaScript={Platform.OS === 'ios' ? iosScript : androidScript}
injectedJavaScript={injectedJavaScript}
scrollEnabled={this.props.scrollEnabled || false}
onMessage={this._onMessage}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={true}
{...this.props}
style={[{width: _w}, this.props.style, {height: _h}]}
style={style}
/>
)
}
Expand Down
5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
"auto",
"height"
],
"peerDependencies": {
"react": ">= 16.8.0",
"react-native": ">= 0.60.0",
"react-native-webview": ">= 10.9.0"
},
"author": "Elton Jain",
"license": "ISC",
"bugs": {
Expand Down