javascript - React Native Android Navigation Bar Translucent - Stack Overflow

admin管理员组

文章数量:1344319

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.

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.

• javascript
• android
• react-native

Share Improve this question Follow edited May 25, 2022 at 15:24 Glorfindel 22.7k1313 gold badges8989 silver badges119119 bronze badges asked Aug 28, 2019 at 19:23 RondevRondev 92811 gold badge1010 silver badges2424 bronze badges 6

• What was the crash? Maybe that is the way to do it but you need to dig in a bit? – doubleA Commented Aug 28, 2019 at 19:29
• @doubleA the app crashes with no warning or exception as soon as I reload after I set changeNavigationBarColor('transparent'); – Rondev Commented Aug 28, 2019 at 19:45
• Have you tried this changeNavigationBarColor('#ffffffff',true)? It has 8f whereas the last two denotes the Alpha Channel. – Ashwin Mothilal Commented Aug 29, 2019 at 10:02
• @Ashwin Mothilal I've tried this trick before, Unfortunately no luck with this as well... – Rondev Commented Aug 29, 2019 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 Commented Aug 30, 2019 at 19:05

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 5

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

Late to the party I guess but what worked for me today, using expo, is found at https://docs.expo.dev/versions/latest/sdk/navigation-bar/

do npx expo install expo-navigation-bar

then add the following in your App.js file before the function block:

// enables edge-to-edge mode
NavigationBar.setPositionAsync('absolute')
// transparent backgrounds to see through
NavigationBar.setBackgroundColorAsync('#ffffff00')
// changes the color of the button icons "dark||light"
NavigationBar.setButtonStyleAsync("dark");

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./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.

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

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

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>

You just add this lines to app.json:

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

本文标签： javascriptReact Native Android Navigation Bar TranslucentStack Overflow