[ReactNative/RN]react-native-render-html font tag 적용 안되는 이슈 해결 방법

프로젝트를 하던 중에, 백오피스에서 텍스트 편집기를 통해 저장한 데이터를

html로 받아와 앱에 디스플레이 해주는 부분을 수행하였다.(공지사항, FAQ 등)

 

이를 위해 react-native-render-html 라이브러리를 사용하였는데,

There is no custom renderer registered for tag "font" which is not part of the HTML5 standard. The tag will not be rendered. If you don't want this tag to be rendered, add it to "ignoredDomTags" prop array. If you do, register an HTMLElementModel for this tag with "customHTMLElementModels" prop.

 위와 같은 Warning 메시지와 함께 텍스트가 출력이 안되었다.

 

현재 버전의 라이브러리는 HTML5 버전을 지원하는데, font 태그는 HTML4 버전이니 ignoreDomTags를 하여 해당 태그를 무시하거나 customHTMLElementModels를 추가하라고 가이드를 준다.

 

ignoreDomTags는 말그대로 해당 태그 안에 있는 항목들을 무시하는거라 노출은 안되고 Warning만 지워주는 셈이니,

 

나는 후자의 방법을 선택하여 작업했다.

 

* 해결

 

import { HTMLElementModel, HTMLContentModel } from 'react-native-render-html';

const fontElementModel = HTMLElementModel.fromCustomModel({
  tagName: 'font',
  contentModel: HTMLContentModel.mixed,
  getUADerivedStyleFromAttributes({ face, color, size }) {
    let style = {};
    if (face) {
      style.fontFamily = face;
    }
    if (color) {
      style.color = color;
    }
    if (size) {
      // handle size such as specified in the HTML4 standard. This value
      // IS NOT in pixels. It can be absolute (1 to 7) or relative (-7, +7):
      // https://www.w3.org/TR/html4/present/graphics.html#edef-FONT
      // implement your solution here
    }

    return style;
  },
});
export const customHTMLElementModels = {
  font: fontElementModel,
};

해당 파일을 따로 만들어 준 후,

 

<RenderHTML
              source={htmlSource}
              contentWidth={width}
              customHTMLElementModels={customHTMLElementModels}
            />

이런식으로 적용하니 font Tag가 정상적으로 출력되었다.