Expo app icon instead of my app icon - react native - javascript

SDK Version: 41.0.0
Platforms(Android/iOS/web/all): android
Add the appropriate “Tag” based on what Expo library you have a question on.
Hi Guys,
I’m trying to build a standalone app (android) with expo but I get an apk with the expo icon instead of my specified icon.
im using react native and proplem in android ,i didnt setup ios, work in vscode i dont work with android studio i don't have gradle
here’s my app.json
{
"expo": {
"name": "جونت",
"description": "a platform where those who drive and deliver can connect with riders",
"slug": "jaunt",
"privacy": "public",
"platforms": [
"ios",
"android"
],
"notification": {
"icon": "./assets/images/logo96x96.png"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/logo1024x1024.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"packagerOpts": {
"config": "metro.config.js"
},
"ios": {
"supportsTablet": true,
"usesAppleSignIn": true,
"bundleIdentifier": "com.binsaleh.jaunt",
"infoPlist": {
"NSLocationAlwaysUsageDescription": "يستخدم هذا التطبيق إمكانية الوصول دائمًا إلى الموقع في الخلفية لتحسين عمليات الالتقاط والإنزال ودعم العملاء وغرض السلامة.",
"NSLocationAlwaysAndWhenInUseUsageDescription": "يستخدم هذا التطبيق إمكانية الوصول دائمًا إلى الموقع في الخلفية لتحسين عمليات الالتقاط والإنزال ودعم العملاء وغرض السلامة.",
"NSLocationWhenInUseUsageDescription": "يستخدم هذا التطبيق الموقع للعثور على سيارات الأجرة القريبة منك.",
"NSCameraUsageDescription": "يستخدم هذا التطبيق الكاميرا لالتقاط صورة ملفك الشخصي.",
"NSPhotoLibraryUsageDescription": "يستخدم هذا التطبيق مكتبة الصور لتحميل صورة ملفك الشخصي.",
"NSUserTrackingUsageDescription": "سيتتبع هذا التطبيق موقعك بشكل مستمر وفي الخلفية. سيتم استخدام هذه البيانات لإظهار موضع سيارتك للعميل في الوقت الفعلي ، مما سيساعد في تحسين عمليات الالتقاط والإنزال ، وكذلك زيادة السرعة والأمان في العملية.",
"ITSAppUsesNonExemptEncryption":false,
"UIBackgroundModes": [
"audio",
"location",
"fetch"
]
},
"config": {
"googleMapsApiKey": "AIzaSyCokG9nDL49x3u-JWWL4YE5ngqz34fHPW0"
},
"googleServicesFile": "./GoogleService-Info.plist",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.binsaleh.jaunt",
"versionCode": 1,
"permissions": [
"CAMERA",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"ACCESS_FINE_LOCATION",
"ACCESS_COARSE_LOCATION",
"CAMERA_ROLL",
"FOREGROUND_SERVICE",
"ACCESS_BACKGROUND_LOCATION"
],
"googleServicesFile": "./google-services.json",
"config": {
"googleMaps": {
"apiKey": "AIzaSyCokG9nDL49x3u-JWWL4YE5ngqz34fHPW0"
}
},
"useNextNotificationsApi": true
},
"facebookScheme": "fb245228120355609",
"facebookAppId": "245228120355609",
"facebookDisplayName": "jaunt"
}
}

UPDATE: The solution below applies for bare workflow
It seems like Expo does not update the Android build after changes in app.json. I have to do this to update the app with my own icons:
Delete ./android (the Android build directory autogenerated by Expo)
run expo run:android again
Now the correct Android app icons an splash image should appear.
For any changes to icons or background color you have to run the steps through again.
It's a little bit frustrating that the Expo app icon guide does not mention that their guide does not work for bare workflows. I tried around a bit of time by changing paths, changing image sizes, delete and re-install the node_modules,...

Related

How to properly delay the loading of a Node/Express API using tasks.json in VS Code

I've got a microservices project which I debug in a single VS Code instance. I use Compounds in launch.json to launch/debug.
There's a "Metadata" service which all other services are dependent on, so it needs to be running before any others start up.
I had this solved and it has worked swimmingly for me, for the last 10 months, but it spontaneously broke, recently.
Here's what I've got.
launch.json:
Compound:
{
"name": "API-only",
"stopAll": true,
"configurations": [
"Metadata API",
"Auth API"
]
}
...and the individual API configs in the compound:
{
"type": "node",
"request": "launch",
"name": "Metadata API",
"program": "${workspaceFolder}/metadata-api/bin/www",
"envFile": "${workspaceFolder}/metadata-api/.env",
"skipFiles": [
"<node_internals>/**/*.js",
"${workspaceRoot}/node_modules/**/*.js"
],
"presentation": {
"hidden": false,
"group": "apis",
"order": 1
}
},
{
"type": "node",
"request": "launch",
"name": "Auth API",
"program": "${workspaceFolder}/auth-api/bin/www",
"envFile": "${workspaceFolder}/auth-api/.env",
"skipFiles": [
"<node_internals>/**/*.js",
"${workspaceRoot}/node_modules/**/*.js"
],
"preLaunchTask": "Preload Delay",
"presentation": {
"hidden": true,
"group": "",
"order": 1
}
}
You can see the "preLaunchTask" is set in Auth API but not Metadata API. Here's that:
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "Preload Delay",
"type": "shell",
"command": "sleep 3",
"windows": {
"command": "ping 127.0.0.1 -n 3 > nul"
},
"group": "none",
"presentation": {
"reveal": "silent",
"panel": "shared",
"revealProblems": "onProblem"
}
}
]
}
I used to be able to watch Metadata load first, then Auth after 3 seconds, in the VSC Call Stack panel. Now, they both show up immediately and often, Auth fails because it's no longer respecting the delay to wait for Metadata to load first, so it can make calls to it and load, itself.
Sure enough, if I manually start Metadata first, or manually pause Auth to wait for Metadata to load, it works every time.
None of this configuration has changed in over 10 months now, so I suspect a recent VSC update had to have broken this? Is there another way? I'm not finding much to go on, out there.
I went through the VS Code documentation and found two problems with your tasks.json.
1-You need to create two different tasks separately for the above mentioned scenario like this e.g
{
"version": "2.0.0",
"tasks": [{
"label": "Client Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceFolder}/client"
}
},
{
"label": "Server Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceFolder}/server"
}
},
{
"label": "Build",
"dependsOn": ["Client Build", "Server Build"]
}
]
}
2- You need to set "dependsOrder": "sequence" and configure dependencies like e.g.
{
"label": "One",
"type": "shell",
"command": "echo Hello ",
"dependsOrder": "sequence",
"dependsOn": ["Two", "Three"]
}
Find out More about compound tasks?
Good Luck!

