feat: added support for url() loaded font faces in web apps

BREAKING CHANGE: the signature of `<FontFacesProvider />` changed and `useFontFaces()` was removed

Closes #12

Author: Kyler Jensen

.gitignore

@@ -1,9 +1,22 @@
 # npm and yarn
 node_modules/
+coverage/
+npm-debug.*
 *.log
 
 # macOS
 .DS_Store
 
 # @react-native-community/bob
-dist/
+dist/
+
+# expo
+.expo/
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+__generated__/

README.md

@@ -41,20 +41,27 @@ This library aims to make life easier by allowing React Native developers to use
    yarn add -D @types/react-helmet
    ```
 
-2. Wrap your application's root component in a `<FontFacesProvider />`:
+2. Wrap your application's root component in a `<FontFacesProvider />` and provide a `FontLoader`:
 
    ```jsx
    // App.tsx
 
    import React from 'react';
    import * as Font from 'expo-font';
    import { AppContent } from './AppContent';
-   import { FontFacesProvider } from 'react-native-font-faces';
+   import { FontFacesProvider, FontLoader, Roboto_All } from 'react-native-font-faces';
 
    export default function App() {
+     const [error, setError] = React.useState<Error>();
+     const [loading, setLoading] = React.useState<boolean>(true);
+
      return (
-       <FontFacesProvider nativeFontLoader={Font.loadAsync}>
-         <AppContent />
+       <FontFacesProvider
+         onError={setError}
+         onLoading={setLoading}
+         fontFaces={Roboto_All}
+         nativeFontLoader={Font.loadAsync}>
+         <AppContent loading={loaading} error={error} />
        </FontFacesProvider>
      );
    }
@@ -68,11 +75,13 @@ This library aims to make life easier by allowing React Native developers to use
    import React from 'react';
    import { Helmet } from 'react-helmet';
    import { AppLoading } from 'expo';
-   import { useFontFaces, Roboto_All } from 'react-native-font-faces';
 
-   export function AppContent() {}
-     const [fontsLoaded] = useFontFaces(Roboto_All);
-     if (fontsLoaded) {
+   export function AppContent(props: any) {}
+     if (props.loading) {
+       return <AppLoading />;
+     } else if (props.error) {
+       return <Text>{props.error.message}</Text>
+     } else {
        return (
          <View style={styles.container}>
            <Helmet>
@@ -87,8 +96,6 @@ This library aims to make life easier by allowing React Native developers to use
            <StatusBar style="auto" />
          </View>
        );
-     } else {
-       return <AppLoading />;
      }
    }
 
@@ -114,10 +121,17 @@ This library aims to make life easier by allowing React Native developers to use
    });
    ```
 
+## Migrating from 2.x
+
+In version 3.x, we simplified `FontFacesProvider` and removed `useFontFaces`. Follow these steps to migrate:
+
+1. Remove all instances of `useFontFaces()`.
+2. Update your application's `<FontFacesProvider/>` to provide the `onLoading` and `onError` props (optional).
+
 ## Migrating from 1.x
 
 In version 2.x, we introduced `FontFacesProvider` and `useFontFaces`, and removed `enableFontFaces`. Follow these steps to migrate:
 
 1. Remove all instances of `enableFontFaces()`.
 2. Add a `<FontFacesProvider/>` around your application's root component.
-3. Add `const [fontsLoaded] = useFontFaces(...)` inside an inner function component's body and handle the `fontsLoaded` value appropriately.
+3. Add `const [fontsLoaded] = useFontFaces(...)` inside an inner function component's body and handle the `fontsLoaded` value appropriately.

example/App.tsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import * as Font from 'expo-font';
-import { Helmet } from 'react-helmet';
 import { AppLoading } from 'expo';
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
-import { FontFacesProvider, useFontFaces, Roboto_All } from 'react-native-font-faces';
+import { FontFacesProvider, Roboto_All } from 'react-native-font-faces';
 
-const AppContent = () => {
-  const [fontsLoaded] = useFontFaces(Roboto_All);
-
-  if (fontsLoaded) {
+const AppContent = (props: any) => {
+  if (props.loading) {
+    return <AppLoading />;
+  } else if (props.error) {
+    return <Text>{props.error.message}</Text>;
+  } else {
     return (
       <View style={styles.container}>
-        <Helmet>
-          <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900"
-            rel="stylesheet"
-          />
-        </Helmet>
         <Text style={styles.text}>This should be Regular</Text>
         <Text style={[styles.text, styles.italic]}>This should be Italic</Text>
         <Text style={[styles.text, styles.bold]}>This should be Bold</Text>
@@ -27,15 +22,20 @@ const AppContent = () => {
         <StatusBar style="auto" />
       </View>
     );
-  } else {
-    return <AppLoading />;
   }
 };
 
 export default function App() {
+  const [error, setError] = React.useState<Error>();
+  const [loading, setLoading] = React.useState<boolean>(true);
+
   return (
-    <FontFacesProvider nativeFontLoader={Font.loadAsync}>
-      <AppContent />
+    <FontFacesProvider
+      onError={setError}
+      onLoading={setLoading}
+      fontFaces={Roboto_All}
+      nativeFontLoader={Font.loadAsync}>
+      <AppContent {...{ loading, error }} />
     </FontFacesProvider>
   );
 }

example/babel.config.js

@@ -3,7 +3,7 @@ const package = require('../package.json');
 
 const moduleResolverConfig = {
   alias: {
-    [package.name]: path.join(__dirname, '..', package.source),
+    [package.name]: path.join(__dirname, '..', 'src'),
   },
 };
 

example/package.json

@@ -13,15 +13,13 @@
     "expo-status-bar": "^1.0.2",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
-    "react-helmet": "^6.1.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-web": "~0.11.7"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",
     "@expo/webpack-config": "^0.12.20",
     "@types/react": "~16.9.41",
-    "@types/react-helmet": "^6.0.0",
     "@types/react-native": "~0.62.13",
     "expo-font": "^8.2.1",
     "react-refresh": "^0.8.3",

example/yarn.lock

@@ -1793,13 +1793,6 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-helmet@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.0.0.tgz#5b74e44a12662ffb12d1c97ee702cf4e220958cf"
-  integrity sha512-NBMPAxgjpaMooXa51cU1BTgrX6T+hQbMiLm77JhBbfOzPQea3RB5rNpPOD5xGWHIVpGXHd59cltEzIq0qglGcQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-native@~0.62.13":
   version "0.62.18"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.18.tgz#ad63691e7c44edef2beeb6af52b2eb942c3ed8a1"
@@ -8094,21 +8087,6 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-fast-compare@^3.1.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
-react-helmet@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
-  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.1.1"
-    react-side-effect "^2.1.0"
-
 react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8189,11 +8167,6 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-side-effect@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
-  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
-
 react-timer-mixin@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"

package.json

@@ -1,52 +1,51 @@
 {
   "name": "react-native-font-faces",
-  "version": "0.0.0",
-  "description": "Easily emulate @font-face behavior in react-native",
-  "repository": "https://github.com/Kjens93/react-native-font-faces.git",
-  "author": "Kyler Jensen <kjens93@users.noreply.github.com>",
-  "license": "MIT",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
-  "source": "src/index.ts",
+  "author": "Kyler Jensen <kjens93@users.noreply.github.com>",
   "typings": "dist/typescript/index.d.ts",
+  "license": "MIT",
+  "version": "0.0.0",
   "react-native": "src/index.ts",
+  "repository": "https://github.com/Kjens93/react-native-font-faces.git",
+  "description": "Easily emulate @font-face behavior in react-native",
   "files": [
     "src",
     "dist"
   ],
   "scripts": {
     "test": "jest",
     "build": "bob build",
-    "start": "yarn example start",
-    "release": "semantic-release",
-    "example": "cd example && yarn"
+    "release": "semantic-release"
+  },
+  "dependencies": {
+    "react-helmet": "^6.1.0",
+    "redent": "^3.0.0",
+    "ts-dedent": "^1.1.1"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-native": ">=0.60.0"
+    "react": "^16.11.0",
+    "react-native": "~0.60.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^9.1.1",
     "@commitlint/config-conventional": "^9.1.1",
     "@react-native-community/bob": "^0.16.2",
-    "@types/jest": "^26.0.4",
+    "@types/jest": "^26.0.8",
     "@types/react": "^16.9.43",
-    "@types/react-native": "^0.62.0",
+    "@types/react-helmet": "^6.0.0",
+    "@types/react-native": "~0.62.0",
     "babel-jest": "^26.1.0",
+    "babel-plugin-module-resolver": "^4.0.0",
     "husky": "^4.2.5",
     "jest": "^26.1.0",
-    "metro-react-native-babel-preset": "^0.60.0",
+    "metro-react-native-babel-preset": "^0.61.0",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1",
     "semantic-release": "^17.1.1",
-    "typescript": "^3.9.6"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "pretty-quick --staged"
-    }
-  },
-  "dependencies": {}
+    "typescript": "^3.9.7"
+  }
 }