Source: components/NotificationBadge.js

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;