feat: add ability to customize the fonts with the theme (#11243)

**Motivation** React Navigation 5 introduced a theming API. However, the theme only supported customizing colors. With this change, the theme can be used to customize font family as well - making it simpler to use a specific font across all of React Navigation's UI elements. **Test plan** Specify a custom font in the theme and check that React Navigation's UI elements use the new font. The following screenshots show the usage of the "Lato" font. <img width="804" alt="SCR-20230224-qy4" src="https://user-images.githubusercontent.com/1174278/221260433-258083a8-7fba-4d3c-a2ae-da134b0e29f2.png"> <img width="803" alt="SCR-20230224-qyl" src="https://user-images.githubusercontent.com/1174278/221260454-7e57f7b4-415e-47e5-8a53-a85cd51a5821.png"> <img width="806" alt="SCR-20230224-qz6" src="https://user-images.githubusercontent.com/1174278/221260478-d698a060-c835-4527-9fdc-3717ea58907f.png"> <img width="388" alt="SCR-20230224-qzt" src="https://user-images.githubusercontent.com/1174278/221260490-a7e63117-5615-491a-ab0f-1c5f148153fc.png">
react-navigation · Feb 28, 2023 · 1cd6836 · 1cd6836
1 parent ee319bb
commit 1cd6836
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 39 deletions.
diff --git a/packages/bottom-tabs/src/views/Badge.tsx b/packages/bottom-tabs/src/views/Badge.tsx
@@ -32,7 +32,7 @@ export function Badge({
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
   const [rendered, setRendered] = React.useState(visible);
 
-  const theme = useTheme();
+  const { colors, fonts } = useTheme();
 
   React.useEffect(() => {
     if (!rendered) {
@@ -61,7 +61,7 @@ export function Badge({
   }
 
   // @ts-expect-error: backgroundColor definitely exists
-  const { backgroundColor = theme.colors.notification, ...restStyle } =
+  const { backgroundColor = colors.notification, ...restStyle } =
     StyleSheet.flatten(style) || {};
   const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
 
@@ -90,6 +90,7 @@ export function Badge({
           fontSize,
           borderRadius,
         },
+        fonts.regular,
         styles.container,
         restStyle,
       ]}

diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -195,7 +195,7 @@ export function BottomTabItem({
   iconStyle,
   style,
 }: Props) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const activeTintColor =
     customActiveTintColor === undefined
@@ -219,8 +219,9 @@ export function BottomTabItem({
         <Text
           numberOfLines={1}
           style={[
-            styles.label,
             { color },
+            fonts.regular,
+            styles.label,
             horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -159,7 +159,7 @@ const LinkPressable = ({
  * A component used to show an action item with an icon and a label in a navigation drawer.
  */
 export function DrawerItem(props: Props) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const {
     route,
@@ -220,13 +220,7 @@ export function DrawerItem(props: Props) {
               <Text
                 numberOfLines={1}
                 allowFontScaling={allowFontScaling}
-                style={[
-                  {
-                    color,
-                    fontWeight: '500',
-                  },
-                  labelStyle,
-                ]}
+                style={[{ color }, fonts.medium, labelStyle]}
               >
                 {label}
               </Text>

diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -33,7 +33,7 @@ export function HeaderBackButton({
   testID,
   style,
 }: HeaderBackButtonProps) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const [initialLabelWidth, setInitialLabelWidth] = React.useState<
     undefined | number
@@ -106,8 +106,9 @@ export function HeaderBackButton({
             leftLabelText === label ? handleLabelLayout : undefined
           }
           style={[
-            styles.label,
             tintColor ? { color: tintColor } : null,
+            fonts.regular,
+            styles.label,
             labelStyle,
           ]}
           numberOfLines={1}

diff --git a/packages/elements/src/Header/HeaderTitle.tsx b/packages/elements/src/Header/HeaderTitle.tsx
@@ -16,7 +16,7 @@ type Props = Omit<TextProps, 'style'> & {
 };
 
 export function HeaderTitle({ tintColor, style, ...rest }: Props) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   return (
     <Animated.Text
@@ -25,8 +25,9 @@ export function HeaderTitle({ tintColor, style, ...rest }: Props) {
       numberOfLines={1}
       {...rest}
       style={[
-        styles.title,
         { color: tintColor === undefined ? colors.text : tintColor },
+        Platform.select({ ios: fonts.bold, default: fonts.medium }),
+        styles.title,
         style,
       ]}
     />
@@ -37,16 +38,12 @@ const styles = StyleSheet.create({
   title: Platform.select({
     ios: {
       fontSize: 17,
-      fontWeight: '600',
     },
     android: {
       fontSize: 20,
-      fontFamily: 'sans-serif-medium',
-      fontWeight: 'normal',
     },
     default: {
       fontSize: 18,
-      fontWeight: '500',
     },
   }),
 });
diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx
@@ -17,7 +17,7 @@ export function MaterialTopTabBar({
   descriptors,
   ...rest
 }: MaterialTopTabBarProps) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const focusedOptions = descriptors[state.routes[state.index].key].options;
 
@@ -103,7 +103,12 @@ export function MaterialTopTabBar({
         if (typeof label === 'string') {
           return (
             <Text
-              style={[styles.label, { color }, options.tabBarLabelStyle]}
+              style={[
+                { color },
+                fonts.regular,
+                styles.label,
+                options.tabBarLabelStyle,
+              ]}
               allowFontScaling={options.tabBarAllowFontScaling}
             >
               {label}

diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -59,15 +59,22 @@ export function HeaderConfig({
   title,
   canGoBack,
 }: Props): JSX.Element {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
   const tintColor =
     headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
 
   const headerBackTitleStyleFlattened =
-    StyleSheet.flatten(headerBackTitleStyle) || {};
+    StyleSheet.flatten([headerBackTitleStyle, fonts.regular]) || {};
   const headerLargeTitleStyleFlattened =
-    StyleSheet.flatten(headerLargeTitleStyle) || {};
-  const headerTitleStyleFlattened = StyleSheet.flatten(headerTitleStyle) || {};
+    StyleSheet.flatten([
+      headerLargeTitleStyle,
+      Platform.select({ ios: fonts.heavy, default: fonts.medium }),
+    ]) || {};
+  const headerTitleStyleFlattened =
+    StyleSheet.flatten([
+      headerTitleStyle,
+      Platform.select({ ios: fonts.bold, default: fonts.medium }),
+    ]) || {};
   const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
   const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
 
@@ -78,12 +85,33 @@ export function HeaderConfig({
       headerTitleStyleFlattened.fontFamily,
     ]);
 
+  const backTitleFontSize =
+    'fontSize' in headerBackTitleStyleFlattened
+      ? headerBackTitleStyleFlattened.fontSize
+      : undefined;
+
   const titleText = getHeaderTitle({ title, headerTitle }, route.name);
   const titleColor =
-    headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
-  const titleFontSize = headerTitleStyleFlattened.fontSize;
+    'color' in headerTitleStyleFlattened
+      ? headerTitleStyleFlattened.color
+      : headerTintColor ?? colors.text;
+  const titleFontSize =
+    'fontSize' in headerTitleStyleFlattened
+      ? headerTitleStyleFlattened.fontSize
+      : undefined;
   const titleFontWeight = headerTitleStyleFlattened.fontWeight;
 
+  const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
+  const largeTitleColor =
+    'color' in headerLargeTitleStyleFlattened
+      ? headerLargeTitleStyleFlattened.color
+      : undefined;
+  const largeTitleFontSize =
+    'fontSize' in headerLargeTitleStyleFlattened
+      ? headerLargeTitleStyleFlattened.fontSize
+      : undefined;
+  const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
+
   const headerTitleStyleSupported: TextStyle = { color: titleColor };
 
   if (headerTitleStyleFlattened.fontFamily != null) {
@@ -98,6 +126,12 @@ export function HeaderConfig({
     headerTitleStyleSupported.fontWeight = titleFontWeight;
   }
 
+  const headerBackgroundColor =
+    headerStyleFlattened.backgroundColor ??
+    (headerBackground != null || headerTransparent
+      ? 'transparent'
+      : colors.card);
+
   const headerLeftElement = headerLeft?.({
     tintColor,
     canGoBack,
@@ -162,15 +196,10 @@ export function HeaderConfig({
       ) : null}
       <ScreenStackHeaderConfig
         backButtonInCustomView={backButtonInCustomView}
-        backgroundColor={
-          headerStyleFlattened.backgroundColor ??
-          (headerBackground != null || headerTransparent
-            ? 'transparent'
-            : colors.card)
-        }
+        backgroundColor={headerBackgroundColor}
         backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
         backTitleFontFamily={backTitleFontFamily}
-        backTitleFontSize={headerBackTitleStyleFlattened.fontSize}
+        backTitleFontSize={backTitleFontSize}
         blurEffect={headerBlurEffect}
         color={tintColor}
         direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -183,11 +212,11 @@ export function HeaderConfig({
           (headerTransparent && headerShadowVisible !== true)
         }
         largeTitle={headerLargeTitle}
-        largeTitleBackgroundColor={headerLargeStyleFlattened.backgroundColor}
-        largeTitleColor={headerLargeTitleStyleFlattened.color}
+        largeTitleBackgroundColor={largeTitleBackgroundColor}
+        largeTitleColor={largeTitleColor}
         largeTitleFontFamily={largeTitleFontFamily}
-        largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
-        largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
+        largeTitleFontSize={largeTitleFontSize}
+        largeTitleFontWeight={largeTitleFontWeight}
         largeTitleHideShadow={headerLargeTitleShadowVisible === false}
         title={titleText}
         titleColor={titleColor}

diff --git a/packages/native/src/theming/DarkTheme.tsx b/packages/native/src/theming/DarkTheme.tsx
@@ -1,4 +1,5 @@
 import type { Theme } from '../types';
+import { fonts } from './fonts';
 
 export const DarkTheme: Theme = {
   dark: true,
@@ -10,4 +11,5 @@ export const DarkTheme: Theme = {
     border: 'rgb(39, 39, 41)',
     notification: 'rgb(255, 69, 58)',
   },
+  fonts,
 };
diff --git a/packages/native/src/theming/DefaultTheme.tsx b/packages/native/src/theming/DefaultTheme.tsx
@@ -1,4 +1,5 @@
 import type { Theme } from '../types';
+import { fonts } from './fonts';
 
 export const DefaultTheme: Theme = {
   dark: false,
@@ -10,4 +11,5 @@ export const DefaultTheme: Theme = {
     border: 'rgb(216, 216, 216)',
     notification: 'rgb(255, 59, 48)',
   },
+  fonts,
 };
diff --git a/packages/native/src/theming/fonts.tsx b/packages/native/src/theming/fonts.tsx
@@ -0,0 +1,63 @@
+import { Platform } from 'react-native';
+
+import type { Theme } from '../types';
+
+const WEB_FONT_STACK =
+  'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+
+export const fonts = Platform.select({
+  web: {
+    regular: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '500',
+    },
+    bold: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '700',
+    },
+  },
+  ios: {
+    regular: {
+      fontFamily: 'System',
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: 'System',
+      fontWeight: '500',
+    },
+    bold: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'System',
+      fontWeight: '700',
+    },
+  },
+  default: {
+    regular: {
+      fontFamily: 'sans-serif',
+      fontWeight: 'normal',
+    },
+    medium: {
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    bold: {
+      fontFamily: 'sans-serif',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'sans-serif',
+      fontWeight: '700',
+    },
+  },
+} as const satisfies Record<string, Theme['fonts']>);
diff --git a/packages/native/src/types.tsx b/packages/native/src/types.tsx
@@ -6,6 +6,22 @@ import type {
   Route,
 } from '@react-navigation/core';
 
+type FontStyle = {
+  fontFamily: string;
+  fontWeight:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+};
+
 export type Theme = {
   dark: boolean;
   colors: {
@@ -16,6 +32,12 @@ export type Theme = {
     border: string;
     notification: string;
   };
+  fonts: {
+    regular: FontStyle;
+    medium: FontStyle;
+    bold: FontStyle;
+    heavy: FontStyle;
+  };
 };
 
 export type LinkingOptions<ParamList extends {}> = {