30 lines
912 B
JavaScript
30 lines
912 B
JavaScript
import React,{Component} from "react"
|
|
import {Text,View} from "react-native"
|
|
import Icon from "react-native-vector-icons/MaterialIcons";
|
|
|
|
|
|
export default class IconWithBadge extends React.Component {
|
|
render() {
|
|
const { name, badgeCount, color, size } = this.props;
|
|
return (
|
|
<View style={{ width: size*3/2, height: size*3/2, margin: 5 }}>
|
|
<Icon name={name} size={size} color={color} />
|
|
{ badgeCount > 0 && (
|
|
<View style={{
|
|
position: 'absolute',
|
|
right: -6,
|
|
top: -3,
|
|
backgroundColor: 'red',
|
|
borderRadius: size*4/5,
|
|
width: size*3/5,
|
|
height: size*3/5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{badgeCount}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
} |