Description
Decision Table
- My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
- My issue does not look like “The HTML element
<yyy>is not rendered”
Good Faith Declaration
- I have read the HELP document here: https://git.io/JBi6R
- I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
- I have confirmed that this bug has not been reported yet
Description
Description
I am facing an issue where custom fonts do not apply when using inline styles inside RenderHTML. However, the same font works perfectly in a React Native component.
React Native Information
React Native: 0.78.0RNRH Version
"react-native-render-html": "^6.3.4",
Tested Platforms
- Android
- iOS
- Web
- MacOS
- Windows
Reproduction Platforms
- Android
- iOS
- Web
- MacOS
- Windows
Minimal, Reproducible Example
Install custom fonts and link them properly.
Use a standard component to verify the font is working.
Use RenderHTML with an inline
Text
.The font does not render.
Expected Behavior
The text inside RenderHTML should render with the specified font.
Actual Behavior
The text does not render with the expected font. It falls back to a default sans-serif font.
Reproducible Code Sample
import React, { useMemo } from 'react';
import RenderHTML from 'react-native-render-html';
import { Text, useWindowDimensions, View } from 'react-native';
export const Html = React.memo(({ isDarkmode }) => {
const { width } = useWindowDimensions();
const systemFonts = useMemo(() => [
'Jameel Noori Nastaleeq',
'1 MUHAMMADI QURANIC',
'Al Qalam Quran Majeed Web2_D',
], []);
const generateHTML = useMemo(() => <p style="font-size: 21px; font-family: '1 MUHAMMADI QURANIC'; text-align: center;"> بسم اللہ الرحمن الرحیم </p>, [isDarkmode]);
return (
<Text style={{ fontFamily: '1 MUHAMMADI QURANIC' }}>
This text renders correctly
<RenderHTML
contentWidth={width}
source={{ html: generateHTML }}
systemFonts={systemFonts}
/>
);
});
Additional Notes
The issue persists on both Android and iOS.
The font renders fine in a standard component.
Only fails when used inside RenderHTML.