I’m currently working on a project using React Native, Expo, expo-google-fonts and TWRNC for styling. Despite setting up custom fonts correctly in the _layout.tsx file at the highest level of my application, I’m experiencing issues with fonts not being applied. It is worth mentioning that all other styles are being applied, only the font that is not being applied. Also, it seems that the tailwind.config.js file is not being recognized by the TWRNC library, because when I try to use any property that I added in the extend key of the theme object, an unknown or incorrect utility class error appears

Here are the steps I’ve followed so far:

1. Added custom fonts to the assets/fonts directory.

2. Configured the _layout.tsx file to load these fonts.

3. Ensured the tailwind.config.js file is set up correctly with the necessary configurations.

Despite these steps, the fonts are not being applied, and TWRNC doesn’t seem to recognize the tailwind.config.js file.

Has anyone faced similar issues or have any suggestions on how to resolve this? Any help would be greatly appreciated!

Thank you in advance!

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "error-color": "#F50A00"
      },
      fontFamily: {
        "openSansRegular": ["OpenSans_400Regular"],
        "openSansMedium": ["OpenSans_500Medium"],
        "openSansSemiBold": ["OpenSans_600SemiBold"],
        "openSansBold": ["OpenSans_700Bold"],
        "openSansExtraBold": ["OpenSans_800ExtraBold"],
      }
    },
  },
  plugins: [],
};

//_layout.tsx global

import { Stack, SplashScreen, Slot } from "expo-router";
import {
  useFonts,
  OpenSans_400Regular,
  OpenSans_500Medium,
  OpenSans_600SemiBold,
  OpenSans_700Bold,
  OpenSans_800ExtraBold,
} from "@expo-google-fonts/open-sans";
import { useEffect } from "react";

SplashScreen.preventAutoHideAsync();

const RootLayout = () => {
  const [fontLoaded, fonError] = useFonts({
    OpenSans_400Regular,
    OpenSans_500Medium,
    OpenSans_600SemiBold,
    OpenSans_700Bold,
    OpenSans_800ExtraBold,
  });

  useEffect(() => {
    if (fontLoaded || fonError) {
      //* Delay de 2s para ocultar a Splash Screen e iniciar a navegação
      setTimeout(async () => {
        await SplashScreen.hideAsync();
      }, 2000);
    }
  }, [fontLoaded, fonError]);

  if (!fontLoaded && !fonError) {
    return null;
  }

  return (
    <>
      {/* <Slot /> */}
      <Stack screenOptions={{ headerShown: false }} />
        {/* <Stack.Screen name="login" />
        <Stack.Screen name="register" />
      </Stack> */}
    </>
  );
};

export default RootLayout

//Component that uses the font

import { StatusBar } from "expo-status-bar"
import { View, Text } from "react-native"
import tw from "twrnc"
import { Footer } from "../../components/Footer"
import { GlobalTextFont } from "../../components/TextGlobalFont"
import { Button } from "react-native"
import { Link } from "expo-router"


const LoginScreen = (): React.JSX.Element => {
  return (
    <>
      <View style={tw `bg-neutral-800 flex-1 items-center justify-center p-3`}>
        <Text style={tw `font-openSansBold text-xl text-neutral-100 text-error-color`}>Tela de login</Text>
        <Text style={tw `text-neutral-100 font-medium text-lg`}>Deus me deu inteligência e usando a fé eu digo que sou capaz porque Deus me faz capaz de renderizar o formulário</Text>
        <StatusBar style="light"/>
      <Link style={tw `text-lg text-neutral-100 mt-2`} href={"/register"}>Ir para cadastro</Link>
      </View>
      <Footer />
    </>
      
  )
}

export default LoginScreen

Here are the steps I’ve followed so far:

1. Added custom fonts to the assets/fonts directory.

2. Configured the _layout.tsx file to load these fonts.

3. Ensured the tailwind.config.js file is set up correctly with the necessary configurations.