How to remove border from default navigation bar?

[kacperpotega]

I'm using a router that looks like this:

      <Router
        hideNavBar={false}
        navigationBarStyle={{ backgroundColor:'#5aa0cc' }} >

The background color is set just fine, however the navigation bar gets a thin white border at the bottom on iOS and a rather thick grey border on Android.
Any idea how to remove this? I already tried setting borderBottomWidth to 0 and tried changing borderBottomColor, but neither seems to affect this additional border I am getting.

[kacperpotega]

This seems to be a ExNavigator issue.
When you do the following:

<Router
        hideNavBar={false}
        navigationBarStyle={{ backgroundColor:'#5aa0cc', borderBottomColor: 'transparent', borderBottomWidth: 65 }} > 

the bottom border disappears on both iOS and Android. And yes, borderBottomWidth has to be exactly 65. At 64 the white border is still there, at 66 the navigator itself starts gaining height.

I traced this back to ./node-modules/@exponent/react-native-navigator/ExNavigatorStyles.js, where changing the bar{} styles to the above would have the same effect.

If anyone has a better solution than this rather filthy one, please tell me :)

[zebulgar]

haha this worked for me. thanks for the dirty hack @kacperpotega

[oureta]

I'm developing on iOS and borderBottomWidth: 0 works for me. In my structure, the main router's hideNavBar equals true and every module has their own nested Router. So the borderBottomWidth: 0 are applied on the nested Router's

[kacperpotega]

Seems like @oureta's solution only works if every module has its own Router. As soon as my main router is responsible for displaying the navbar borderBottomWidth: 0 doesn't have any effect.

[aksonov]

Should be possible with 3.0 release, closing this ticket for now (feel free to reopen if 3.0 release has this problem)

[amun1303]

borderBottomWidth: 0 works with me, thanks @oureta

[nimabk82]

borderBottomWidth: 0 works for me.

[ycpatel813]

borderBottomWidth:0 not works for me.

[qingtian5266]

in node_modules/react-navigation/src/view/Header.js delete shadow

const styles = StyleSheet.create({
container: {
paddingTop: STATUSBAR_HEIGHT,
backgroundColor: Platform.OS === 'ios' ? '#EFEFF2' : '#FFF',
height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
//shadowColor: 'black',
//shadowOpacity: 0.8,
//shadowRadius: StyleSheet.hairlineWidth,
// shadowOffset: {
// height: StyleSheet.hairlineWidth,
//},

[hungdev]

navigationBarStyle={styles.navBarStyle}
navBarStyle: {
borderBottomWidth: 0,
elevation: 1
},
in router edit like this. ( Router flux v4)