ViroText cannot render Korean

[HERO-ILATI]

Environment

1. Development OS: Mac, iOS
2. Device OS & Version: iPhoneXS / iOS 12
3. Version: ViroReact : 2.13.0 / React Native : 0.57.7

Description

https://github.com/viromedia/viro/issues/186

I found that ViroText support Korean since ViroReact v2.5.1 but it still cannot render Korean like this. I used system font and NotoSansCJK and some others. what fonts are used for testing Korean or Japanese? I'm gonna test that one. Thank you.

[ajaxsys]

Same issue

Development OS: MacOS Device OS & Version: Sansung s8 / Android 8 Version: ViroReact : 2.13.0 / React Native : 0.57.7

[ajaxsys]

and also

Development OS: MacOS Device OS & Version: Sansung s8 / Android 9 Version: ViroReact : 2.14.0 / React Native : 0.59

[radvani]

For iOS you should use "PingFang HK" to render Korean, and for Android "NotoSansCJK". Note that not all Android devices have the "NotoSansCJK" font installed.

[geotwo-JinsolLee]

For IOS, You can use "Apple SD Gothic Neo" to render Korean

[ziponia]

I spent a lot of time on this problem, but I solved it.

import React, { useEffect, useRef, useState } from "react";
import { ViroText, ViroTextStyle } from "@viro-community/react-viro";
import { ColorValue } from "react-native";

export type ViroCustomTextProps = {
  text: string;
  color?: ColorValue;
  extrusionDepth?: number;
  style?: ViroTextStyle;
  outerStroke?: {
    type?: "None" | "Outline" | "DropShadow";
    width?: number;
    color?: ColorValue;
  };
  maxLines?: number;
  textClipMode?: "None" | "ClipToBounds";
  textLineBreakMode?: "WordWrap" | "CharWrap" | "Justify" | "None";
  width?: number;
  height?: number;
};

export function ViroCustomText(props: ViroCustomTextProps) {
  const {
    text,
    color,
    extrusionDepth,
    maxLines,
    outerStroke,
    style,
    textClipMode,
    textLineBreakMode,
    width,
    height,
  } = props;

  const ref = useRef<ViroText>();
  const [render, setRender] = useState(false);

  useEffect(() => {
    if (Platform.OS === "android") {
      ref.current.setNativeProps({
        fontFamily: ["SamsungKorean", "NotoSansCJK", "Roboto"].join(","),
      } as any);
    }

    setRender(true);
  }, []);

  return (
    <ViroText
      ref={ref}
      text={!render ? "" : text} // check load font
    />
  );
}

usage

<ViroCustomText 
    text="헤이 모두들 안녕. hello world everybody, 123456789"
/>