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/
Related
I'm having a problem with OTA updates from EXPO. Indeed, I have an application in which I have configured the updates via EAS and modified the app.json file in order to take the updates into account. Also I rebuilt the application and installed it. I try since, to make remote updates; unable to get the result of the update the application remains exactly the same.
This is my app.json:
{
"expo": {
"name": "xxxxxx",
"slug": "xxxxxx",
"version": "0.1.8",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/xxxxxx.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 300000,
"url": "https://u.expo.dev/8xxxxxxxxxxxxxxxxxxxxxxxxx"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.xxxxxx.xxxxxx",
"adaptiveIcon": {
"foregroundImage": "./assets/icon.png",
"backgroundColor": "#FFFFFF"
},
"intentFilters": [
{
"action": "MAIN",
"data": {},
"category": [
"LEANBACK_LAUNCHER",
"LAUNCHER"
]
}
]
},
"androidNavigationBar": {
"visible": "sticky-immersive"
},
"androidStatusBar": {
"hidden": true
},
"web": {
"favicon": "./assets/logo-square.png"
},
"extra": {
"eas": {
"projectId": "8xxxxxxxxxxxxxxxxxxxxxxxx"
}
},
"runtimeVersion": {
"policy": "sdkVersion"
}
}
}
I've tried to modify the fallbackToCacheTimeout ... nothing. Also, i've tried to prebuild the app and put the version of the SDK in the app.json and AndroidManifest, nothing too.
Any ideas?
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.
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,...
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 !
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.