FEAT: changes to fonts

Author: Censkh

.eslintrc

@@ -17,7 +17,7 @@
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-empty-function": 0,
     "@typescript-eslint/ban-types": 0,
-    "@typescript-eslint/ban-ts-comment": 1
+    "@typescript-eslint/ban-ts-comment": 0
   },
   "settings": {
     "react": {

CHANGELOG.md

@@ -2,8 +2,18 @@
 
 ## 0.6.0
 
+### Breaking
+
+- `FontFamily` is now `FontFace`
+- `createFontFamily` is now `createFontFace`
+
+### Changes
+
 - change `useTheming` hook, now gives theme values based on a supplied schema
 - use `String.replace` instead of `String.replaceAll` for node 14 support
+- fonts now require you to explicitly set a backend on native environments
+  - `ExpoFontBackend` for `expo`
+  - `WebFontBackend` for web
 
 ## 0.5.11
 

example/App.tsx

@@ -1,6 +1,7 @@
-import React, {useState}                                                   from "react";
-import {media, StyledText, ThemeFor, important, ThemeProvider, useComposedValues, vw} from "style-composer";
-import {CheckBox, ScrollView}                                              from "react-native";
+import React, {useState}                                                              from "react";
+import {important, media, StyledText, ThemeFor, ThemeProvider, useComposedValues, vw, ExpoFontBackend, setFontBackendForNative} from "style-composer";
+import {CheckBox, ScrollView}                                                         from "react-native";
+import * as Fonts from "expo-font";
 
 import Card                        from "./src/components/Card/Card";
 import {$Card, $ChildSelectorTest} from "./src/components/Card/Card.style";
@@ -9,15 +10,16 @@ import Text                        from "./src/components/Text/Text";
 import Button                      from "./src/components/Button/Button";
 import {$BigMargin}                from "./src/components/Button/Button.style";
 import {THEMING}                   from "./src/ThemeConsts";
-import {$Heading}                  from "./src/components/Text/Text.style";
+import {$Heading}                        from "./src/components/Text/Text.style";
+
+setFontBackendForNative(() => new ExpoFontBackend(Fonts));
 
 const LIGHT_THEME: ThemeFor<typeof THEMING> = {};
 const DARK_THEME: ThemeFor<typeof THEMING>  = {
   textColor      : "rgba(255,255,255,0.98)",
   backgroundColor: "#333",
 };
 
-
 interface AppInternalProps {
   onProfilePress: () => void;
 }

example/assets/fonts/raleway/index.ts

@@ -1,6 +1,6 @@
-import {createFontFamily} from "style-composer";
+import {createFontFace}   from "style-composer";
 
-const raleway = createFontFamily("raleway", {
+const raleway = createFontFace("raleway", {
   black           : require("./Raleway-Black.ttf"),
   blackItalic     : require("./Raleway-BlackItalic.ttf"),
   bold            : require("./Raleway-Bold.ttf"),
@@ -21,4 +21,4 @@ const raleway = createFontFamily("raleway", {
   thinItalic      : require("./Raleway-ThinItalic.ttf"),
 });
 
-export default raleway;
+export default raleway;

example/metro.config.js

@@ -0,0 +1,13 @@
+const path = require("path");
+const {
+        applyConfigForLinkedDependencies,
+      } = require("@carimus/metro-symlinked-deps");
+
+module.exports = applyConfigForLinkedDependencies(
+  {},
+  {
+    projectRoot           : __dirname,
+    resolveNodeModulesAtRoot : true,
+    additionalWatchFolders: [path.resolve(__dirname, "node_modules/style-composer")]
+  },
+);