Rendering HTML in your React Native application

Working with RAW HTML in React native is unfortunately not a simple task, for an application I recently developed, the event descriptions were raw HTML coming from the database.
Currently the best option available within react-native itself is the WebView, however I found this to be a component to be very similar to the web iFrame, which means that certain things that we would like to be simple are not quite.
While it is pretty simply to place the raw HTML into the WebView, it does need to be manually or programmatically sized, not something natively taken care of by the component. The best solution Google provided me with for doing this programmatically was THIS, a solution by Github user danrigsby. A great solution, but not exactly what I was looking for, for my application.
A simple approach injecting some additional scripts into the view and using that to help calculate an appropriate height.
The alternate to that would be setting a fixed height which could result in a scroll bar being added tot he WebView component, this however could easily result in a UX issue when, like in my case, the parent component is a ScrollView component. Depending on the users device screen size and pixel density, we could end up with both the ScrollView and WebView having scroll bars.
Additionally, styling the contents of the view, to better align with the rest of the UI would require similar solution, passing style sheets into the WebView container or even worse, having style attributes within the HTML itself.
A possibly nicer solution…
Further searching gave me a very well developed component by a Github user jsdf, and his component react-native-htmlView.
It does a fantastic job of rendering the HTML natively in the react native layout, with the option to pass in a standard react native styles object referencing standard HTML elements.
Sample implementation code:
var React = require(‘react’)var ReactNative = require(‘react-native’)var Text, View, ListView = ReactNativevar HTMLView = require(‘react-native-htmlview’)var App = React.createClass( render() var htmlContent = ‘<p><a href=”http://jsdf.co”>&hearts; nice job!</a></p>’ return ( <HTMLView value=htmlContent stylesheet=styles /> ) )var styles = StyleSheet.create( a: fontWeight: ‘300’, color: ‘#FF3366’, // pink links ,)
Real world implementation result:
Considering the image above, everything underneath ‘More Info:’ is the HTML brought in from the database and being rendered by the react-native-htmlView component.
I found that using this, at least for me, resulted in a much simpler implementation, that looked more like it belonged on the screen with all the HTML displayed.
I am pretty sure displaying content directly from a database is quite a common use case, something that the React-Native teams really needs to consider for some enhancements on the native WebView, until then, kudos to jsdf for the great component.
See the app in action on your device:Lusus on Android | Lusus on IOS (Coming soon)

via Reme Le Hane

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s