React-native-router-flux: navTransparent iOS has black border on bottom

[brycepavey]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21
• react-native v0.48.4

Expected behaviour

Not show border bottom when navTransparent={true} or be able to override borderBottomWidth or borderBottomColor with navigationBarStyle={{borderBottomWidth:0}} which has no effect

Actual behaviour

shows black border on bottom of transparent navbar

<Stack key="homeTab" headerMode="screen" >
    <Scene key="scene1" component={Scene1} title="" navBar={HomeNavBar} />
    <Scene key="scene2" component={Scene2} title="" navTransparent/>
</Stack>

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. Create a route with navTranparent set to true
2. Navigate to route

[luco]

+1 on this.

---

Edit

@brycepavey Achieved with navigationBarStyle bbw0

[lighthugger]

You can see in src/navigationStore.js that navTransparent will use preset styling with elevation set 1, and will also disregard any other styling you might've passed with navigationBarStyle:

if (navTransparent) {
      res.headerStyle = { position: 'absolute', backgroundColor: 'transparent', zIndex: 100, top: 0, left: 0, right: 0,
        borderBottomWidth: 0, elevation: 1 };
    }

Use navigationBarStyle with elevation: 0 instead of navTransparent.

<Scene
  // your scene settings
  navigationBarStyle = {{
    position: 'absolute', backgroundColor: 'transparent', zIndex: 100, top: 0, left: 0, right: 0,
    borderBottomWidth: 0, elevation: 0
  }}
>
...
</Scene>

This fixed my issue with elevation shadow on Android, haven't tested on iOS.

[aksonov]

Added navTransparent to register screen for Example project, don't see black border with latest RNRF/react-navigation. Closing the issue.

[antonsivogrivov]

and how to set border when navTransparent is true? Now I dont's see border even with

borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.3)',