Search code examples
reactjsreact-nativeexporeact-native-webexpo-web

How to Render HTML string in Web Browser with Expo (React-Native)?

I am using react-native-webview-quilljs to render formatted HTML text. It works fine on Android and iOS but it isn't supported on the Web (i.e. react-native-web/expo-web). So I managed to strip the HTML tags when rendering the formatted string on the browser (i.e. rendering non formatted text).

Then I got to realise that react-native-web actually uses React to render react-native components on the browser. And React has something as dangerouslySetInnerHTML that allows injecting HTML string to be rendered directly on the browser.

So, is there a way to use dangerouslySetInnerHTML from the react-native / expo project.

Upon close inspection I found that the html tags gets converted to the html entities while rendering on the browser. Take a look at the image below.

enter image description here

Solution

  • Solved it (would rather call it a workaround) by rendering a <div> with dangerouslySetInnerHTML prop when Platform.OS === 'web'.

    Example:

    Platform.OS === 'web'
    ? <div dangerouslySetInnerHTML={{ __html: Details }} />
    : <View style={{flex: 1}}>
        <WebViewQuillJS
            backgroundColor={'transparent'}
            content={Details}
            isReadOnly
        />
    </View>