Implement FontFace polyfill to expose loading of custom fonts (#280)

* Implement FontFace polyfill

* Fix typecheck

* Expose status property

* Address comment

* Update gulpfile.js to include FontFace

Author: Alex-MSFT

Modules/@babylonjs/react-native/FontFace.ts

@@ -0,0 +1,39 @@
+import { Tools } from '@babylonjs/core';
+
+// Declare _native to get access to NativeCanvas.
+declare var _native: any;
+
+/**
+ * Partial Polyfill for FontFace Web API to wrap the NativeCanvas object.
+ */
+export class FontFace {
+  private source: string | ArrayBuffer | undefined;
+  private _status: "unloaded" | "loading" | "loaded" | "error" = "unloaded";
+  public get status(): "unloaded" | "loading" | "loaded" | "error" {
+    return this._status;
+  }
+
+  public get loaded(): boolean {
+    return this._status === "loaded";
+  }
+
+  public constructor(public readonly family: string, source: string | ArrayBuffer) {
+    this.source = source;
+  }
+
+  public async load(): Promise<void> {
+    try {
+      this._status = "loading";
+      if (typeof this.source === 'string') {
+        this.source = await Tools.LoadFileAsync(this.source);
+      }
+
+      await _native.NativeCanvas.loadTTFAsync(this.family, this.source);
+      this.source = undefined;
+      this._status = "loaded"
+    } catch (ex) {
+      console.error("Error encountered when loading font: " + ex);
+      this._status = "error";
+    }
+  }
+}

Modules/@babylonjs/react-native/index.ts

@@ -1,3 +1,4 @@
 export * from './EngineView';
 export * from './EngineHook';
 export * from './NativeCapture';
+export * from './FontFace';

Package/gulpfile.js

@@ -493,6 +493,9 @@ const validate = async () => {
     'Assembled/NativeCapture.d.ts',
     'Assembled/NativeCapture.js',
     'Assembled/NativeCapture.js.map',
+    'Assembled/FontFace.d.ts',
+    'Assembled/FontFace.js',
+    'Assembled/FontFace.js.map',
     'Assembled/package.json',
     'Assembled/react-native-babylon.podspec',
     'Assembled/ReactNativeEngine.d.ts',