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

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) Developing: First mobile app Recently had an idea for a very simple mobile application, having been a runner for some time I already had an app for…medium.com

Twitter | Instagram | YouTube