Expo app icon not being properly displayed

I recently created an expo application. When I generated an apk for android and tested it on my device, the app icon looks zoomed in and fitted properly. I used the recommended icon size 1024x1024px I also tried 512x512px but still got the same thing
{
"expo": {
"name": "App",
"slug": "app",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"primaryColor": "#3399ff",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"icon": "./assets/images/icon.png",
"adaptiveIcon": {
"foregroundImage": "./assets/images/icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/images/favicon.png"
}
}
}
We had the same issue - leaving out the android.adaptiveIcon key in app.json fixed the issue for us, but this post might have a better solution https://blog.tgxn.net/expo-adaptive-app-icon/
You have to understand how to create icons for expo first.
There are two ways to do so, first you use one single image e.g. icon.png, if this is your case, this should be your app.json file in a expo project
{
"expo": {
"icon": "./assets/icon.png"
}
}
If you have a small PNG Cutout of your Logo with Transparent Background and you want to have that as an icon, then you can add that type of logo as well and here you have the option to add a background color for the icon as well
check that out here : https://docs.expo.dev/guides/app-icons/

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.

Intern 4 tests fail to load the Dojo2 loader

I'm migrating from Intern 3/requirejs to Intern 4/dojo2. I'm trying to run a test and immediately after the capabilities checks it will fail before ever loading my tests with this error:
Listening on localhost:9000 (ws 9001)
Tunnel started
‣ Created remote session chrome 66.0.3359.139 on XP (bc531663-f9f7-4cba-9038-6ab15808e9a0)
Suite chrome 66.0.3359.139 on XP FAILED
Error: Unable to load /..\node_modules\intern/loaders/dojo2.js
at HTMLScriptElement.<anonymous> <node_modules\intern\browser\remote.js:667:23264>
TOTAL: tested 1 platforms, 0 passed, 0 failed; suite error occurred
It's 404ing on that file from http://localhost:9000/__intern/browser/remote.html because it's trying to get dojo2.js from the wrong path by the looks of it. If I replace dojo2 in my config script with __intern/loaders/dojo2.js it will then 404 on /node_modules/#dojo/loader/loader.js. It looks like it's just looking for the wrong paths, is there something I can do to fix this?
intern.json
{
"loader": {
"script": "dojo2",
"config": {
"waitSeconds": 60,
"packages": [ {
"name": "objects",
"location": "objects"
}, {
"name": "edits",
"location": "./",
"main": "edits"
}, {
"name": "prepare",
"location": "TESTS",
"main": "prepare"
}, {
"name": "common",
"location": "./",
"main": "common"
}, {
"name": "socket",
"location": "http://localhost:2020/socket.io",
"main": "socket.io"
}
]
}
},
"suites": [
"./functional/InitTests.js"
],
"environments": [ {
"browserName": "chrome"
}
],
"tunnelOptions": {
"drivers": [
"chrome"
],
"port": 4444,
"version": "3.4.0",
"maxConcurrency": 1,
"runnerClientReporter": {
"writeHtml": false
}
},
"tunnel": "null",
"leaveRemoteOpen": true,
"grep": ""
}
There are a few potential issues:
Have you installed #dojo/loader? The loader scripts require that the associated loader be installed as a peer of Intern.
When using an AMD loader, specify tests as module IDs rather than file names
Does ./functional/InitTests.js actually contain functional tests? If so, it should be specified under functionalSuites.

Categories