How to use font family in react native expo with Nativewind

This posts showcase how to setup any font family in your react-native (Expo) projects and then subsequently use it with nativewind

1: First you have to add the npm package of that particular font family using your terminal

npm i @expo-google-fonts/poppins

After it, Run the expo command in your terminal.

 npx expo install expo-font

Here after the installation of packages you will need to update tailwind.config.js with font sizes you want you can from light to bold as per need of your project.

theme: {
    extend: {
      fontFamily: {
        "poppins-light": ["Poppins-Light"],
        "poppins-regular": ["Poppins-Regular"],
        "poppins-medium": ["Poppins-Medium"],
        "poppins-semibold": ["Poppins-SemiBold"],
        "poppins-bold": ["Poppins-Bold"],
      },
    },
  },

after it the final steps involve to load all the names of fonts you used in your tailwind.config in your main file _layout.tsx (if you're not using expo router then add these in your App.ts)

import {
  Poppins_300Light,
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_600SemiBold,
  Poppins_700Bold,
  useFonts,
} from "@expo-google-fonts/poppins";

then import in your main file _layout.tsx****;

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Medium": Poppins_500Medium,
    "Poppins-SemiBold": Poppins_600SemiBold,
    "Poppins-Bold": Poppins_700Bold,
  });

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

  if (!fontsLoaded) {
    return null;
  }

  return <RootLayoutNav />;
}

that will be look this and now you are ready to used in your project

The Result :

<Text className="text-primary  font-poppins-light"> Poppins Light is used here.  </Text>
<Text className="text-primary font-poppins-regular"> Poppins Regular is used here. </Text>
<Text className="text-primary font-poppins-bold"> Poppins Bold is used here. </Text>