feat: add support for fontStyle (callstack#3778)

Co-authored-by: Tomasz Janiczek <[email protected]>
Brion-bitzen · Mar 27, 2023 · 084c619 · 084c619
1 parent d353ee4
commit 084c619
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/docs/docs/guides/04-fonts.md b/docs/docs/guides/04-fonts.md
@@ -502,3 +502,26 @@ export default function Main() {
   );
 }
 ```
+
+
+## Variable fonts
+
+Although React Native Paper supports `fontWeight` and `fontStyle` properties, there are multiple limitations to custom 
+fonts in React Native. Using custom [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts) 
+is especially problematic, with some platforms failing to render variants entirely. To ensure correct typography in your
+app, we suggest installing each font variant as a separate file. Below you'll find example on how to set up React Native Paper 
+theme with custom fonts. 
+
+Should you decide to use a variable font anyway, second example will show you how to test if the font is rendered correctly in React Native on all platforms.
+ 
+<details>
+  <summary>Variable fonts examples</summary>
+  <ul>
+    <li>
+      <a href="https://snack.expo.dev/@react-native-paper/font-styles-variants">How to apply custom fonts with variants</a>
+    </li>
+    <li>
+      <a href="https://snack.expo.dev/@react-native-paper/typography-tester">How to test variable fonts in React Native</a>
+    </li>
+  </ul>
+</details>
diff --git a/src/styles/__tests__/fonts.test.js b/src/styles/__tests__/fonts.test.js
@@ -207,10 +207,14 @@ describe('configureFonts', () => {
           bodyLarge: {
             fontFamily: 'NotoSans',
             fontSize: 18,
+            fontStyle: 'italic',
           },
           headlineMedium: {
             fontSize: 30,
           },
+          bodySmall: {
+            fontStyle: 'italic',
+          },
         },
       })
     ).toEqual({
@@ -219,6 +223,7 @@ describe('configureFonts', () => {
         fontFamily: 'NotoSans',
         letterSpacing: 0.15,
         fontWeight: '400',
+        fontStyle: 'italic',
         lineHeight: 24,
         fontSize: 18,
       },
@@ -229,6 +234,14 @@ describe('configureFonts', () => {
         lineHeight: 36,
         fontSize: 30,
       },
+      bodySmall: {
+        fontFamily: 'System',
+        fontWeight: '400',
+        fontStyle: 'italic',
+        letterSpacing: 0.4,
+        lineHeight: 16,
+        fontSize: 12,
+      },
     });
   });
 
@@ -240,6 +253,7 @@ describe('configureFonts', () => {
             fontFamily: 'NotoSans',
             letterSpacing: 0,
             fontWeight: '400',
+            fontStyle: 'italic',
             lineHeight: 64,
             fontSize: 57,
           },
@@ -251,6 +265,7 @@ describe('configureFonts', () => {
         fontFamily: 'NotoSans',
         letterSpacing: 0,
         fontWeight: '400',
+        fontStyle: 'italic',
         lineHeight: 64,
         fontSize: 57,
       },

diff --git a/src/types.tsx b/src/types.tsx
@@ -16,6 +16,7 @@ export type Font = {
     | '700'
     | '800'
     | '900';
+  fontStyle?: 'normal' | 'italic' | undefined;
 };
 
 export type Fonts = {
@@ -169,6 +170,7 @@ export type MD3Type = {
   fontWeight: Font['fontWeight'];
   lineHeight: number;
   fontSize: number;
+  fontStyle?: Font['fontStyle'];
 };
 
 export type MD3Typescale =