react-native-dropdown-picker-plus/src/components/RenderBadgeItem.js

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.

import React, { memo, useCallback, useMemo } from 'react';

import { Text, TouchableOpacity, View } from 'react-native';

import { RTL_DIRECTION, RTL_STYLE } from '../constants';

function RenderBadge({
  rtl,
  label,
  props,
  value,
  textStyle,
  badgeStyle,
  badgeTextStyle,
  badgeDotStyle,
  getBadgeColor,
  getBadgeDotColor,
  showBadgeDot,
  onPress,
  THEME,
  allowFontScaling = false,
}) {
  /**
   * onPress.
   */
  const __onPress = useCallback(() => onPress(value), [onPress, value]);

  /**
   * The badge style.
   * @returns {object}
   */
  const _badgeStyle = useMemo(
    () => [
      RTL_DIRECTION(rtl, THEME.badgeStyle),
      ...[badgeStyle].flat(),
      {
        backgroundColor: getBadgeColor(value),
      },
    ],
    [THEME, rtl, badgeStyle, getBadgeColor],
  );

  /**
   * The badge dot style.
   * @returns {object}
   */
  const _badgeDotStyle = useMemo(
    () => [
      RTL_STYLE(rtl, THEME.badgeDotStyle),
      ...[badgeDotStyle].flat(),
      {
        backgroundColor: getBadgeDotColor(value),
      },
    ],
    [THEME, rtl, badgeDotStyle, getBadgeDotColor],
  );

  /**
   * The badge text style.
   * @returns {object}
   */
  const _badgeTextStyle = useMemo(
    () => [...[textStyle].flat(), ...[badgeTextStyle].flat()],
    [textStyle, badgeTextStyle],
  );

  return (
    <TouchableOpacity style={_badgeStyle} {...props} onPress={__onPress}>
      {showBadgeDot && <View style={_badgeDotStyle} />}
      <Text style={_badgeTextStyle} allowFontScaling={allowFontScaling}>
        {label}
      </Text>
    </TouchableOpacity>
  );
}

const areEqual = (nextProps, prevProps) => {
  if (nextProps.label !== prevProps.label) return false;
  if (nextProps.value !== prevProps.value) return false;
  if (nextProps.showBadgeDot !== prevProps.showBadgeDot) return false;
  if (nextProps.rtl !== prevProps.rtl) return false;
  if (nextProps.theme !== prevProps.theme) return false;

  return true;
};

export default memo(RenderBadge, areEqual);