Menu
Today I try to use this library to render raw html in my React Native app. Here my code:
import HTML from "react-native-render-html";
const htmlContent = `
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">Chất X (C</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">x</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">H</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">y</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">O</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">4</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">N</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">) là muối amoni của axit cacboxylic đa chức; chất Y (C</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">m</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">H</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">n</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">O</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">N</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">) là muối amoni của một amino axit. Cho m gam E gồm X và Y (có tỉ lệ mol tương ứng là 3 : 5) tác dụng hết với lượng dư dung dịch NaOH đun nóng, thu được 4,928 lít (đktc) hỗn hợp khí (gồm 2 chất hữu cơ là đồng đẳng liên tiếp) có tỉ khối so với hiđro bằng 383/22 và 19,14 gam hỗn hợp muối. Phần trăm khối lượng của Y trong E là </span></p>
</div>
</div>
</div>
`;
const App = () => {
return (
<ScrollView style={{ flex: 1 }}>
<HTML
html={htmlContent} tagsStyles={{
span: { fontFamily: 'TimesNewRomanPSMT', color:'red' }
}}
imagesMaxWidth={Dimensions.get("window").width}
/>
</ScrollView>
// <Text style={{ fontFamily: 'TimesNewRomanPSMT', fontSize: 44 }}>affdf</Text>
);
};
I downloaded the font and linked it successfully. The Text below already rendered successfully. However in HTML tag it still not render. It only renders the color and fontStyle attribute. Could anyone help me to solve this problem ?
869
asked Mar 05 '26 23:03
You need to set the systemFonts Prop:
import RenderHtml, { defaultSystemFonts } from 'react-native-render-html';
const systemFonts = [...defaultSystemFonts, 'Montserrat-Regular', 'Montserrat-Bold'];
<RenderHtml
contentWidth={Dimensions.get('window').width}
source={{ html: htmlSource }}
tagsStyles={{a: {color:'#58585A',textDecorationLine:'none', fontSize:16, fontFamily:'Montserrat-Bold',lineHeight: 23},p:{**fontFamily:'Montserrat-Regular**',lineHeight: 23,color:'#58585A',fontSize:16,marginBottom:16}, img:{display: 'none'}}}
systemFonts={systemFonts}
/>
It's important to set the systemFonts Prop in RenderHtml component and make sure you have react-native-render-html v:6.0.0 >
Check their documentation about this systemFonts Prop
165
answered Mar 07 '26 12:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With