Reputation: 6133
It seems to be as if I need to use some extra css in order to achieve what you will see below:
I already have this component:
renderTabBar = props => (
<View style={tabViewStyles.tabBar}>
{props.navigationState.routes.map((route, i) => {
return (
<TouchableOpacity
key={route.key}
style={[
tabViewStyles.tabItem,
tabViewStyles.tabStyle,
tabViewStyles[`tabStyle_${i}`],
]}
onPress={() => this.setState({ index: i })}
>
<Text style={{ color: '#ffffff', fontFamily: 'montserratBold' }}>
{route.title}
</Text>
</TouchableOpacity>
);
})}
</View>
);
With this css on StyleSheet:
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
paddingTop: Constants.statusBarHeight,
},
onWhite: {
color: globalStyles.whiteColor.color,
backgroundColor: globalStyles.whiteColor.backgroundColor,
},
bolderFont: {
fontFamily: 'montserratBold',
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 26,
},
tabStyle: {
marginHorizontal: 10,
marginTop: 20,
borderRadius: 2,
},
tabStyle_0: {
backgroundColor: '#ff5252',
},
tabStyle_1: {
backgroundColor: '#3da7dc',
},
});
So I am still missing the pointy part of the tab.
What else do I need to do?
Upvotes: 1
Views: 2224
Reputation: 1228
You can use rotate
property of Transforms as described here.
Minimal example:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<View style={{width:50,height:50,backgroundColor:'green'}}></View>
<View style={{transform:[{rotateZ:'45deg'}],width:8,height:8,backgroundColor:'green',marginTop:-4}}></View>
</View>
Snack example here
Upvotes: 3
Reputation: 148
If you want a pure styled solution and not an image you could do the following:
const triangle = {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 50,
borderRightWidth: 50,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#ff5252',
transform: [
{rotate: '180deg'}
]
}
const Triangle = React.createClass({
render: function() {
return (
<View style={[triangle, this.props.style]} />
)
}
})
Modified from https://codedaily.io/tutorials/22/The-Shapes-of-React-Native.
Upvotes: 1