transluctent navigation bar

[ronsivan1]

How can I make the navigation bar transluctent ? I tried setting the changeNavigationBarColor('transparent); but doing so makes the app crash. Any ideas on how to achieve this?

[notmike101]

Try #00000000. Let me know if it works.

Usually this is controlled by the theme you use for your app though.

[fabOnReact]

@notmike101 I just tested this and it does not work

so I am reading https://stackoverflow.com/questions/29069070/completely-transparent-status-bar-and-navigation-bar-on-lollipop

As my understanding giving it a transparent color will just render the background, which is the white navbar... What you need is make the view 100% height and this can only be done by tweaking android native code

[fabOnReact]

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.surfapp">

    <application
      android:theme="@style/AppTheme">

in android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowTranslucentStatus">true</item>
      <item name="android:windowTranslucentNavigation">true</item>
        <!-- Customize your theme here. -->
    </style>

</resources>

my react native component

  componentDidMount() {
    const color = '#00000000'
    changeNavigationBarColor(color);
  }

render() {
  return (
     <View styles={sytles.container} />
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1, 
    zIndex: 4, 
    backgroundColor: 'red', 
    height: Dimensions.get('screen').height,
  },
}

how you get the full height of the screen in react native

The android solution

[nikolowry]

@thebylito any chance of changeNavigationBarColor programmatically applying the translucent flag if the value of the color arg is set to translucent?

Here's react-native-onscreen-navbar-fork's implementation for reference https://github.com/seahorsepip/react-native-onscreen-navbar/blob/master/android/src/main/java/com/seapip/thomas/navigationbar/NavigationBarModule.java#L100

This is the only react-native Navigation Bar package that is actively maintained, so it would be great if this feature was officially supported

[thebylito]

see #25