(Android) Navigation Bar Background Color Change on the fly
complete
Developer Itemtopia
Currently, there is a way to set the Navigation Bar Color by using app.json.
It will be great if there is a way to change Navigation Bar's background color on the fly.
This feature is needed for such case like the app has multiple theme that can be configured by the User.
Currently, when the theme of the App is changed in the app, there is no way to change the Android navigation bar's backgorund color and content color accordingly.
Evan Bacon
complete
This can now be achieved with
expo-navigation-bar
which is available in SDK 44! https://blog.expo.dev/expo-sdk-44-4c4b8306584aEvan Bacon
complete
This can now be achieved with
expo-navigation-bar
which is available in SDK 44! https://blog.expo.dev/expo-sdk-44-4c4b8306584aWodin
There are no special install instructions other than installing it, so
react-native-navigation-bar-color
should work out of the box with EAS Build without even needing a config plugin.Henrique Bruno Fantauzzi de Almeida
Wodin: I see and I thank you. EAS price isn't economically viable for me yet, mainly because dollar is expensive here in Brazil and my new app is in early dev stage.
Wodin
Henrique Bruno Fantauzzi de Almeida: If you have Xcode and Android Studio installed you can use
eas build --local
for free. Otherwise, EAS Build will have a free tier in future.scorer 5
Wodin: do you happen to know why i get
TypeError: null is not an object (evaluating 'NavigationBarColor.changeNavigationBarColor')
everytime i try to change the color? i tried all different parameters and get that error every time.Simplest usage i tried is like
import changeNavigationBarColor from 'react-native-navigation-bar-color';
<TouchableOpacity
style={styles.button}
onPress={() => {
changeNavigationBarColor('#ffffff', true, true);}}
>
Wodin
scorer 5: Hi. I suspect you are trying this in Expo Go, or in a standalone app compiled with
expo build:android
?For this to work you will need to use
eas build
.Because RN Navigation Bar Color Change includes native code you can't use it in Expo Go. Instead, you should use expo-dev-client. So install
expo-dev-client
and react-native-navigation-bar-color
. Then build using eas build --platform android --profile development --local
. Then install and run the resulting APK instead of Expo Go.EDIT: I forgot to say that when I tried this in an SDK 42 app, the dev client crashed as soon as I clicked on the button to scan the QR code. But when I tried it in an SDK 43 beta app it worked perfectly. I used the example straight from the
react-native-navigation-bar-color
page. The only thing I changed was I added the import 'expo-dev-client';
at the top.scorer 5
Wodin: i see, thank you very much. I was indeed trying to run this in Expo Go, but good to know that it works like you said, much appreciated
Wodin
scorer 5: With Expo SDK 44 this should now work in Expo Go too.
Henrique Bruno Fantauzzi de Almeida
I just saw that Discord app somehow has a transparent navigation bar. It would also be a good addition to Expo.
Anyway, my main need is to have a different nav color at the splash screen, so I can have a fullscreen splash, without the ugly bar below... setting a fixed color to it, as we can currently do, isn't good, as after the splash screen I want the default light/dark navigation bar color.
Matheus Dias Batista Sanches
Agree, there's already a code for this on the project for the app.json, i think it's not that hard to use the same code on a API
Umberto Ghio
Hi, it is indeed possible to change the navigation bar color within the app with StatusBar from react native.., the limitation is just the color set during splash screen at startup and the transparency, which is part of app.json. But once app loads you can set any color you want.
Developer Itemtopia
Umberto Ghio: Oh! Really?? I'll go try it! Thank you!
Developer Itemtopia
Umberto Ghio: I see nothing from this documentation: https://docs.expo.io/versions/latest/guides/configuring-statusbar/ What I want is the BOTTOM navigation bar's background colour, not the status bar.
Umberto Ghio
Developer Itemtopia: wops...you are right, you meant bottom navigation bar and I read status bar....good news is that it seems to be available in expo35 https://github.com/expo/expo/pull/5280 but not on the fly! Seems a legit request then