React Native Android - Having Issues with Statusbar configuration - javascript

I am having issues with setting up Statusbar in Android.
I want Splashscreen to open with the Status bar as white color or full screen but currently it shows with black color background.
Second thing for other screens, I have background images so I want to cover those background images to full screen. But Statusbar is showing with gray color and I am not able to make the image full screen.
Here I have given my app theme in styles -
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
<item name="android:statusBarColor">#044862</item>
</style>
</resources>
Any helps much appreciated so that I can achieve both things.

Related

Android app icon / ic_launch icon has white padding

Generated an app icon using
https://appicon.co/
Ive used this before for other apps and its working great but this time my app icon has white padding on android OS, , any idea why ?
Im using react native & already added assets to android native side
app icon
How icon looks on android home
icon on android
Try using this website to generate icons before uploading the image here make sure your icon doesn't have any transparent padding.
I've used this website multiple times works perfectly.
Turns out the issue is because the icon I'm using has transparent background. IOS did add white bg by default and handled it, android handled it by rapping the icon with white padding also.
Fixed after changing background to be white.

How to create gradient Background splash screen in react native application?

I want to create gradient Background splash screen in my react native application but I'm unable to find sources for it, can anyone pls help me out of it

For progressive web apps, how can I specify which icon should appear on the splash screen?

I have a PWA with an icon at 144 and 512. Both seem to appear in the application tab in chrome, but when the splash screen shows up the icon is really small (I think it's the 144 icon). Is there a way to specify which icon should be used for the splash screen? Will the splash screen always show the largest image?
I would recommend always having 192px as the minimum sized icon and create 3 other versions at 256px, 384px and 512px. However, if you want to ensure that the user is not downloading too much data for the splash screen, especially on a low density device then you can go lower and Chrome will try to fetch the most appropriate image.
Used to install to the homescreen is determined by using the largest icon found in one of the following <link> tags:
<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
Reference:
Add to Homescreen - chrome
Splash Screen for Installed Web Apps

Why does the statusBar change color after backgrounding my app?

I've got a statusBar set to light-content on every single screen of my app.
<StatusBar
barStyle="light-content"
/>
For some reason, on iOS when I background and then foreground my app, the status bar suddenly becomes black (dark-content) any idea why this might be?

Customising Google Chrome web browser in Mac OS X

On the google theme store https://chrome.google.com/webstore/category/themes you have themes that have not just the tabs but search bar etc. with background images, transparent not just the colour that is allowed when creating your own theme.
Q: Is there a file that I can edit like a CSS file attached to my chrome browser or any other way that I can customise my chrome browser.
Change the colours, add images, font size, highlight of text colours?
Thank you.

Categories