Render HTML in React Native

by

Edit Jan 2021: The React Native docs currently recommend React Native WebView:

<WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

https://github.com/react-native-webview/react-native-webview

If you don’t want to embed a WebView, there are also third party libraries to render HTML into native views:

  1. react-native-render-html
  2. react-native-htmlview

Edit March 2017: the html prop has been deprecated. Use source instead:

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

Thanks to Justin for pointing this out.

Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:

<WebView html={'<p>Here I am</p>'} />

Original Answer:

I don’t think this is currently possible. The behavior you’re seeing is expected, since the Text component only outputs… well, text. You need another component that outputs HTML – and that’s the WebView.

Unfortunately right now there’s no way of just directly setting the HTML on this component:

https://github.com/facebook/react-native/issues/506

However I’ve just created this PR which implements a basic version of this feature so hopefully it’ll land in some form soonish.

More Related Contents:

  1. Conditional Text Rendering in React Native
  2. What is the difference between Expo and React Native?
  3. Setting environment variable in react-native?
  4. React Native version mismatch
  5. Module AppRegistry is not registered callable module (calling runApplication)
  6. React navigation goBack() and update parent state
  7. How to build .ipa application for react-native-ios? [closed]
  8. How to upload file to server using react-native
  9. React-Navigation with Login Screen
  10. How do I display an animated gif in React Native?
  11. React Native DEV and PROD variables
  12. React Native TextInput that only accepts numeric characters
  13. How to remove ‘Warning: Async Storage has been extracted from react-native core…’?
  14. StackNavigator through Component gives undefined error
  15. Does react native support base64 encoded images?
  16. FlatList calls `onEndReached` when it’s rendered
  17. React Native – Device back button handling
  18. How to use global variables in React Native?
  19. Is React Native’s Async Storage secure?
  20. Pass Data between Pages in React native
  21. Getting “Cannot read property ‘pickAlgorithm’ of null” error in react native
  22. Auto scale image height with React Native
  23. Facing issue ” Failed to install the app. Make sure you have the Android development environment ” in react native
  24. However, this package itself specifies a `main` module field that could not be resolved
  25. emulator-5554 unauthorized for adb devices
  26. React Native – React Navigation transitions
  27. How to set default font family in React Native?
  28. JSON Parse error: Unrecognized token’
  29. What is react-native link?
  30. Call child function from parent component in React Native

Leave a Comment