How to render HTML in React Native?

Sometimes, we want to render HTML in React Native.

In this article, we’ll look at how to render HTML in React Native.

How to render HTML in React Native?

To render HTML in React Native, we can use a WebView.

For instance, we write:

import * as React from 'react';
import { Text, View } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <WebView
        originWhitelist={['*']}
        style={{ marginTop: 50, marginBottom: 50 }}
        source={{ html: '<h1><b>hello world</b></h1>' }}
      />
    </View>
  );
}

to set the source prop to { html: '<h1><b>hello world</b></h1>' } to display ‘hello world’ in bold on the screen.

Conclusion

To render HTML in React Native, we can use a WebView.