Added Splash Screen - Githubissues

codeforcauseorg / edu-client

Product focuses on 100% education as well as upskilling developing countries and rural areas.

https://educlient.codeforcause.org/

MIT License

130 stars 149 forks source link

Added Splash Screen #232

Closed rizwan2000rm closed 3 years ago

rizwan2000rm commented 3 years ago

Issue Number

fixes #56

Describe the changes you've made

Added a splash screen with horizontal loading animation on android with Capacitor Splash Screen Plugins.

Video of splash screen

https://user-images.githubusercontent.com/48753482/113828233-cb397000-97a1-11eb-8a38-c131d7c42719.mp4

Checklist

[x] My code follows the code style of this project.
[x] All new and existing tests passed.
[x] The title of my pull request is a short description of the requested changes.

rizwan2000rm commented 3 years ago

@Abhishek-kumar09 Ping!

Abhishek-kumar09 commented 3 years ago

Testing!...

Abhishek-kumar09 commented 3 years ago

Working great

iPhone 11 Pro Max - 1(1).zip

Just replace the current image with the above.

Abhishek-kumar09 commented 3 years ago

It took very long time in my phone to hide splash screen, idk why.

Changing it to

  "plugins": {
       "SplashScreen": {
+      "launchShowDuration": 2000,
+      "launchAutoHide": true,
       "androidSplashResourceName": "splash",
       "androidScaleType": "CENTER_CROP",
       "androidSpinnerStyle": "horizontal",
       "iosSpinnerStyle": "small",
       "spinnerColor": "#a10000",
       "showSpinner": true,
       "splashFullScreen": true,
       "splashImmersive": true
    },

solved the problem.

Abhishek-kumar09 commented 3 years ago

I also know why you had set it to false, good decision. I have to figure out bit more about this till your changes are OK.

rizwan2000rm commented 3 years ago

@Abhishek-kumar09 Yeah @adarsh-technocrat actually tested it and had similar issues.

Some points to be considered while testing and trying to fix this.

I think a good idea would be to stick to launchShowDuration of 2000 rather than something very high like 10000 but with launchAutoHide set to false (for cases where app launches faster or slower than specified time)
Also I'm hiding the splash screen on home page mount rather than App.js (hiding it in App.js is faster but leaves you with a White screen for a split second)

I will install some more virtual devices and test some different configurations and implementation options.

rizwan2000rm commented 3 years ago

@Abhishek-kumar09 The images has a minimum requirements of 1920×1920. This image is of 414×896 so it won't work.

Also update on long splash issue I tried 2 more devices and still I cannot recreate the long splash screen problem on any of my devices.

For those who have faced these error, can you please test it with above mentioned settings.

Abhishek-kumar09 commented 3 years ago

Isnt it a square image, instaed of a portrait one: 1920×1920 It's like square:

rizwan2000rm commented 3 years ago

@Abhishek-kumar09 Yes it is a square. I'm using a npm package called cordava-res to generate all assets required. https://www.npmjs.com/package/cordova-res

I think it crops the image to all the specific resolutions of android for both potrait and landscape modes automatically.

Just center everything on that resolution, leaving space for the loading animation in dead center. I think that should do it. If anything looks weird I will let you know.

Also change the resolution to 2732×2732px I think I read the wrong minimum resolution before.

Abhishek-kumar09 commented 3 years ago

iPhone 11 Pro Max - 1(2).zip

Let me know if it is fine.

rizwan2000rm commented 3 years ago

@Abhishek-kumar09 I have used the new splash screen. In some devices the spinner overlaps with the splash content. For me it happened on Pixel 4A.

Abhishek-kumar09 commented 3 years ago

Looking good, we can fix further issues in different PRs but for now these changes are looking good.