Feature/delegate to first font in fallback list on React Native

packages/react-strict-dom/src/native/css/processStyle.js

@@ -114,6 +114,12 @@ export function processStyle(
       if (stringContainsVariables(styleValue)) {
         result[propName] = CSSUnparsedValue.parse(propName, styleValue);
         continue;
+      } else if (propName === 'fontFamily') {
+        const firstFont = styleValue.split(',')[0].trim();
+        // Remove surrounding quotes if present
+        // e.g. fontFamily: '"Helvetica Neue", sans-serif'
+        result[propName] = firstFont.replace(/^["']|["']$/g, '');
+        continue;
       }
       // Polyfill support for backgroundImage using experimental API
       else if (propName === 'backgroundImage') {

packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap

@@ -185,6 +185,38 @@ exports[`properties: general filter 1`] = `
 }
 `;
 
+exports[`properties: general fontFamily: normal 1`] = `
+{
+  "style": {
+    "fontFamily": "Arial",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with multiple fallbacks 1`] = `
+{
+  "style": {
+    "fontFamily": "Roboto",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with quoted font name 1`] = `
+{
+  "style": {
+    "fontFamily": "SF Pro Display",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with single quoted font name 1`] = `
+{
+  "style": {
+    "fontFamily": "Helvetica Neue",
+  },
+}
+`;
+
 exports[`properties: general fontSize: default 1`] = `
 {
   "style": {

packages/react-strict-dom/tests/css-test.native.js

@@ -296,6 +296,57 @@ describe('properties: general', () => {
     ).toMatchSnapshot('fontScale:2');
   });
 
+  test('fontFamily', () => {
+    const styles = css.create({
+      root: {
+        fontFamily: 'Arial'
+      }
+    });
+    expect(css.props.call(mockOptions, styles.root)).toMatchSnapshot('normal');
+    expect(css.props.call(mockOptions, styles.root).style.fontFamily).toBe(
+      'Arial'
+    );
+
+    const styles4 = css.create({
+      root: {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+      }
+    });
+    expect(css.props.call(mockOptions, styles4.root)).toMatchSnapshot(
+      'with multiple fallbacks'
+    );
+    // Verify that only the first font is used
+    expect(css.props.call(mockOptions, styles4.root).style.fontFamily).toBe(
+      'Roboto'
+    );
+
+    const styles5 = css.create({
+      root: {
+        fontFamily: '"SF Pro Display", -apple-system, sans-serif'
+      }
+    });
+    expect(css.props.call(mockOptions, styles5.root)).toMatchSnapshot(
+      'with quoted font name'
+    );
+    // Verify that quotes are stripped and only first font is used
+    expect(css.props.call(mockOptions, styles5.root).style.fontFamily).toBe(
+      'SF Pro Display'
+    );
+
+    const styles6 = css.create({
+      root: {
+        fontFamily: "'Helvetica Neue', Helvetica, Arial"
+      }
+    });
+    expect(css.props.call(mockOptions, styles6.root)).toMatchSnapshot(
+      'with single quoted font name'
+    );
+    // Verify that single quotes are stripped
+    expect(css.props.call(mockOptions, styles6.root).style.fontFamily).toBe(
+      'Helvetica Neue'
+    );
+  });
+
   test('fontVariant', () => {
     const styles = css.create({
       root: {