I added a splash screen when booting the app using https://www.npmjs.com/package/react-native-splash-screen#examples.
But before launching the splash screen, I can see a white screen. I can change that screen's colour using styles.xml but cannot remove it. Can anyone help me to remove that I am new to react-native?
Go to android/app/src/main/res/values/styles.xml
Disable the app's preview:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
</style>
</resources>
Related
I have a problem with the navigation bar color in android 13, when I set it to white the button remain white so they are not visible. Any solution to that in Kotlin? Can the button color in the navbar?
The color is set in themes.
Also I found some answers, either it's outdated or it does not work for me.
add this to themes.xml
<item name="android:navigationBarColor">#color/navigation_bar_color</item>
colors.xml
<color name="navigation_bar_color">#000000</color>
Or in style, you can also change the navigation bar colour
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:navigationBarColor">#android:color/white</item>
</style>
I am using react-native-bootsplash for a splash screen. The logo image appears only when I do a fresh build and install of the app on my android device. If I close the app and reopen the app, the splash screen is blank (with the correct background color) but the logo doesn't show. My guess is the loading of the image is very slow. On iOS everything is fine because the logo image is loaded from the bundled assets. But on android, I think the image is being loaded differently and is slow. Any ideas? Is there a way to make react native bootsplash load the logo from assets instead of #drawable/bootsplash_logo since that might be faster?
Here is my styles.xml
`
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">#drawable/rn_edit_text_material</item>
<item name="android:enforceNavigationBarContrast">false</item>
<item name="android:ambientShadowAlpha">0.8</item>
<item name="android:spotShadowAlpha">0.8</item>
</style>
<!-- BootTheme should inherit from Theme.SplashScreen -->
<style name="BootTheme" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">#color/bootsplash_background</item>
<item name="windowSplashScreenAnimatedIcon">#drawable/bootsplash_logo</item>
<item name="postSplashScreenTheme">#style/AppTheme</item>
</style>
</resources>
`
I tried cleaning the android project, deleting the app and reinstalling, and smaller logo image resolutions. No luck.
react-native-navigation-bar-color is not working for me.Any other solution to change nav bar color on androi in react native?
You just need to update your android style, Go to android/app/src/main/res/values/styles.xml file
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">#drawable/rn_edit_text_material</item>
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>
Just use the StatusBar of react-native.
import {StatusBar} from 'react-native'
...
...
<StatusBar backgroundColor="blue" barStyle="light-content" />
https://reactnative.dev/docs/statusbar
go into this path ..android/app/src/main/res/values find styles.xml
and add this item :
<item name="android:navigationBarColor">#212e34</item>
this is my color code #212e34 change it what ever you want
Because I wanted to use material input edit text, I had to change my style to
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
But my SnackBar style has changed, before it (which I was using AppCompat) my SnackBar was show in different mode, I mean, It came up from bottom and after a while it goes down, but now it is shown like a simple toast, it fade-in and then fade-out,
how can I use material component without having any change in my view styles?
Add following lines into styles.xml BaseTheme:
<resources>
<style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
...
<item name="snackbarStyle">#style/Widget.MaterialComponents.Snackbar</item>
<item name="snackbarButtonStyle">#style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
<item name="snackbarTextViewStyle">#style/Widget.MaterialComponents.Snackbar.TextView</item>
</style>
</resources>
I would like to change the background title color in the recent apps view (when you press the Overview square button on Android) using react-native.
You can see in the image below that the Facebook app has a blue background color, but my Bitcoin FOMO Calculator app has the default gray color.
Thanks
1.Create colors.xml into android/app/src/main/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Change the color value for your need -->
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
2.Modify the styles.xml inside android/app/src/main/res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
3.The result and more detail about Android Style and Theme: