question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Capacitor Splash Screen always being hidden by Quasar

See original GitHub issue

Describe the bug I want to manually hide the splash screen but it seems that quasar it always hiding it on mount of the root Vue instance. I cannot get quasar to stop auto hiding the splash screen even after setting it in both capacitor.config.json and quasar.config.js. This occurs on both iOS and Android

capacitor.config.json

{
...
  "plugins": {
   ...
    "SplashScreen": {
      "launchAutoHide": false,
      "showSpinner": true,
      "androidSpinnerStyle": "small",
      "iosSpinnerStyle": "small",
      "spinnerColor": "#ffffff",
      "backgroundColor": "#21252dff",
      "splashFullScreen": true,
      "androidScaleType": "CENTER_CROP",
      "splashImmersive": false
    }
  }
}

I have run npx cap copy after setting as described in capacitor docs

quasar.conf.js

return {
  ...
  capacitor: {
    hideSplashscreen: false
  },
  framework: {
      config: {
        dark: true,
        capacitor: {
          hideSplashscreen: false
        }
  }
}

Codepen/jsFiddle/Codesandbox (required) Not applicable since it only applies to capacitor apps on iOS/Android

To Reproduce I am assuming this would reproduce the behaviour

Steps to reproduce the behavior:

  1. use Quasar CLI and create capacitor app
  2. Add my config from above
  3. npx cap copy
  4. yarn dev -m capacitor -T (ios|android)

This also occurs in production build version

Expected behavior Capacitor splash screen should not hide until explicitly called by

import { Plugins } from '@capacitor/core'

const { SplashScreen } = Plugins

SplashScreen.hide()

Screenshots If applicable, add screenshots to help explain your problem.

Platform (please complete the following information): OS: Mac OS 10.15.5 Node: Node 14.15.0 NPM: n/a Yarn: 1.22.10 Browsers: n/a iOS: 13 and 14 Android: 10 and 11 Electron: n/a

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
seanayecommented, Dec 1, 2020

I have removed and re-installed node_modules in my main project and updated quasar. It appears to be working as expected and the problem is resolved. Thanks for looking into this though.

0reactions
IlCallocommented, Dec 1, 2020

I can run it on Android, not so easy on iOS

Read more comments on GitHub >

github_iconTop Results From Across the Web

Splash Screen Capacitor Plugin API
The Splash Screen API provides methods for showing or hiding a Splash image.
Read more >
Capacitor and SplashScreen | Quasar Framework Community
I am having difficulties to disable splash screen in capacitor. I added to App.Vue import { Plugins } from '@capacitor/core' const ...
Read more >
Ionic & Capacitor - Android Splash Screen Responsiveness
This is related to the splash screen images responsiveness and according to my research it just happens because there is missing documentation ......
Read more >
Layout Drawer | Quasar Framework
If you haven't already, please read QLayout documentation page first. ... The mini-to-overlay Boolean property will always set your drawer with fixed ...
Read more >
cordova-plugin-splashscreen
This plugin displays and hides a splash screen while your web application is launching. Using its methods you can also show and hide...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found