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