diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap index 35b38692..a820b14d 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap @@ -6,9 +6,15 @@ Object { } `; +exports[`apis/StyleSheet/createReactDOMStyle fontFamily fontFamily: "monospace" 1`] = ` +Object { + "fontFamily": "monospace, monospace", +} +`; + exports[`apis/StyleSheet/createReactDOMStyle fontFamily general case 1`] = ` Object { - "fontFamily": "Georgia, Times", + "fontFamily": "Georgia, Times, serif", } `; diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js index 2abc4633..76921fdc 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js @@ -122,7 +122,11 @@ describe('apis/StyleSheet/createReactDOMStyle', () => { describe('fontFamily', () => { test('general case', () => { - expect(createReactDOMStyle({ fontFamily: 'Georgia, Times' })).toMatchSnapshot(); + expect(createReactDOMStyle({ fontFamily: 'Georgia, Times, serif' })).toMatchSnapshot(); + }); + + test('fontFamily: "monospace"', () => { + expect(createReactDOMStyle({ fontFamily: 'monospace' })).toMatchSnapshot(); }); test('fontFamily: "System"', () => { diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js index 01493153..dcba9b81 100644 --- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js @@ -60,6 +60,7 @@ const borderWidthProps = { borderLeftWidth: true }; +const monospaceFontStack = 'monospace, monospace'; const systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif'; @@ -234,8 +235,13 @@ const createReducer = (style, styleProps) => { } case 'fontFamily': { - const isSystem = value === 'System'; - resolvedStyle.fontFamily = isSystem ? systemFontStack : value; + if (value === 'System') { + resolvedStyle.fontFamily = systemFontStack; + } else if (value === 'monospace') { + resolvedStyle.fontFamily = monospaceFontStack; + } else { + resolvedStyle.fontFamily = value; + } break; }