Anyone got Android and iOS launchScreens to work in 2.14

mobile
1

I got a bunch of warnings like this directly after updating to 2.14

unknown key in App.launchScreens configuration. The key may be deprecated.

I removed all the iOS keys and added the following (as per the Cordova guide):

App.appendToConfig(`
  <splash src="../../../app/path/to/Default@2x~universal~anyany.png" />
  <splash src="../../../app/path/to/Default@3x~universal~anyany.png" />
`);

I now get the warning for “android_universal” and it seems that launch screens is no longer supported for Android, but I get the grey one with the Meteor logo and cannot figure out how to configure my own.

Any help would be appreciated

2

Changes and migration steps are normally indicated in the changelog
https://docs.meteor.com/changelog#v214020231212

3

You are correct, but I cannot get to a solution from the information in the changelog. Perhaps I’m missing something, so I would love to hear from someone who has been able to get their app built with a non-meteor looking splash screen since 2.14

1 Like
4

cc @matheusccastro @renanccastro @nachocodoner
cordova_squad

1 Like
5

My best success is to look at what is generated in .meteor/local/cordova-build/resources and then to put these images in a cordova-build-override/resources folder where I can change them to my own images. Then I don’t need to put any config in mobile-config.js regarding these. Feels too hacky so I’m hoping there is a better way.

6

@jacoatvatfree The warning of deprecated keys you are getting is a bug, it’s safe to ignore (there’s this PR open) - it will still work.

If you use both keys, what issues are you facing? Can you send your mobile-config?

7

I’ve had quite a few variations of mobile-config and got warnings or errors all the way. I was surprised when I searched and couldn’t find anyone else having similar issues recently. My current mobile-config has nothing specified regarding icons and launchScreens and I’m just doing the override thing. If I can get a minimal repo going I’ll supply that instead, but not today.

1 Like
8

I worked recently on a cordova fix just after the 2.14.x release. So I have been able to test this issue you mention on this post. And yes, I can confirm that splash screen is not working, at least on Android. In IOS it loads the gradient I added properly.

image
image1920×1057 233 KB

My configurations were as shown in the docs. I will get some more time to investigate this issue. Just wish to share my findings so far on reproduce it.

10

@nachocodoner @jacoatvatfree I tried to reproduce it here but seems to be working for me.

What I did was the following: meteor create test-cordova-splash && cd test-cordova-splash && meteor add-platform android

Then on my mobile-config.js I added:
App.launchScreens({ android_universal: "splash.png" }) where splash.png is on the top level of the directory.

Am I missing something? I tested and it worked on API 34, 29 and 25 (emulator).

11

Are you in above Meteor 2.14 version?

I also got this working on previous Meteor versions. Be sure you also clean .meteor/local just in case is the cache acting, as well as uninstalling the previous build on the emulator, if exists.

12

Yeah, app created is on meteor 2.14. Did both here (cleaning meteor cache and deleting previous build from emulator) and it still worked.

On API 34 with a random splash screen I put here:

splash_1
splash_11080×2340 116 KB

The splash background color is white because I didn’t set the background color with App.setPreference('AndroidWindowSplashScreenBackground', valueHere).

I also have it working in some other projects running on meteor 2.14.

13

@jacoatvatfree: By a chance, do you have your splash screen in .jpg format?

I used that format on my splash screen example and it worked on IOS but suddenly after 2.14 Meteor version it didn’t on Android. Looking into @matheusccastro 's example, I saw he uses .png, so I transformed my splash into this format, and suddenly it worked well.

working
working1023×1734 32.5 KB

I have tried to find references on format changes for splash only allowing XML or PNG. This seems to have solved it at least for me. Could you try?

A config like this resulted enough for me:

App.launchScreens({
  // iOS
  'ios_universal': 'splash.png',
  'ios_universal_3x': 'splash.png',

  // Android
  'android_universal': 'splash.png',
});
14

Yeah, cordova accepts only PNG or a XML Vector Drawable for Android → Splash Screen - Apache Cordova.

So if you use a different image type it won’t work.

1 Like
15

I was using .png all along. I will try with a minimal repo too.

16

The minimal repo is causing me headaches with gradle and java versions which I don’t have time to try and work through right now. I’m going to stick with the hacky solution of using cordova-build-override and will focus on 3.0 upgrades instead

17

Could this potentially fix the issue, or am I completely out of my mind here (well, I’m currently influence by numbing medicine due to medical examination):

18

This PR will fix the false positive warnings I believe.

1 Like
19

Currently I’m seeing both the default meteor splash followed by my own splash screen. I’m baffled as to why, since in XCode assets for LaunchStoryboard I only see my own image. (found that some of my apps still had the launch-screen or the cordova:cordova-plugin-splashscreen packages included, removing these removed the double launch-screen)

I have the following in my mobile-config.js

App.launchScreens({
    // iOS
    'ios_universal': 'resources-test/splash-ios.png',
    'ios_universal_3x': 'resources-test/splash-ios.png',
  
    // Android
    'android_universal': 'resources-test/splash-android.png',
  });

And part of my build script sets up the cordova-build-override like this:

(
  cd cordova-build-override
  rm -rf resources
  ln -s ../resources-test resources
)

This is for a test environment. For prod, a different folder is used.

20

Here’s a general approach to set a custom splash screen for Android in a Meteor project:

  1. Remove Deprecated Keys:** Make sure that you have removed any deprecated or unknown keys in your App.launchScreens configuration. Review the documentation or release notes for Meteor 2.14 to ensure you are using the correct configuration.

  2. Configure Splash Screen in Mobile Config:** Instead of using the launchScreens configuration, you might want to use the mobile-config.js file to configure the splash screen for both iOS and Android. Here’s an example:

javascriptCopy code

App.setPreference('SplashScreen', 'path/to/your/splash.png', 'android');
App.setPreference('SplashScreenDelay', 5000, 'android'); // Adjust delay as needed

Replace 'path/to/your/splash.png' with the actual path to your custom splash screen image.
3. Verify Image Path:** Ensure that the path to your custom splash screen image is correct, and the image file is present in the specified location.

  1. Build and Test:** After making these changes, rebuild your Meteor project and test it on an Android device or emulator to see if the custom splash screen appears as expected.

If you are still facing issues, consider checking the Meteor forums, GitHub issues, or the official documentation for any updates or community discussions related to the specific version you are using. Sometimes, there might be additional adjustments or considerations depending on the Meteor plugins or packages you have in your project.

1 Like