Configuring Expo Font for NativeWind

Configuring Expo Font for NativeWind cover

When building a React Native application using Expo and NativeWind, custom fonts can significantly enhance the visual appeal of your app. In this guide, we'll walk through the process of configuring the Rubik font family using the expo-font package and integrating it into your NativeWind setup. We'll also cover how to load the fonts in your _layout.tsx file.

Prerequisites

Before we begin, ensure you have the following set up:

  1. Expo Project: A React Native project initialized with Expo.
  2. NativeWind: Installed and configured in your project.
  3. Rubik Font Files: Downloaded and placed in the /assets/fonts folder.

Step 1: Install expo-font

First, install the expo-font package if you haven't already:

npx expo install expo-font

This package allows you to load custom fonts in your Expo project.

Step 2: Add Rubik Font Files

Place your Rubik font files in the /assets/fonts directory. Your folder structure should look like this:

/assets
  /fonts
    Rubik-Bold.ttf
    Rubik-ExtraBold.ttf
    Rubik-Light.ttf
    Rubik-Medium.ttf
    Rubik-Regular.ttf
    Rubik-SemiBold.ttf

Step 3: Configure NativeWind Font Family

In your tailwind.config.js file, configure the fontFamily property to use the Rubik font family. This allows you to use Tailwind's utility classes for font styling.

module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Rubik-Regular', 'sans-serif'],
        light: ['Rubik-Light', 'sans-serif'],
        medium: ['Rubik-Medium', 'sans-serif'],
        bold: ['Rubik-Bold', 'sans-serif'],
        extrabold: ['Rubik-ExtraBold', 'sans-serif'],
        semibold: ['Rubik-SemiBold', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

This configuration maps the Rubik font variants to Tailwind's font family utilities.

Step 4: Load Fonts in _layout.tsx

In your _layout.tsx file, use the useFonts hook from expo-font to load the Rubik fonts. This ensures the fonts are available before rendering the app.

Here’s how your _layout.tsx file should look:

import { SplashScreen, Stack } from 'expo-router';
import '../global.css';
import { useFonts } from 'expo-font';
import { useEffect } from 'react';

export default function RootLayout() {
  // Load the Rubik font files
  const [fontsLoaded] = useFonts({
    'Rubik-Bold': require('../assets/fonts/Rubik-Bold.ttf'),
    'Rubik-ExtraBold': require('../assets/fonts/Rubik-ExtraBold.ttf'),
    'Rubik-Light': require('../assets/fonts/Rubik-Light.ttf'),
    'Rubik-Medium': require('../assets/fonts/Rubik-Medium.ttf'),
    'Rubik-Regular': require('../assets/fonts/Rubik-Regular.ttf'),
    'Rubik-SemiBold': require('../assets/fonts/Rubik-SemiBold.ttf'),
  });

  // Hide the splash screen once fonts are loaded
  useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  // Return null if fonts are not loaded yet
  if (!fontsLoaded) {
    return null;
  }

  // Render the app with the Stack navigator
  return <Stack screenOptions={{ headerShown: false }} />;
}

Explanation:

  1. useFonts Hook: Loads the Rubik font files from the /assets/fonts directory.
  2. useEffect Hook: Hides the splash screen once the fonts are loaded.
  3. Conditional Rendering: Returns null if the fonts are not yet loaded, ensuring the app doesn't render prematurely.

Step 5: Use the Fonts in Your Components

With the fonts loaded and configured, you can now use them in your components using NativeWind's utility classes. For example:

import { Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View className="flex-1 justify-center items-center bg-white">
      <Text className="font-sans text-lg">This is Rubik Regular</Text>
      <Text className="font-bold text-lg">This is Rubik Bold</Text>
      <Text className="font-light text-lg">This is Rubik Light</Text>
    </View>
  );
}

Conclusion

By following these steps, you’ve successfully configured the Rubik font family in your Expo project using expo-font and integrated it with NativeWind. This setup allows you to use custom fonts seamlessly across your app, enhancing its design and user experience.

Happy coding! 🚀

Recent Guides

Hestia Kit Premium

You have to be signed in to favorite this

Share

Hestia Kit Premium

This is Hestia Kit premium component