diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index bba62cc4f4e0..c806bedc31c7 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -5,8 +5,8 @@ import PropTypes from 'prop-types'; import htmlRenderers from './HTMLRenderers'; import * as HTMLEngineUtils from './htmlEngineUtils'; import styles from '../../styles/styles'; -import fontFamily from '../../styles/fontFamily'; import convertToLTR from '../../libs/convertToLTR'; +import singleFontFamily from '../../styles/fontFamily/singleFontFamily'; const propTypes = { /** Whether text elements should be selectable */ @@ -60,18 +60,13 @@ function BaseHTMLEngineProvider(props) { // We need to memoize this prop to make it referentially stable. const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]); - // We need to pass multiple system-specific fonts for emojis but - // we can't apply multiple fonts at once so we need to pass fallback fonts. - const fallbackFonts = {'ExpensifyNeue-Regular': fontFamily.EXP_NEUE}; - return ( (text.data = convertToLTR(text.data)), diff --git a/src/styles/fontFamily/bold/index.android.js b/src/styles/fontFamily/bold/index.android.js index 7473e4d7533c..73ba56dc4262 100644 --- a/src/styles/fontFamily/bold/index.android.js +++ b/src/styles/fontFamily/bold/index.android.js @@ -1,3 +1,4 @@ -const bold = 'ExpensifyNeue-Bold'; +const singleBold = 'ExpensifyNeue-Bold'; +const multiBold = 'ExpensifyNeue-Bold'; -export default bold; +export {singleBold, multiBold}; diff --git a/src/styles/fontFamily/bold/index.ios.js b/src/styles/fontFamily/bold/index.ios.js index 3ba35f200d3d..a0523831a058 100644 --- a/src/styles/fontFamily/bold/index.ios.js +++ b/src/styles/fontFamily/bold/index.ios.js @@ -1,3 +1,4 @@ -const bold = 'ExpensifyNeue-Regular'; +const singleBold = 'ExpensifyNeue-Regular'; +const multiBold = 'ExpensifyNeue-Regular'; -export default bold; +export {singleBold, multiBold}; diff --git a/src/styles/fontFamily/bold/index.js b/src/styles/fontFamily/bold/index.js index 66d3c64f3565..401a808d29d6 100644 --- a/src/styles/fontFamily/bold/index.js +++ b/src/styles/fontFamily/bold/index.js @@ -1,3 +1,4 @@ -const bold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji'; +const singleBold = 'ExpensifyNeue-Regular'; +const multiBold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji'; -export default bold; +export {singleBold, multiBold}; diff --git a/src/styles/fontFamily/index.native.ts b/src/styles/fontFamily/index.native.ts index 0d6c253eb3a6..53f421a58535 100644 --- a/src/styles/fontFamily/index.native.ts +++ b/src/styles/fontFamily/index.native.ts @@ -1,17 +1,3 @@ -import bold from './bold'; -import FontFamilyStyles from './types'; +import singleFontFamily from './singleFontFamily'; -const fontFamily: FontFamilyStyles = { - EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic', - EXP_NEUE_BOLD: bold, - EXP_NEUE: 'ExpensifyNeue-Regular', - EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium', - EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic', - SYSTEM: 'System', - MONOSPACE: 'ExpensifyMono-Regular', - MONOSPACE_ITALIC: 'ExpensifyMono-Regular', - MONOSPACE_BOLD: 'ExpensifyMono-Bold', - MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold', -}; - -export default fontFamily; +export default singleFontFamily; diff --git a/src/styles/fontFamily/index.ts b/src/styles/fontFamily/index.ts index 57d08ce28771..7a8267eba1a5 100644 --- a/src/styles/fontFamily/index.ts +++ b/src/styles/fontFamily/index.ts @@ -1,19 +1,3 @@ -import bold from './bold'; -import FontFamilyStyles from './types'; +import multiFontFamily from './multiFontFamily'; -// In windows and ubuntu, we need some extra system fonts for emojis to work properly -// otherwise few of them will appear as black and white -const fontFamily: FontFamilyStyles = { - EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji', - EXP_NEUE_BOLD: bold, - EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji', - EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji', - EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji', - SYSTEM: 'System', - MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', - MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', - MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', - MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', -}; - -export default fontFamily; +export default multiFontFamily; diff --git a/src/styles/fontFamily/multiFontFamily.ts b/src/styles/fontFamily/multiFontFamily.ts new file mode 100644 index 000000000000..2edd17548354 --- /dev/null +++ b/src/styles/fontFamily/multiFontFamily.ts @@ -0,0 +1,19 @@ +import {multiBold} from './bold'; +import FontFamilyStyles from './types'; + +// In windows and ubuntu, we need some extra system fonts for emojis to work properly +// otherwise few of them will appear as black and white +const fontFamily: FontFamilyStyles = { + EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji', + EXP_NEUE_BOLD: multiBold, + EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji', + EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji', + EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji', + SYSTEM: 'System', + MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', + MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', + MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', + MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', +}; + +export default fontFamily; diff --git a/src/styles/fontFamily/singleFontFamily.ts b/src/styles/fontFamily/singleFontFamily.ts new file mode 100644 index 000000000000..6d5b05a5b0aa --- /dev/null +++ b/src/styles/fontFamily/singleFontFamily.ts @@ -0,0 +1,17 @@ +import {singleBold} from './bold'; +import FontFamilyStyles from './types'; + +const fontFamily: FontFamilyStyles = { + EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic', + EXP_NEUE_BOLD: singleBold, + EXP_NEUE: 'ExpensifyNeue-Regular', + EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium', + EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic', + SYSTEM: 'System', + MONOSPACE: 'ExpensifyMono-Regular', + MONOSPACE_ITALIC: 'ExpensifyMono-Regular', + MONOSPACE_BOLD: 'ExpensifyMono-Bold', + MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold', +}; + +export default fontFamily;