React Native dynamic webview height
I have WebView content are which changes it's height depending on amount of content. So I found a way how to take the height of the content through the document.title attribute onNavigationStateChange. Looks like this:
let html = '<!DOCTYPE html><html><body><script>document.title = document.height;</script></body></html>';
And on onNavigationStateChange
onNavigationStateChange(navState) {
this.setState({
height: navState.title
});
console.log("DATA");
console.log(this.state.height)
}
On the actual WebView render I do:
<WebView style={this._setWebviewHeight()}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
html={html}>
</WebView>
Where:
_setWebviewHeight() {
return {
height: this.state.height,
padding: 20,
}
}
And in this case I'm getting error and I am not able to get the height of content through state. What shall I do then?
The idea of solution is taken from here: React native: Is it possible to have the height of a html content in a webview?
Answer
I have found the solution in the implementation of one of the RN third party libraries. Here is the link to it: https://github.com/danrigsby/react-native-web-container/blob/master/index.js
With this kind of approach all worked good.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM