feat: added enableFontFaces and removed FontFacesProvider

BREAKING CHANGE: `FontFacesProvider` was removed in favor of `enableFontFaces`

Closes #47

README.md

@@ -37,59 +37,39 @@ This library aims to make life easier by allowing React Native developers to use
    If you are using Expo and need to load additional custom font files into your app, also add the following:
 
    ```shell
-   yarn add expo-font react-helmet
-   yarn add -D @types/react-helmet
+   yarn add expo-font
    ```
 
-2. Wrap your application's root component in a `<FontFacesProvider />`, provide a `FontLoader`, and import the desired font faces:
+2. Wrap your application's root component in a `<FontFacesProvider />`, provide a `FontLoader`, and import the desired font faces. Then just use the font family as you would normally expect:
 
    ```jsx
    // App.tsx
 
    import React from 'react';
-   import * as Font from 'expo-font';
+   import { useFonts } from 'expo-font';
+   import { AppLoading } from 'expo';
    import { AppContent } from './AppContent';
-   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
-         onError={setError}
-         onLoading={setLoading}
-         fontFaces={Roboto_All}
-         nativeFontLoader={Font.loadAsync}>
-         <AppContent loading={loaading} error={error} />
-       </FontFacesProvider>
-     );
-   }
-   ```
-
-3. Just use the font family as you would normally expect:
+   import { Roboto_All, enableFontFaces, getRemoteFontUrls } from 'react-native-font-faces';
 
-   ```jsx
-   // AppContent.tsx
+   const fonts = enableFontFaces(Roboto_All).expo;
 
-   import React from 'react';
-   import { AppLoading } from 'expo';
+   export default function App() {
+     const [loaded, error] = useFonts(fonts);
 
-   export function AppContent(props: any) {}
-     if (props.loading) {
+     if (!loaded) {
        return <AppLoading />;
-     } else if (props.error) {
-       return <Text>{props.error.message}</Text>
+     } else if (error) {
+       return <Text>{error.message}</Text>;
      } else {
        return (
          <View style={styles.container}>
+           <StatusBar style="auto" />
            <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>
            <Text style={[styles.text, styles.bold, styles.italic]}>This should be BoldItalic</Text>
            <Text style={[styles.text, styles.thin]}>This should be Thin</Text>
            <Text style={[styles.text, styles.thin, styles.italic]}>This should be ThinItalic</Text>
-           <StatusBar style="auto" />
          </View>
        );
      }
@@ -117,6 +97,14 @@ This library aims to make life easier by allowing React Native developers to use
    });
    ```
 
+## Migrating from 3.x
+
+In version 4.x, we removed `FontFacesProvider` and added `enableFontFaces`. Follow these steps to migrate:
+
+1. Remove all instances of `<FontFacesProvider />`.
+2. Add a call to `enableFontFaces()` in your application's entrypoint.
+3. (Optional) Add a call to `useFonts()` (expo-font) or `loadFonts()` (react-native-dynamic-fonts) to dynamically load remote fonts.
+
 ## Migrating from 2.x
 
 In version 3.x, we simplified `FontFacesProvider` and removed `useFontFaces`. Follow these steps to migrate:

example/App.tsx

@@ -1,43 +1,32 @@
 import React from 'react';
-import * as Font from 'expo-font';
+import { useFonts } from 'expo-font';
 import { AppLoading } from 'expo';
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
-import { FontFacesProvider, Roboto_All } from 'react-native-font-faces';
+import { Roboto_All, enableFontFaces } from 'react-native-font-faces';
 
-const AppContent = (props: any) => {
-  if (props.loading) {
+const fonts = enableFontFaces(Roboto_All).expo;
+
+export default function App() {
+  const [loaded, error] = useFonts(fonts);
+
+  if (!loaded) {
     return <AppLoading />;
-  } else if (props.error) {
-    return <Text>{props.error.message}</Text>;
+  } else if (error) {
+    return <Text>{error.message}</Text>;
   } else {
     return (
       <View style={styles.container}>
+        <StatusBar style="auto" />
         <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>
         <Text style={[styles.text, styles.bold, styles.italic]}>This should be BoldItalic</Text>
         <Text style={[styles.text, styles.thin]}>This should be Thin</Text>
         <Text style={[styles.text, styles.thin, styles.italic]}>This should be ThinItalic</Text>
-        <StatusBar style="auto" />
       </View>
     );
   }
-};
-
-export default function App() {
-  const [error, setError] = React.useState<Error>();
-  const [loading, setLoading] = React.useState<boolean>(true);
-
-  return (
-    <FontFacesProvider
-      onError={setError}
-      onLoading={setLoading}
-      fontFaces={Roboto_All}
-      nativeFontLoader={Font.loadAsync}>
-      <AppContent {...{ loading, error }} />
-    </FontFacesProvider>
-  );
 }
 
 const styles = StyleSheet.create({

package.json

@@ -19,7 +19,6 @@
     "release": "semantic-release"
   },
   "dependencies": {
-    "react-helmet": "^6.1.0",
     "redent": "^3.0.0",
     "ts-dedent": "^1.1.1"
   },
@@ -36,7 +35,6 @@
     "@react-native-community/bob": "^0.16.2",
     "@types/jest": "^26.0.8",
     "@types/react": "^16.9.43",
-    "@types/react-helmet": "^6.0.0",
     "@types/react-native": "~0.62.0",
     "babel-jest": "^26.1.0",
     "babel-plugin-module-resolver": "^4.0.0",

src/index.ts

@@ -6,4 +6,4 @@ export * from './types/FontWeight';
 
 export * from './samples/Roboto';
 
-export * from './contexts/FontFacesProvider';
+export * from './utilities/enableFontFaces';

src/types/DynamicFontList.ts

@@ -0,0 +1,3 @@
+import { DynamicFontListEntry } from './DynamicFontListEntry';
+
+export type DynamicFontList = DynamicFontListEntry[];

src/types/DynamicFontListEntry.ts

@@ -0,0 +1,5 @@
+export type DynamicFontListEntry = {
+  name: string;
+  data: string;
+  type?: 'ttf' | 'otf';
+};

src/types/ExpoFontMap.ts

@@ -0,0 +1,3 @@
+import { ExpoFontMapEntry } from './ExpoFontMapEntry';
+
+export type ExpoFontMap = { [key: string]: ExpoFontMapEntry };

src/types/ExpoFontMapEntry.ts

@@ -0,0 +1 @@
+export type ExpoFontMapEntry = string | number | { uri: string | number };

src/utilities/enableFontFaces.tsx

@@ -0,0 +1,16 @@
+import { FontFace } from '../types/FontFace';
+import { getExpoFontMap } from './getExpoFontMap';
+import { overrideTextRenderFn } from './overrideTextRenderFn';
+import { registerGlobalFontFaces } from './registerGlobalFontFaces';
+import { overrideTextInputRenderFn } from './overrideTextInputRenderFn';
+import { getDynamicFontList } from './getDynamicFontList';
+
+export function enableFontFaces(fontFaces: FontFace[]) {
+  overrideTextRenderFn();
+  overrideTextInputRenderFn();
+  registerGlobalFontFaces(fontFaces);
+  return {
+    expo: getExpoFontMap(fontFaces),
+    rndf: getDynamicFontList(fontFaces),
+  };
+}

src/utilities/enableFontFaces.web.tsx

@@ -0,0 +1,9 @@
+import { FontFace } from '../types/FontFace';
+import { generateInlineStyleSheet } from './generateInlineStyleSheet';
+
+export function enableFontFaces(fontFaces: FontFace[]): Record<string, string> {
+  const style = document.createElement('style');
+  style.innerHTML = generateInlineStyleSheet(fontFaces);
+  document.head.append(style);
+  return {};
+}

src/utilities/generateInlineStyle.spec.ts

@@ -8,7 +8,7 @@ describe('generateInlineStyle', () => {
         font-family: 'Roboto';
         font-style: normal;
         font-weight: 400;
-        font-display: swap;
+        font-display: auto;
         src: local('Roboto'), local('Roboto-Regular'), url(https://ff.static.1001fonts.net/r/o/roboto.regular.ttf) format('truetype');
       }"
     `);

src/utilities/generateInlineStyle.ts

@@ -1,22 +1,22 @@
 import dedent from 'ts-dedent';
 import { FontFace } from '../types/FontFace';
-import { extractRemoteFontUrl } from './extractRemoteFontUrl';
-import { extractLocalFontName } from './extractLocalFontName';
+import { getExpoFontMapEntry } from './getExpoFontMapEntry';
+import { getLocalFontName } from './getLocalFontName';
 
 export function generateInlineStyle(fontFace: FontFace) {
   return dedent`
     @font-face {
       font-family: '${fontFace.fontFamily}';
       font-style: ${fontFace.fontStyle};
       font-weight: ${fontFace.fontWeight};
-      font-display: swap;
+      font-display: auto;
       src: ${extractSourceString(fontFace)};
     }`;
 }
 
 function extractSourceString(fontFace: FontFace) {
-  const fontName = extractLocalFontName(fontFace);
-  const remoteUrl = extractRemoteFontUrl(fontFace);
+  const fontName = getLocalFontName(fontFace);
+  const remoteUrl = getExpoFontMapEntry(fontFace);
   if (remoteUrl) {
     return `local('${fontFace.fontFamily}'), local('${fontName}'), url(${remoteUrl.url}) format('${remoteUrl.format}')`;
   } else {