React Native Render Html after get fetch request

Question

I'm using the react-native-render-html npm package with expo. I'm trying to fetch some data from a website in useEffect and use the package to display the contents, however I keep getting the error of No source prop was provided. Nothing will be rendered No source prop was provided. Nothing will be rendered .

I think the RenderHTML prop is being rendered before the request has been fulfilled:

import React, { useEffect, useState } from 'react'
import { ActivityIndicator, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
import RenderHTML from 'react-native-render-html';

const EventsScreen = () => {
    const [eventsHTML, setEventsHTML] = useState(null);
    const {width} = useWindowDimensions();

    useEffect(()=>{
        fetch('https://www.google.com')
        .then(response => response.text())
        .then(response => {setEventsHTML(response);console.log("render");});

        
    }, [eventsHTML]);
  return (
    <View>
        {!eventsHTML? <ActivityIndicator/> : <RenderHTML contentWidth={width} source={eventsHTML}/>}
    </View>
    // <Text>The data has {eventsHTML? 'loaded' : 'not loaded'}</Text>
    // <RenderHTML contentWidth={width} source={source}>Hello world</RenderHTML>
  )
}
export default EventsScreen;

H

Answer 1

for rendering html first set html object like this:

const source = {
            html: eventsHTML,
        };

then pass this source object as props to RenderHTML component like this:

<RenderHTML contentWidth={width} source={source}/>