Render Raw HTML Code in React Native App Using WebView

Rendering raw HTML(Hyper Text Markup Language) code in both android and iOS application can be possible through WebView component. Because sometimes developer needs to parse Raw HTML Code come inside JSON into Text component. So in this tutorial we would going to Render Raw HTML Code in React Native App Using WebView component using source={{ html: YourHTMLcode}} prop.

Contents in this project Render Raw HTML Code in React Native App Using WebView :

1. Import StyleSheet, WebView and Platform component in your project.

2. Create a Var named as HtmlCode inside render’s block and define your all HTML code in that variable like i did in below code. You need to use +(Plus) symbol after every line to connect each line code.

3. Call the HtmlCode var into source prop of WebView with html .

4. Create custom Style class :

5. Complete source code for App.js File :

Screenshot in Android device :

Render Raw HTML Code

Screenshot in iOS application :

4 Comments

  1. HTML raw code is not rendering in iOS. What could be the reason for this ?

  2. Content is not displaying without giving height to the style. How can i adjust it with content size?

Leave a Reply

Your email address will not be published. Required fields are marked *