50972

React Native dynamic webview height

Question:

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: <a href="https://stackoverflow.com/questions/32952270/react-native-is-it-possible-to-have-the-height-of-a-html-content-in-a-webview" rel="nofollow">React native: Is it possible to have the height of a html content in a webview?</a>

Answer1:

I have found the solution in the implementation of one of the RN third party libraries. Here is the link to it: <a href="https://github.com/danrigsby/react-native-web-container/blob/master/index.js" rel="nofollow">https://github.com/danrigsby/react-native-web-container/blob/master/index.js</a>

With this kind of approach all worked good.

Answer2:

Just try this lib: <a href="https://github.com/iou90/react-native-autoheight-webview" rel="nofollow">https://github.com/iou90/react-native-autoheight-webview</a> It will works both on iOS & Android

Recommend

  • How to orderByValue onSnapshot using Firestore
  • React 16 Error Boundary component (using componentDidCatch) shows uncaught error
  • Cannot read property setState of undefined in axios callback
  • Passing Props from State to Child
  • Get the pasted content on document on paste event
  • Undefined navigator.push React-native 0.43.4
  • redirect_to root_url and return unless @user.activated
  • Knockout custom binding handler
  • How Get arguments value using inline assembly in C without Glibc?
  • Salesforce Different WSDL files and when to use
  • How to make R's read_csv2() recognise the text characters properly
  • Django invalid literal for int() with base 10
  • Implementation of State Monad
  • presentShareDialogWithParams posts to FB wall, but callback handler results say error
  • Time complexity of a program which involves multiple variables
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Checking free space on FTP server
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Is there a amazon webstore API for customers?
  • How to get a value (ex: baseURL) in every Karate feature?
  • Modifying destination and filename of gulp-svg-sprite
  • Perl system calls when running as another user using sudo
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • jquery mobile loadPage not working
  • How to pass list parameters for each object using Spring MVC?
  • Unanticipated behavior
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • embed rChart in Markdown
  • How to get Windows thread pool to call class member function?
  • Is there any way to bind data to data.frame by some index?
  • Django query for large number of relationships
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • How to push additional view controllers onto NavigationController but keep the TabBar?