Notes: I'm the author of react-native-render-html
. This question is for educational purposes, in compliance with StackOverflow policy.

I am rendering RenderHtml
component in a WebDisplay
component like so:
import * as React from 'react';
import {ScrollView, StyleSheet, Text, useWindowDimensions} from 'react-native';
import RenderHtml from 'react-native-render-html';
const html = '<div>Hello world!</div>';
function WebDisplay({html}) {
const {width: contentWidth} = useWindowDimensions();
const tagsStyles = {
a: {
textDecorationLine: 'none',
},
};
return (
<RenderHtml
contentWidth={contentWidth}
source={{html}}
tagsStyles={tagsStyles}
/>
);
}
export default function App() {
const [isToastVisible, setIsToastVisible] = React.useState(false);
React.useEffect(function flipToast() {
const timeout = setTimeout(() => {
setIsToastVisible((v) => !v);
}, 30);
return () => {
clearTimeout(timeout);
};
});
return (
<ScrollView contentContainerStyle={styles.container}>
<WebDisplay html={html} />
{isToastVisible && <Text>This is a toast!</Text>}
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});
Why am I getting this warning, what does it mean and how to fix it?