Android App Set NavigationBarColor
Hi Alex T⚜️
In the UNA mobile app for Android the "NavigationBarColor" is not defined, please can you help me define this so that I can set it's color dynamically for light and dark mode.
If I change it in styles.xml it remains the same color regardless of mode.
<item name="android:navigationBarColor">#e60000</item>
Defining it in theme.js is not working for me either
const themeLight = {
dark: false,
iosBarStyle: 'light-content',
android:navigationBarColor = '#e60000',
colors: {I'd like this code change with dark and light mode.
Can you help?
-
React Native supports rgb () and rgba () in both hexadecimal and functional notation: React Native supports hsl () and hsla () in functional notation: React Native supports also colors as an int values (in RGB color mode):
-
Hi thank you for your reply, I do not understand how it relates.
-
Try to use RGB code to change change the colour, that's what we use in customizing colors tfor mobile header and bottom navs that fits client site theme.
-
Thank you, I have used RGB and Hex, both work well.
What does not work is the ability to define "navigationBarColor" in Theme.js I would like "navigationBarColor" defined so that it is dynamically changed with Day/Night mode on Android.
This is a "Bug" that has not been coded for in the mobile app.
-
Haven't tried that one yet. Maybe Una team can help. As it will need a switcher for dark and light mode.
-
To change top/bottom navigation bar color, please try to change the following color in Theme.js file:
primary: '
#fff', -
Hi Alex T⚜️
Thank you for your reply, Hope this explanation helps.
Please see the image at the end of this post. Primary Changes the Top and Bottom navigation bars, but it does not change the "android:navigationBarColor" which sits below the bottom navigation bar and it is not defined in the app theme.
Adding "navigationBarColor:" line to Theme.js does not change the "navigationBarColor:" as it is not defined in the App.
Please add this <item name="android:navigationBarColor">
#e60000</item> to styles.xml in the Android folder and compile the app to see the bar in RED.<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- Customize your theme here. --> <item name="android:textColor">
#ffffff</item> <item name="android:navigationBarColor">#e60000</item> </style> -
Primary Changes the Top and Bottom navigation bars, but it does not change the "android:navigationBarColor" which sits below the bottom navigation bar and it is not defined in the app theme.
Thank you for pointing this out, this color should be changeable is Theme.js as well, please try to change the following:
statusBar: '
#fff', -
Hi Alex T⚜️
Hopefully I can explain better this time, "StatusBar" is to the TOP. I can change "StatusBar"
"navigationBarColor" is for the bottom of the Android APP
Please see this React Native Package for more information
https://www.npmjs.com/package/react-native-navigation-bar-color
-
Hi Alex T⚜️ do you have an update on this?
-
Hello Alex T⚜️ , how do I change the statusbar text/icon color, i mean the notification icons in status bar?
-
-
Alex T⚜️ I need to change the statusbar text/icon color for android/ios mobile app, how do i go about it?
-
Alex T⚜️ I need to change the statusbar text/icon color for android/ios mobile app, how do i go about it?
It's just above in this thread
https://una.io/page/cmts-view?sys=bx_forum&id=8238&cmt_id=36079 -
No, I already got that... "Statusbar" points out for changing the status bar background color, it doesn't work for the text/notification icons in the upper statusbar area. See screenshot below, here the status background color I used is a dark color, meanwhile the text/icon color in the status area is also a dark color. Now I need to change the text/icon color so that the notifications can be seen properly. As I see, this is not defined in app.js, hence there's no way to change the color in theme.js. See attached screenshot.
-
No, I already got that... "Statusbar" points out for changing the status bar background color, it doesn't work for the text/notification icons in the upper statusbar area. See screenshot below, here the status background color I used is a dark color, meanwhile the text/icon color in the status area is also a dark color. Now I need to change the text/icon color so that the notifications can be seen properly. As I see, this is not defined in app.js, hence there's no way to change the color in theme.js. See attached screenshot.
Please try to add barStyle={useTheme('iosBarStyle')} attribute in App.js:
<Header androidStatusBarColor={useTheme('colors.statusBar')} transparent={false} iosBarStyle={useTheme('iosBarStyle')} barStyle={useTheme('iosBarStyle')} style={styles.header}> -
Alex T⚜️ do you have any advice on the "navigationBarColor" it is on the very bottom of the Android APP?
-
Stephen-Mystic Inam I changed those colors in APP.js Scroll to line 796, you will see not all colors are defined by "theme.js"
On the Android app you can't set "navigationBarColor" it is on the very bottom of the Android APP and I do not get a reply from Alex T⚜️
-
it doesnt work still..status text/icon color are still not changing colors
-
it doesnt work still..status text/icon color are still not changing colors
I've just tried and it works just fine:
iosBarStyle: 'light-content', // makes text white
iosBarStyle: 'dark-content', // makes text black
statusBar: '#00ff00', // changes background color to green
-
Hi Alex T⚜️ I am wondering why you are avoiding replying about changing the "android:navigationBarColor" dynamically? (It's the bar on the very bottom on ANDROID. phones)
It can be done MANUALLY inside styles.xml, a manual setting means you are stuck with the color in Dark Mode which is not ideal
<item name="android:navigationBarColor">@color/theme_color</item>
-
Hi Alex T⚜️ I am wondering why you are avoiding replying about changing the "android:navigationBarColor" dynamically? (It's the bar on the very bottom on ANDROID. phones)
It can be done MANUALLY inside styles.xml, a manual setting means you are stuck with the color in Dark Mode which is not ideal
@color/theme_color
It's better to change colors in Theme.js file (instead of direct modification of Android project) it should change colors dynamically, however it looks like there is some error in the library we're using so it's actually doesn't work properly, I hope this bug will be fixed in the future, then it should start to work.
-
Thank you Alex T⚜️ it is always nice to receive an answer and clarity.
Look forward to seeing the fixed version of the Android App.
-
This dude is awesome.. he does good work!!
-
Thank you Alex T⚜️ it is always nice to receive an answer and clarity.
Look forward to seeing the fixed version of the Android App.
