Merge pull request #2120 from Shopify/RefDefault

Make font property mandatory in Text

Author: wcandillon

docs/docs/text/text.md

@@ -11,7 +11,7 @@ Please note that the y origin of the Text is the bottom of the text, not the top
 | Name        | Type       |  Description                                                    |
 |:------------|:-----------|:----------------------------------------------------------------|
 | text        | `string`   | Text to draw                                                    |
-| font        | `SkFont`   | Font to use (optional)                                          |
+| font        | `SkFont`   | Font to use                                                     |
 | x           | `number`   | Left position of the text (default is 0)                        |
 | y           | `number`   | Bottom position the text (default is 0, the )                   |
 
@@ -30,7 +30,6 @@ export const HelloWorld = () => {
         x={0}
         y={fontSize}
         text="Hello World"
-        // Font is optional
         font={font}
       />
     </Canvas>

package/cpp/rnskia/dom/props/FontProp.h

@@ -31,17 +31,12 @@ class FontProp : public DerivedProp<SkFont> {
             "Expected SkFont object or null/undefined for the Font property.");
       }
     } else {
-      auto fm = SkFontMgr::RefDefault();
-      sk_sp<SkTypeface> typeface =
-          fm->legacyMakeTypeface(nullptr, SkFontStyle());
-      auto font = std::make_shared<SkFont>(SkFont(typeface));
-      font->setSize(14);
-      setDerivedValue(font);
+      setDerivedValue(nullptr);
     }
   }
 
 private:
   NodeProp *_fontProp;
 };
 
-} // namespace RNSkia
+} // namespace RNSkia

package/src/dom/nodes/drawings/Text.ts

@@ -23,21 +23,8 @@ export class TextNode extends JsiDrawingNode<TextProps, SkFont | null> {
 
   protected deriveProps() {
     const { font } = this.props;
-    if (font === null) {
-      return null;
-    } else if (font === undefined) {
-      console.warn(
-        "<Text />: the font property is mandatory on React Native Web"
-      );
+    if (!font) {
       return null;
-      // return this.Skia.Font(
-      //   this.Skia.FontMgr.System().matchFamilyStyle("System", {
-      //     width: 5,
-      //     weight: 400,
-      //     slant: 0,
-      //   }),
-      //   14
-      // );
     }
     return font;
   }

package/src/dom/types/Drawings.ts

@@ -109,7 +109,7 @@ export interface DiffRectProps extends DrawingNodeProps {
 }
 
 export interface TextProps extends DrawingNodeProps {
-  font?: SkFont | null;
+  font: SkFont | null;
   text: string;
   x: number;
   y: number;

package/src/renderer/__tests__/e2e/Text.spec.tsx

@@ -69,19 +69,6 @@ describe("Text", () => {
     checkImage(image, `snapshots/text/text-bounds-${surface.OS}.png`);
   });
 
-  // We test it only on Android and iOS now because there might be no default font on Web
-  itRunsE2eOnly("The font property is optional", async () => {
-    const image = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Group>
-          <Text x={32} y={64} text="Hello World!" />
-        </Group>
-      </>
-    );
-    checkImage(image, `snapshots/text/text-default-font-${surface.OS}.png`);
-  });
-
   it("Should draw text along a circle", async () => {
     const font = fonts.RobotoMedium;
     const { Skia } = importSkia();