UI Expectation (Reference)
Before implementing HTML rendering, it is essential to define the UI expectations. These include:
- Text Rendering - The HTML content should be properly formatted with correct spacing and alignment.
- Images and Links - The HTML should support inline images and clickable links.
- Interactive Elements - Any embedded forms or buttons should be functional.
- Responsive Design - The content should adapt to different screen sizes.
A design reference from a tool like Figma ensures that developers understand the UI expectations clearly.
Figma Screens for Vymo Email Activity
Figma is widely used for UI design and prototyping. For Vymo Email Activity, the design should:
- Present email content in a structured format.
- Support HTML email rendering.
- Ensure smooth scrolling and navigation.
Developers can refer to the Figma screens for layout structure and CSS styles before implementing the HTML rendering logic.
Getting Started with React Native WebView
One of the simplest ways to render HTML in React Native is using WebView. WebView loads a mini-browser inside the app and displays HTML content.
Installation
To use WebView, install the package:
npm install react-native-webview
Example: Rendering HTML using WebView
import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
const HtmlRender = () => {
const htmlContent = `
<html>
<body>
<h1>Welcome to React Native WebView</h1>
<p>This is an example of rendering HTML content.</p>
</body>
</html>`;
return (
<View style={{ flex: 1 }}>
<WebView source={{ html: htmlContent }} />
</View>
);
};
export default HtmlRender;
Output:
This will display an HTML page with a heading and paragraph inside the React Native app.
Native Rendering of the HTML
Using WebView may not be optimal for performance. Instead, developers can use native rendering for better efficiency.
Some popular libraries for native HTML rendering include:
- react-native-htmlview
- react-native-render-html
These libraries parse and display HTML using native components, ensuring better performance.
HTMLView (react-native-htmlview)
react-native-htmlview is a lightweight library that helps render HTML as native components.
Installation
npm install react-native-htmlview
Example: Rendering HTML using HTMLView
import React from 'react';
import { View } from 'react-native';
import HTMLView from 'react-native-htmlview';
const HtmlExample = () => {
const htmlContent = `<p>This is a <strong>bold</strong> text.</p>`;
return (
<View style={{ padding: 10 }}>
<HTMLView value={htmlContent} />
</View>
);
};
export default HtmlExample;
Output:
This will display: "This is a bold text." with the <strong> tag rendered correctly.
Render HTML (react-native-render-html)
react-native-render-html is an advanced library that provides better styling and flexibility.
Installation
npm install react-native-render-html
Example: Rendering HTML using react-native-render-html
import React from 'react';
import { View, useWindowDimensions } from 'react-native';
import RenderHTML from 'react-native-render-html';
const HtmlRenderer = () => {
const { width } = useWindowDimensions();
const htmlContent = `
<h1>React Native Render HTML</h1>
<p>This is an example of using <strong>react-native-render-html</strong>.</p>`;
return (
<View style={{ padding: 10 }}>
<RenderHTML contentWidth={width} source={{ html: htmlContent }} />
</View>
);
};
export default HtmlRenderer;
Output:
This will render an HTML page with a heading and a paragraph, maintaining styles and structure.
Applying Styles to Elements
When you are working with `react-native-render-html`, styling HTML content is important to make it look good in your app. By default, the library converts HTML into React Native components, but you need to add styles to make it visually appealing.
To apply styles, you can use the `tagsStyles` property provided by the library. This property allows you to define styles for specific HTML tags like `<h1>`, `<p>`, or `<a>`. Let’s understand this in detail:
Step 1: Install the Library
Before you start, you need to install the `react-native-render-html` library. Open your terminal and run the following command:
npm install react-native-render-html
If you are using Expo, you can also install it with:
expo install react-native-render-html
Step 2: Import the Library
Once installed, import the library into your project file. Let’s see how you can do it:
import React from 'react';
import { ScrollView, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';
Step 3: Define Your HTML Content
You need some HTML content to render. For example:
const htmlContent = `
<h1>Welcome to React Native</h1>
<p>This is a paragraph styled using react-native-render-html.</p>
<a href="https://example.com">Click here to visit Example.com</a>
`;
Step 4: Apply Styles Using `tagsStyles`
Now, let’s define styles for the HTML tags. The `tagsStyles` property takes an object where keys are HTML tags and values are style objects. For example:
const App = () => {
const { width } = Dimensions.get('window');
const tagsStyles = {
h1: { color: 'blue', fontSize: 24, fontWeight: 'bold' },
p: { color: 'black', fontSize: 16 },
a: { color: 'green', textDecorationLine: 'underline' },
};
return (
<ScrollView>
<HTML
source={{ html: htmlContent }}
contentWidth={width}
tagsStyles={tagsStyles}
/>
</ScrollView>
);
};
export default App;
In this Code:
1. HTML Content: The `htmlContent` variable contains the HTML code we want to display.
2. Styling Tags: The `tagsStyles` object defines styles for `<h1>`, `<p>`, and `<a>` tags.
3. Rendering HTML: The `HTML` component from the library renders the HTML content. The `contentWidth` prop ensures proper layout on different screen sizes.
This approach gives you full control over how each HTML tag looks in your app. You can customize colors, fonts, sizes, and more.
Exploring an Alternative to react-native-render-html
While `react-native-render-html` is a popular choice for rendering HTML in React Native apps, there are alternatives you can explore. One such alternative is using the `WebView` component from `react-native-webview`. This approach is useful if you want to display complex HTML content or even full web pages without converting them into React Native components.
Why Use WebView?
The `WebView` component allows you to embed a browser-like view in your app. It’s especially helpful when dealing with large HTML files, external websites, or content that includes JavaScript. However, it has its own pros and cons compared to `react-native-render-html`.
Step 1: Install the WebView Library
To use `WebView`, you need to install the `react-native-webview` package. Run the following command in your terminal:
npm install react-native-webview
If you’re using Expo, you can install it with:
expo install react-native-webview
Step 2: Import the WebView Component
Once installed, import the `WebView` component into your project file:
import React from 'react';
import { WebView } from 'react-native-webview';
Step 3: Render HTML Content Using WebView
You can pass your HTML content directly to the `WebView` component using the `html` source type.
For example:
const App = () => {
const htmlContent = `
<html>
<body>
<h1>Welcome to WebView</h1>
<p>This content is rendered inside a WebView component.</p>
<a href="https://example.com">Click here to visit Example.com</a>
</body>
</html>
`;
return (
<WebView
originWhitelist={['']}
source={{ html: htmlContent }}
/>
);
};
export default App;
In this Code:
1. HTML Content: The `htmlContent` variable contains the HTML code wrapped inside `<html>` and `<body>` tags.
2. WebView Component: The `WebView` component renders the HTML content. The `originWhitelist` prop allows loading content from any source (use this carefully in production).
3. Source Prop: The `source` prop specifies the HTML content to be displayed.
Pros and Cons of WebView
Pros
- Handles complex HTML & JavaScript easily.
- Ideal for displaying external web pages.
- No need to convert HTML into React Native components.
Cons
- Heavier than `react-native-render-html` because it uses a browser engine.
- Limited control over individual elements.
- May not match the native look and feel of your app.
This makes `WebView` a good choice for specific use cases but not a complete replacement for `react-native-render-html`.
Frequently Asked Questions
What is the best way to render HTML in React Native?
If you need a full HTML page, use WebView. For native rendering with better performance, react-native-render-html is recommended.
Can WebView affect performance?
Yes, WebView loads a separate browser engine, which may increase memory usage. Consider native rendering if performance is a concern.
How to style HTML content in React Native?
Using react-native-render-html, you can pass styles through the tagsStyles prop to customize the appearance.
Conclusion
In this article, we learned React Native Render HTML, a powerful solution for displaying HTML content in React Native applications. We discussed its key features, benefits, and how it helps render complex HTML structures efficiently. Understanding this library allows developers to integrate web content seamlessly, ensuring better UI rendering and enhanced user experience in mobile applications.
19+ registered 
