import React from 'react';
import { useSelector } from 'react-redux';
import { StyleSheet, View, Text } from 'react-native';
/**
* Component to show number of new ads and todo's.
* Imported in MainNavigator.js.
* @param {properties} props contains type and style.
* @memberof module:Components
* @example
* return(
* <NotificationBadge
* type="ads"
* customStyle={{ marginTop: 16, marginRight: 10 }}
* />
* )
*/
const NotificationBadge = props => {
const { type, customStyle } = props;
let badgeNumber;
if (type === 'ads') {
badgeNumber = useSelector(state => state.init.numbOfNewAds);
} else {
badgeNumber = useSelector(state => state.init.numbOfNewTodo);
}
if (badgeNumber > 0) {
return (
<View style={[styles.badge, customStyle]}>
<Text style={styles.text}>{badgeNumber}</Text>
</View>
);
}
return null;
};
const styles = StyleSheet.create({
badge: {
position: 'absolute',
top: -4,
right: -4,
backgroundColor: 'red',
borderRadius: 10,
borderWidth: 1,
borderColor: 'red',
marginTop: 0,
marginRight: 0
},
text: {
color: 'white',
marginHorizontal: 4,
marginVertical: 0.5
}
});
export default NotificationBadge;