react native expo шрифт не работает должным образом с nativewind

Содержание

Вопрос или проблема
Ответ или решение
Проблема с загрузкой шрифтов в React Native Expo с использованием NativeWind
Введение
Описание проблемы
Причины возникновения предупреждений
Решения
Заключение

Вопрос или проблема

Меня беспокоит предупреждение, которое я получаю каждый раз, когда запускаю сервер

fontFamily "Inter-SemiBold" не является системным шрифтом и не был загружен через expo-font.
fontFamily "Inter-Regular" не является системным шрифтом и не был загружен через 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>
    );
};

Как видите, я также пробовал использовать @expo-google-fonts/inter, но это тоже не сработало

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",
      ],
  };
};

Почему я получаю это предупреждение и как его решить? Я сделал что-то не так?

Все, что я пробовал, это загрузка шрифтов локально и использование @expo-google-fonts/inter, но предупреждение все равно появлялось

Ответ или решение

Проблема с загрузкой шрифтов в React Native Expo с использованием NativeWind

Введение

В процессе разработки мобильных приложений с использованием React Native и Expo, часто возникают проблемы с загрузкой шрифтов. Одной из таких распространённых проблем является предупреждение о том, что заданный шрифт не является системным и не был загружен через expo-font. В данном ответе мы рассмотрим эту проблему и предложим решения.

Описание проблемы

Вы наблюдаете следующие предупреждения:

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.

Это говорит о том, что указанные вами шрифты не были корректно загружены во время инициализации вашего приложения. Вы используете библиотеку expo-font для загрузки шрифтов и признали это в коде вашего RootLayout.

Причины возникновения предупреждений

Ошибки в путях к файлам шрифтов. Убедитесь, что пути к вашим шрифтам корректны и файлы действительно находятся в указанной директории.
Формат шрифтов. Убедитесь, что используемые вами шрифты находятся в правильном формате (например, .ttf или .otf) и совместимы с Expo.
Отсутствие загрузки шрифтов. Если шрифты не загружаются корректно, приложение будет использовать системные шрифты, что приведет к указанным предупреждениям.
Проблемы с конфигурацией NativeWind. Конфигурация tailwind.config.js, возможно, неправильно использует названия шрифтов.

Решения

Проверьте пути к шрифтам. Убедитесь, что вы используете правильные пути к файлам шрифтов:

const [fontsLoaded, error] = useFonts({
   "Inter-Black": require("../assets/fonts/Inter_18pt-Black.ttf"),
   "Inter-Bold": require("../assets/fonts/Inter_18pt-Bold.ttf"),
   // ...
});

Асинхронная загрузка шрифтов. Обратите внимание на то, как вы обрабатываете асинхронную загрузку шрифтов. Удостоверьтесь, что проверка fontsLoaded происходит до рендеринга компонентов, что поможет избежать временной передачи неинициализированного состояния:
```
if (!fontsLoaded) {
   return null; // или компонент загрузки
}
```
Настройте NativeWind. В вашем tailwind.config.js правильно укажите шрифты. Вместо использования описаний типа Inter_400Regular, используйте уже загруженные шрифты:
```
theme: {
   extend: {
       fontFamily: {
           "inter-black": ["Inter-Black"],
           "inter-bold": ["Inter-Bold"],
           // ...
       },
   },
},
```
Планируйте использование @expo-google-fonts/inter. Если вы хотите использовать @expo-google-fonts/inter, убедитесь, что шрифты загружаются именно через эту библиотеку и правильно указываются в качестве fontFamily:
```
import { Inter_400Regular, useFonts } from '@expo-google-fonts/inter';
```

Заключение

Проблемы с загрузкой шрифтов в React Native Expo с использованием NativeWind могут быть вызваны множеством факторов, включая неправильные пути, формат шрифтов и конфигурацию. Выполняя указанные выше рекомендации, вы сможете устранить предупреждения и гарантировать корректную работу шрифтов в вашем приложении. Следите за тем, чтобы все компоненты правильно обрабатывали состояния загрузки, и убедитесь, что ваша конфигурация Tailwind соответствует фактическим названиям шрифтов.