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.

Answer 1

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>
    );
}

Answer 2

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.

Answer 3

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

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

Answer 4

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>

Answer 5

You just add this lines to app.json:

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