Question 289268 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I apply the changes made in app.json? update splash screen in my expo app

I am trying to change my default Splash screen in my Expo app with a new one. I am using EAS profile development.

this is my app.json

{
"expo": {
"name": "blue-kiwi",
"slug": "blue-kiwi",
"version": "1.0.1",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "cover",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.basselturky.bluekiwi"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}

I put my new splash.png in the assets folder but it keeps showing the default one.

I tried to rebuild but nothing worked.

I want to be able to change it whenever I want and the splash updates instantly.

Tags:

2

Answers


  1. 0

    In react-native development, there are multiple caches used when the app is built, try resetting these.

    For React Native

    react-native start --reset-cache

    for npm

    npm start -- --reset-cache

    for Expo

    expo start -c
    Login or Signup to reply.
  2. 0

    Certainly! It looks like you’re facing an issue updating the splash screen in your Expo app using EAS development. Here’s a step-by-step guide to help you resolve this:

    1. Ensure Asset Location:

    Make sure that your splash.png file is correctly placed in the assets folder at the root of your project. Confirm that the file name is spelled correctly, including case sensitivity.

    1. Check File Path in app.json:

    In your app.json, the path to the splash image should be relative to the app.json file. Double-check that the path is correct and matches the actual location of your splash.png file.

    "splash": {   "image": "./assets/splash.png",   "resizeMode": "cover", "backgroundColor": "#ffffff" },
    1. Rebuild Your Project:

    After making changes to your app.json, you need to rebuild your project. Run the following command in your terminal:

    expo build:android

    For iOS:

    expo build:ios
    1. Ensure Live Updates are Enabled:

    Confirm that your Expo client is set up to receive live updates. You can check this in your Expo client settings.

    1. Clear Cache:

    Sometimes, cached assets can cause issues. Try clearing the cache by running:

    expo r -c

    This will reset the cache and restart your development server.

    1. EAS Development Build:

    If you’re using EAS for development, make sure you’re running the correct build command for EAS:

    eas build --platform [ios/android]

    This will trigger a new build using the EAS build system.

    1. Update Expo CLI:

    Ensure you’re using the latest version of the Expo CLI by running:

    expo upgrade

    This will update your Expo CLI to the latest version, which might include bug fixes.

    For a more visual guide and additional tips, check out my YouTube video tutorial here. I cover the steps and common pitfalls when updating the splash screen in Expo apps. I hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search