React native Question posted in
The official React Native documentation can be found here.

react native expo font not working properly with nativewind

My concern is with the warning I get every time I run the server

fontFamily "Inter-SemiBold" is not a system font and has not been loaded through expo-font.
fontFamily "Inter-Regular" is not a system font and has not been loaded through expo-font.

app/_layout

import { useFonts } from "expo-font";
import { SplashScreen, Stack } from "expo-router";
import React, { useEffect } from "react";
import { StyleSheet } from "react-native";

import { AuthProvider } from "../context/AuthContext";
import "../global.css";
const RootLayout = () => {
    // const [fontsLoaded, error] = useFonts({
    //     Inter_100Thin,
    //     Inter_400Regular,
    //     Inter_500Medium,
    //     Inter_600SemiBold,
    //     Inter_700Bold,
    //     Inter_900Black,
    // })
    const [fontsLoaded, error] = useFonts({
        "Inter-Black": require("../assets/fonts/Inter_18pt-Black.ttf"),
        "Inter-Bold": require("../assets/fonts/Inter_18pt-Bold.ttf"),
        "Inter-ExtraBold": require("../assets/fonts/Inter_18pt-ExtraBold.ttf"),
        "Inter-Light": require("../assets/fonts/Inter_18pt-Light.ttf"),
        "Inter-Medium": require("../assets/fonts/Inter_18pt-Medium.ttf"),
        "Inter-Regular": require("../assets/fonts/Inter_18pt-Regular.ttf"),
        "Inter-SemiBold": require("../assets/fonts/Inter_18pt-SemiBold.ttf"),
    });

    useEffect(() => {
        if (error) throw error;
        if (fontsLoaded) SplashScreen.hideAsync();
    }, [fontsLoaded, error]);

    if (!fontsLoaded && !error) null;

    return (
        <AuthProvider>
            <Stack>
                {/* <Stack.Screen name="(auth)" options={{ headerShown: false }} /> */}
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                <Stack.Screen name="index" options={{ headerShown: false }} />
                <Stack.Screen name="user/[id]" options={{ headerShown: false }} />
                <Stack.Screen name="announcement/[id]" options={{ headerShown: false }} />
            </Stack>
        </AuthProvider>
    );
};

As you can see, I also tried using @expo-google-fonts/inter but it didn’t work as well

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
    presets: [require("nativewind/preset")],
    theme: {
      extend: {
        fontFamily: {
            // "inter-thin": ['Inter_100Thin'],
            // "inter-regular": ["Inter_400Regular"],
            // "inter-medium": ["Inter_500Medium"],
            // "inter-semibold": ["Inter_600SemiBold"],
            // "inter-bold": ["Inter_700Bold"],
            // "inter-black": ['Inter_900Black'],
            "inter-black": ["Inter-Black"],
            "inter-bold": ["Inter-Bold"],
            "inter-extrabold": ["Inter-ExtraBold"],
            "inter-light": ["Inter-Light"],
            "inter-medium": ["Inter-Medium"],
            "inter-regular": ["Inter-Regular"],
            "inter-semibold": ["Inter-SemiBold"],
        },
      },
    },
    plugins: [],
}

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
        ["babel-preset-expo", { jsxImportSource: "nativewind" }],
        "nativewind/babel",
      ],
  };
};

Why am I getting this warning and how to solve it? Did I do something wrong?

All I tried was loading the fonts locally and using @expo-google-fonts/inter but the warning still appeared

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    looks like I forgot to put a return before null lol

    if (!fontsLoaded && !error) return null;

  2. 0

    To make things easier try

    npm i expo-dynamic-fonts

    https://www.npmjs.com/package/expo-dynamic-fonts

    Using fonts is as simple as passing in a font prop to the text component

    import React from 'react';
import { View } from 'react-native';
import { Text } from 'expo-dynamic-fonts';

const App = () => {
  return (
    <View className="flex-1 justify-center items-center">
      <Text font="Open Sans" className="text-lg">
        Hello, Open Sans!
      </Text>
      <Text font="Roboto" className="text-xl mt-4">
        Hello, Roboto!
      </Text>
    </View>
  );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search