Rendering HTML in your React Native application

Reme Le Hane
Sep 14, 2016 · 3 min read
Image for post
Image for post

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 to the 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} = ReactNative

var 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:

Image for post
Image for post

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)



Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store