React Native Android Navigation Bar Translucent

Question

I'm trying to set the navigation bar to translucent on android. Take a look at the image for example:

_{(source: morenews.pk)}

I tried using react-native-navigation-bar-color but it only allows me to hide nav bar / show nav bar / change the color of nav bar. So using this navigation bar library, I attempted to set changeNavigationBarColor('transparent'); but it made my app crash.

I've also tried setting android:fitsSystemWindows="true" in AndroidManifest.xml which I brought from here, but unfortunately nothing changed.

What was the crash? Maybe that is the way to do it but you need to dig in a bit? — doubleA, Aug 28 '19 at 19:29
@doubleA the app crashes with no warning or exception as soon as I reload after I set `changeNavigationBarColor('transparent');` — Rondev, Aug 28 '19 at 19:45
Have you tried this changeNavigationBarColor('#ffffffff',true)? It has 8f whereas the last two denotes the Alpha Channel. — Ashwin Mothilal, Aug 29 '19 at 10:02
@Ashwin Mothilal I've tried this trick before, Unfortunately no luck with this as well... — Rondev, Aug 29 '19 at 10:46
@Rondev Double check logcat. What you are describing is a fatal error from Android OS. No error message in RN nothing popping up on screen is a fatal crash. That should be in Logcat in AS. — doubleA, Aug 30 '19 at 19:05
did you find a solution? https://stackoverflow.com/questions/29069070/completely-transparent-status-bar-and-navigation-bar-on-lollipop — Fabrizio Bertoglio, Oct 23 '19 at 01:10

score 3 · Answer 1 · answered Oct 19 '21 at 13:51

A good way to get a translucent navigation and status bar is to add 3 style items to android > app > src > main > res > values > styles.xml

These will set the bottom navigator bar to translucent:
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>

This one sets the top status bar to translucent:
<item name="android:windowTranslucentStatus">true</item>

Example of implementation in styles.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>

        <!-- Make status & navigation bar translucent -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

This will make your content render below the status and navigation bar.
To fix this you can use react-native-safe-area-context to get the safe area insets.

Example for a safe content view:

import { SafeAreaInsetsContext } from "react-native-safe-area-context";
const ContentView = (props) => {
    const safeInsets = useContext(SafeAreaInsetsContext);
    return (
        <View
            style={[
                {
                    marginLeft: safeInsets?.left,
                    marginTop: safeInsets?.top,
                    marginRight: safeInsets?.right,
                    marginBottom: safeInsets?.bottom
                }
            ]}
        >
            {props.children}
        </View>
    );
}

score 1 · Answer 2 · answered Oct 13 '19 at 20:58

So I took a look into the module and what it's doing and found that it's just using the native android Color library to parse the string. (Docs for it can be found here: https://developer.android.com/reference/android/graphics/Color)

I was able to get the nav bar transparency using the #AARRGGBB pattern specified in the docs. 3 or 4 letter Hex strings are not supported, and rgb strings are not supported. Some color names are listed as supported but transparent is not one of them.

Unfortunately, even though I was able to set the nav bar to be fully transparent, I wasn't able to get the app to actually draw anything behind it, so fully transparent actually just ends up being white, and anything in between is a transparency relative to that white background.

score 0 · Answer 3 · answered Aug 29 '19 at 04:52

0

You do not seem to accept string values. Would you like to try this?

changeNavigationBarColor('rgba(0,0,0,0)',true)

answered Aug 29 '19 at 04:52

hong developer

13,291
4
38
68

Looks like this function only accepts hex as a string, because this line also makes the app crash without any warning or exception – Rondev Aug 29 '19 at 07:20

rahi_mahajan · Answer 4 · 2019-08-29T09:05:15.187

0

We need to make custom navigation bar and add safe area to it.And then give your required colour to safe area. Below, is the example,

<ImageBackground style={{flex:1, backgroundColor: 'silver'}} source={require('./des.jpeg')}>
<SafeAreaView style={{backgroundColor: 'transparent'}}/>

</ImageBackground>

edited Aug 29 '19 at 09:05

answered Aug 29 '19 at 04:59

rahi_mahajan

14
2

I'm already using this trick as a temporary alternative. But this still doesn't make the navigation bar translucent – Rondev Aug 29 '19 at 07:29
I have added a background image and tried making safearea transparent , its working for me , have updated the code in previous answer please check whether it is working for you or not – rahi_mahajan Aug 29 '19 at 09:06
Can you please provide your full code? It doesn't seem to work for me – Rondev Aug 29 '19 at 10:43
Send me you code if possible so that i''ll better get the idea of what you are trying to do. – rahi_mahajan Aug 30 '19 at 10:34

Daniel Rodrigues · Answer 5 · 2022-09-16T00:43:33.477

0

You just add this lines to app.json:

"androidNavigationBar": {
  "visible": "sticky-immersive"
},

edited Sep 16 '22 at 00:43

answered Sep 16 '22 at 00:43

Daniel Rodrigues

1
1

React Native Android Navigation Bar Translucent

5 Answers5