CODEWITHSUNDEEP
javascriptandroidreact-nativeexpomobile-application
Kathirvel Rajmohan
Kathirvel Rajmohan

Reputation: 11

The splash is screen a icon image, not the splash screen image in React Native

Here is my app.json code

{
  "expo": {
    "name": "MyApp",
    "slug": "MyApp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/coffee-splash.png",
        "backgroundColor": "#000000"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
      {
        "image": "./assets/images/coffee-splash.png",
        "resizeMode": "contain",
        "backgroundColor": "#000000"
      }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

The image used in {"icon": "./assets/images/icon.png"} only shown in splash or loading screen. I want to show the flash screen image - that is - {"image": "./assets/images/coffee-splash.png"}

Paths are correct, But the icon images is only shown.

Upvotes: 1

Views: 42

Answers (1)

nazmul
nazmul

Reputation: 435

You can customise your expo apps splash screen like following ,

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain", // Options: "contain", "cover", "native"
      "backgroundColor": "#ffffff" // Set the background color
    }
  }
}

Upvotes: 0

Related Questions