HTMLRenderer

.tsx

import theme from '@/theme';
import { FC, memo } from 'react';
import { StyleSheet, View, LogBox, useWindowDimensions } from 'react-native';
import RenderHtml, { HTMLSource, MixedStyleDeclaration } from 'react-native-render-html';

LogBox.ignoreLogs([
	/Support for defaultProps will be removed/,
]);

interface Props {
	html: string;
	style?: {
		container?: object;
		text?: {
			fontFamily?: string;
			fontSize?: number;
			lineHeight?: number;
			color?: string;
		};
	};
}

const HTMLRenderer: FC<Props> = ({ style = {}, ...props }) => {
	//#region States

	const { width } = useWindowDimensions();

	//#endregion

	//#region Variables

	const {
		container: containerStyle = {},
		text: textStyle = {},
	} = style;

	const {
		fontFamily = 'system-ui',
		fontSize = 16,
		lineHeight = 24,
		color = theme.colorText.Secondary,
	} = textStyle;

	//#endregion

	const tagsStyles: Record<string, MixedStyleDeclaration> = {
		body: {
			fontFamily,
			fontSize,
			lineHeight,
			color,
		},
		p: {
			marginBottom: 8,
		},
		a: {
			color: theme.colorText.Active,
			textDecorationLine: 'none' as const,
		},
		img: {
			maxWidth: '100%',
			height: 'auto',
		},
		ul: {
			marginLeft: 16,
			marginBottom: 8,
		},
		ol: {
			marginLeft: 16,
			marginBottom: 8,
		},
		li: {
			marginBottom: 4,
		},
		h1: {
			fontSize: fontSize * 1.5,
			fontWeight: 'bold',
			marginBottom: 16,
		},
		h2: {
			fontSize: fontSize * 1.3,
			fontWeight: 'bold',
			marginBottom: 14,
		},
		h3: {
			fontSize: fontSize * 1.2,
			fontWeight: 'bold',
			marginBottom: 12,
		},
		h4: {
			fontSize: fontSize * 1.1,
			fontWeight: 'bold',
			marginBottom: 10,
		},
		blockquote: {
			borderLeftWidth: 4,
			borderLeftColor: theme.colorText.Secondary,
			paddingLeft: 16,
			marginLeft: 0,
			marginBottom: 8,
		},
	};

	const source: HTMLSource = {
		html: props.html,
	};

	return (
		<View style={[styles.container, containerStyle]}>
			<RenderHtml
				source={source}
				contentWidth={width}
				tagsStyles={tagsStyles}
				baseStyle={styles.base}
			/>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		width: '100%',
	},
	base: {
		margin: 0,
		padding: 0,
	},
});

export default memo(HTMLRenderer);