CODEWITHSUNDEEP
htmlreact-nativefontsreact-native-render-html
Quang Bình Đinh
Quang Bình Đinh

Reputation: 391

react-native-render-html FontFamily attribute not working

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&acirc;́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&ocirc;́i amoni của axit cacboxylic đa chức; ch&acirc;́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&ocirc;́i amoni của một amino axit. Cho m gam E g&ocirc;̀m X và Y (có tỉ lệ mol tương ứng là 3 : 5) tác dụng h&ecirc;́t với lượng dư dung dịch NaOH đun nóng, thu được 4,928 lít (đktc) h&ocirc;̃n hợp khí (g&ocirc;̀m 2 ch&acirc;́t hữu cơ là đ&ocirc;̀ng đẳng liên ti&ecirc;́p) có tỉ kh&ocirc;́i so với hiđro bằng 383/22 và 19,14 gam h&ocirc;̃n hợp mu&ocirc;́i. Ph&acirc;̀n trăm kh&ocirc;́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 ?

Upvotes: 12

Views: 14508

Answers (4)

Ali Safi
Ali Safi

Reputation: 91

You need to set the systemFonts Prop:

<RenderHTML systemFonts={['IRANSansX-Bold']} />

Upvotes: 9

fatemeh kazemi
fatemeh kazemi

Reputation: 621

file.js:

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet, Dimensions, Pressable, Image } from 'react-native';
import RenderHtml , { defaultSystemFonts } from 'react-native-render-html';

const CustomComponent = (props) => {
const { width } = Dimensions.get('screen')
const systemFonts = [...defaultSystemFonts, global.fontRegular];
return (
        <>
                   {props.recepie?.data.description &&
                        <RenderHtml
                            contentWidth={width - 30}
                            source={{ html: `<html><body> 
                           <p>${props.recepie?.data.description}</p></body> 
                             </html>` }}
                            tagsStyles={mixedStyle}
                            systemFonts={systemFonts}
                        />}
        </>
    );
};
const mixedStyle = {
    body: {
        fontFamily: 'your global font name',
        color: '#212121'
    },
    p: {
        fontFamily: 'your global font name',
    }
}
export default CustomComponent ;

Upvotes: 0

Rodrigo Ventura
Rodrigo Ventura

Reputation: 191

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

Upvotes: 19

Jules Sam. Randolph
Jules Sam. Randolph

Reputation: 4250

I tried to reproduce your example in an Expo snack here: https://snack.expo.io/@jsamr/stack-overflow-63626884

If you take a look a the Web renderer on the right, you'll notice that the appropriate font is displayed (in this example, monospace). Are you sure you configured the font appropriately?

Upvotes: 0

Related Questions