-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Closed
Labels
StaleThere has been a lack of activity on this issue and it may be closed soon.There has been a lack of activity on this issue and it may be closed soon.
Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS High Sierra 10.13.1
Node: 8.6.0
Yarn: 1.2.1
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4408382
Packages: (wanted => installed)
react: ^16.1.1 => 16.1.1
react-native: ^0.50.3 => 0.50.3
Steps to Reproduce
(Write your steps here:)
- Put 5 views in a view with
flexDirection: 'row'
and add a top border - The centred view (3e one) make the
position: 'relative'
andbottom: 12
Expected Behavior
Like in iOS, the button goes over the top border.
(Write what you thought would happen.)
Actual Behavior
But in android it cuts the top off...
(Write what happened. Add screenshots!)
Reproducible Demo
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
TouchableOpacity,
Image,
Platform
} from 'react-native';
class CustomTabBar extends Component {
render() {
let navigation = this.props.navigation;
let router = this.props.router;
const { routes, index } = navigation.state;
return (
<View style={styles.tabContainer}>
<View style={styles.tab}>
<TouchableOpacity>
<Image source={require('./images/promos.png')} style={styles.icon}/>
<Text style={styles.tabText}>
Promo @'s
</Text>
</TouchableOpacity>
</View>
<View style={styles.tab}>
<TouchableOpacity>
<Image source={require('./images/vices.png')} style={styles.icon}/>
<Text style={styles.tabText}>
@Vice
</Text>
</TouchableOpacity>
</View>
<View style={{flex:1}}>
<TouchableOpacity>
<Image source={require('./images/button.png')} style={styles.button}/>
</TouchableOpacity>
</View>
<View style={styles.tab}>
<TouchableOpacity>
<Image source={require('./images/chat.png')} style={styles.icon}/>
<Text style={styles.tabText}>
Ch@t
</Text>
</TouchableOpacity>
</View>
<View style={styles.tab}>
<TouchableOpacity>
<Image source={require('./images/more.png')} style={styles.icon}/>
<Text style={styles.tabText}>
More
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
tabContainer: {
flexDirection: 'row',
backgroundColor: '#ffff',
borderWidth: 1,
borderColor: '#e1e1e1',
},
tab: {
flex:1,
height: 48,
marginTop: 10,
zIndex: 10
},
tabText: {
fontSize: 11,
fontWeight: '100',
color: '#848484',
alignSelf: 'center',
padding: 4
},
icon: {
height: 22,
width: 20,
alignSelf: 'center',
resizeMode: 'contain'
},
button: {
height: 65,
width: 65,
resizeMode: 'contain',
alignSelf: 'center',
...Platform.select({
ios: {
position: 'relative',
bottom: 12,
},
android: {
position: 'relative',
bottom: 12,
},
}),
}
});
export default CustomTabBar;
(Paste the link to an example project and exact instructions to reproduce the issue.)
Metadata
Metadata
Assignees
Labels
StaleThere has been a lack of activity on this issue and it may be closed soon.There has been a lack of activity on this issue and it may be closed soon.