We Keep Coding

Expo, how to update splash screen app.json

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.
Thank you in advance.

Expo - React Native - Metro Config File

I am building an app with React Native and using Expo CLI. I am having a problem with missing assets once the app is built and testing on test flight. I am getting the error below. I have read through the documents on react native and expo and I cannot seem to figure out the problem. Also attached is my app.json and the metro.config.js files.
It looks like that you are using a custom metro.config.js that does not extend #expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.
app.json
{
"expo": {
"name": "Unfiltered",
"slug": "unfiltered-with-kiran",
"version": "1.0.5",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "blahblahblah",
"buildNumber": "1"
},
"android": {
"versionCode": 2,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "blahblahblah"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname);
return {
resolver: {
assetExts: [
...assetExts,
'png',
'jpg',
'jpeg',
'gif',
'svg',
'ttf',
'otf',
'woff',
'woff2',
],
sourceExts: [
...sourceExts,
'cjs',
'jsx',
'ts',
'tsx',
'mjs',
'md',
'mdx',
],
},
};
})();

I finally found the answer, I had to add the transformer and assetPlugins.
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles'],
},

Expo React Native error: Unhandled JS Exception: manifest must specify logUrl

When publishing my app with expo using expo publish or pushing the app to App Store and Play Store, I get a crash on launch of the production app on both iOS and Android plateform with the error :
Unhandled JS Exception: manifest must specify logUrl
As this error doesn't happened on Development app, I don't know how to debug this. Does anyone encounter the same issue ? Do you have any idea on what's going on or do you have any idea on a method to find the error ?
Just for more context, I did publish my app to both stores months ago without any issue. I did not change anything in my manifest except changing the Expo SDK from version 38 to 40. Here is my current manifest :
{
"expo": {
"name": "My App",
"slug": "myApp",
"privacy": "public",
"platforms": ["ios", "android"],
"version": "1.0.2",
"orientation": "portrait",
"backgroundColor": "#ffffff",
"primaryColor": "#7198FF",
"icon": "./assets/android-icon.png",
"splash": {
"image": "./assets/Launch_Screen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": false,
"bundleIdentifier": "com.company.app",
"buildNumber": "1"
},
"android": {
"package": "com.company.app",
"googleServicesFile": "./google-services.json",
"permissions": [
"CAMERA",
"MANAGE_DOCUMENTS",
"READ_CONTACTS",
"READ_CALENDAR",
"WRITE_CALENDAR",
"READ_EXTERNAL_STORAGE",
"READ_PHONE_STATE",
"RECORD_AUDIO",
"USE_FINGERPRINT",
"VIBRATE"
],
"versionCode": 21
},
"androidNavigationBar": {
"visible": "sticky-immersive",
"barStyle": "dark-content",
"backgroundColor": "#FFFFFF"
},
"androidStatusBar": {
"hidden": false,
"translucent": true,
"barStyle": "dark-content",
"backgroundColor": "#FFFFFF"
},
"extra": {
"firebase": {
"apiKey": "FIREBASE_KEY",
"authDomain": "app.firebaseapp.com",
"databaseURL": "https://app.firebaseio.com",
"projectId": "app",
"storageBucket": "app.appspot.com",
"messagingSenderId": "SENDER_ID",
"appId": "1:appID",
"measurementId": "G-ID"
}
},
"web": {
"config": {
"firebase": {
"apiKey": "FIREBASE_KEY",
"authDomain": "app.firebaseapp.com",
"databaseURL": "https://app.firebaseio.com",
"projectId": "app",
"storageBucket": "app.appspot.com",
"messagingSenderId": "MESSEGING_ID",
"appId": "1:APP_ID:web:WEB_ID",
"measurementId": "G-ID"
}
}
},
"hooks": {
"postPublish": [
{
"file": "sentry-expo/upload-sourcemaps",
"config": {
"organization": "app",
"project": "app",
"authToken": "SENTRY_TOKEN"
}
}
]
}
}
}

Seems like the issue was with expo trying to put logs to non-existent route on production.
According to expo docs,
the Expo SDK intercepts calls to console.log, console.warn, etc. and posts them to the logUrl specified in the manifest.
Check if you have Logs.enableExpoCliLogging(); enabled? Or if not, try manually importing logs at entry point
import { Logs } from 'expo';
and manually disabling them
Logs.disableExpoCliLogging();
According to the OP comment, the issue was as i mentioned. This stack helped me tho.

After reading #Oleksii comment about checking if the Expo CLI logging where enabled with Logs.enableExpoCliLogging();, it seems that this was causing the issue.
Just disable those by importing import { Logs } from 'expo'; and then calling Logs.disableExpoCliLogging(); in the app entry point file make it works again in production environment !
Thanks again #Oleksii !

"expo build:..." commands throw same error

The app builds and runs on both android and iOS and I was able to publish my app to expo. But I get the same error message from all expo build:... commands. I want to build an apk, don't really care about the ipa for iOS. The error I get is
Request failed with status code 500
Set EXPO_DEBUG=true in your env to view the stack trace
and here's my app.json
{
"expo": {
"name": "iiApp",
"slug": "expo.io/#mcdowellalex/iiApp",
"privacy": "public",
"sdkVersion": "35.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./content/iiLogo.webp",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.inductiveIntelligence.iiApp"
},
"android": {
"package": "com.inductiveIntelligence.iiApp"
},
"description": ""
}
}

So a strange workaround I found is to open 2 terminals. In the first, run expo start. And once the app is running, run expo build:android in the other terminal.
I don't think that is what is the expected/intended process, but it worked.

How to fix gulp windows script host error in vscode

Gulp watch task runner error. It results in a windows script host error.
I've already tried to change the file task.json:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "scripts",
"isBuildCommand": true,
"showOutput": "always"
},
{
"taskName": "sass",
"isBuildCommand": true,
"showOutput": "always"
},
{
"taskName": "watch",
"isBuildCommand": true,
"showOutput": "always"
}
]
}

It looks like you are using older syntax. I don't believe taskname is supported anymore for example.
Here is a tasks.json file that I use and both methods of calling gulp commands work. (You mentioned task.json, I assume that is a typo, it is tasks.json)
{
"version": "2.0.0",
"tasks": [
{
"label": "Start server and process files",
"command": "gulp",
"args": [
"sync"
],
"type": "shell",
"options": {
"cwd": "${workspaceRoot}"
}
},
{
"label": "Gulp: Start server only",
"type": "gulp",
"task": "serve",
"problemMatcher": []
},
{
"label": "Gulp: watch",
"type": "gulp",
"task": "watch",
"problemMatcher": []
}
}
It looks like you also want:
"group": "build",
in each of your tasks - that replaces the isBuildCommand syntax you used above.
And:
"presentation": {
"reveal": "always",
},
instead of the showoutput syntax.
See migrating to tasks 2.0 documentation.