Menu
I am using react-native-router-flux v4.0 library for showing navigation bar in react-native.
Here I created a custom navigation bar.
Here is my code :
_renderLeft() {
return (
<TouchableOpacity
style={{justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start'}}
onPress={Actions.pop}>
<Image
style={{width: 24, height: 24}}
resizeMode="contain"
source={require('../../assets/images/ico_swipe.png')}></Image>
</TouchableOpacity>
)
}
_renderMiddle() {
return (
<View style={[styles.navBarTitleView]}>
<Text style={[styles.navBarTitle]}>{this.props.title}</Text>
</View>
)
}
_renderRight() {
return (
<TouchableOpacity
style={{justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start'}}
onPress={Actions.pop}>
<Image
style={{width: 24, height: 24}}
resizeMode="contain"
source={require('../../assets/images/ico_home.png')}></Image>
</TouchableOpacity>
)
}
render() {
StatusBar.setBarStyle('light-content', true);
return (
<Header style={[styles.container]}>
<Left style={{flex: 1}}>
{this._renderLeft()}
</Left>
<Body style={{flex: 3}}>
<Title style={styles.navBarTitle}>{this.props.title}</Title>
</Body>
<Right style={{flex: 1}}>
{this._renderRight()}
</Right>
</Header>
)
}
Here is my Style:
const styles = StyleSheet.create({
container: {
backgroundColor: AppColors.colorToolBar,
elevation:0
},
navBarTitleView: {
flex: 2,
},
navBarTitle: {
fontSize: 20,
fontFamily: AppStyles.fontFamilyMedium,
color: AppColors.white,
alignSelf: 'center'
},
menuItem:{
flex: 1, flexDirection: 'row', padding: 20
},
menuTitle:{flex: 20, justifyContent: 'flex-start', alignItems: 'center',
alignSelf: 'flex-start'},
menuNextArrow:{flex: 1}
});
Here I used it :
<Stack key="Key" hideTabBar>
<Scene key="Key"
navBar={MyCustomNavBarLocation}
component={myFileLocation}
title="Round 1"
onLeft={Actions.pop}
BackHandler={Actions.pop}
back
/>
</Stack>
I am getting it proper in Android like:
But in Iphone its not coming proper:
Here If u see the second Image u saw one grey Line between navigation bar and TimeRemaining view I want to remove that.
Thanks
259
At times, the UI of the screen might not require a header border or shadow at all. In such cases, you can always customize the screenOptions by adding the property headerShadowVisible and setting it to false .
This property is commonly used to change the styles of the tab bar, for example, by applying the backgroundColor styles' property. To remove the border, add the tabBarOptions prop and inside it, add a style property called borderTopWidth with a value 0 .
Wrap your Image inside View (for semantic clarity) and then define following style rules to the View: shadow: { shadowColor: '#202020', shadowOffset: {width: 0, height: 0}, shadowRadius: 5, }, I made an example here: https://snack.expo.io/rJesdOgRZ.
The issue is in Header component of NativeBase That bottom border line is coming from the Header style. So according to the issue raised here, use,
<Header noShadow={true} hasTabs={true}
for resolving this issue.
90
Its late but more accurate answer, Add this line in your router to manage shadow:
<Router
navigationBarStyle={{ ...Platform.select({
ios: {
// marginTop: StatusBar.currentHeight
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
})
}}
>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With