How to setup splash screen in react native expo

Abdullah Nasir — Wed, 22 Oct 2025 10:57:44 +0000

This post demonstrate that how you can configure splash screen and app icon in your react native expo project.

First you have to install the package of splash screen in your app

npx expo install expo-splash-screen

After it you have to go the official Figma template of the expo, Where you be able to make your own icon and splash screen for your app, After the customization export your icons from there and get it in you project then use it your icon section and splash icon

Here this is the official link of that template : Figma template.

And it will get you into this page where you be able to customize splash screen and App icon as per your choice

Then you have to setup your app.json file and its should be look like this because from above version of expo 52 your splash screen configuration should look like this.

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#232323",
          "image": "./assets/splash-icon.png",
          "dark": {
            "image": "./assets/splash-icon-dark.png",
            "backgroundColor": "#000000"
          },
          "imageWidth": 200
        }
      ]
    ],
  }
}

And here you can add your splash-icons you want .

Note:

If you try to see splash screen in your Expo Go app so it will not appear but the change in your **icon **should appear

app.json

"version": "1.0.0",
    "orientation": "portrait",


> "icon": "./assets/images/splash-icons/splash-icon-with-bg.png",
    "scheme": "guftaar",
    "userInterfaceStyle": "automatic",

If you want to see splash screen so you have to make Apk file for android and iPA for Apple
Moreover you can also add variations in your splash screen like animation and can control the time of it appearance

_layou-jsx

SplashScreen.setOptions({
    duration: 1000,
    fade: true,
  });

And at the end your result will look like this in your stimulator and Expo app

How to use font family in react native expo with Nativewind

Abdullah Nasir — Mon, 20 Oct 2025 14:06:44 +0000

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>

DEV Community: Abdullah Nasir

How to setup splash screen in react native expo

Note:

How to use font family in react native expo with Nativewind