react-native-cos-round-component-capital-letter/index.js

This is a simple Round Component with random background color and capital letter inside for react-native

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';

export const RoundCapitalLetter = props => {
  const colors = ['red', 'blue', 'yellow', 'green'];

  const {
    text,
    size,
    textColor,
    textSize,
    colorsList,
    letterColor,
    imageSrc,
    imageSize,
  } = props;

  const styled = {
    height: size,
    width: size,
    backgroundColor: colorsList
      ? colorsList[Math.floor(Math.random() * colorsList.length)]
      : colors[Math.floor(Math.random() * colors.length)],
  };

  const associatedColor = {
    height: size,
    width: size,
    backgroundColor: ltColor(text),
  };

  const textStyle = {
    color: textColor ? textColor : 'white',
    fontSize: textSize ? textSize : 12,
  };

  if (imageSrc) {
    return <Image style={{height: imageSize, width: imageSize}} source={imageSrc} />;
  } else {
    return (
      <View
        style={[styles.mainContainer, letterColor ? associatedColor : styled]}>
        <Text style={textStyle}>{text.slice(0, 1).toUpperCase()}</Text>
      </View>
    );
  }
};

export default RoundCapitalLetter;

const ltColor = text => {
  const textColor = text.slice(0, 1).toUpperCase();
  switch (textColor) {
    case 'A': {
      return '#ff7272';
    }
    case 'B': {
      return '#688aff';
    }
    case 'C': {
      return '#ffcb7f';
    }
    case 'D': {
      return '#0054e1';
    }
    case 'E': {
      return '#6ddfd0';
    }
    case 'F': {
      return '#0f829c';
    }
    case 'G': {
      return '#fcefef';
    }
    case 'H': {
      return '#a4e252';
    }
    case 'I': {
      return '#bec7dc';
    }
    case 'J': {
      return '#b3b7c0';
    }
    case 'K': {
      return '#fcada7';
    }
    case 'L': {
      return '#dd8fe9';
    }
    case 'M': {
      return '#61d3c9';
    }
    case 'N': {
      return '#cd7df7';
    }
    case 'O': {
      return '#ff8375';
    }
    case 'P': {
      return '#34a6b1';
    }
    case 'R': {
      return '#ffab7b';
    }
    case 'S': {
      return '#358d5c';
    }
    case 'T': {
      return '#8d3574';
    }
    case 'Y': {
      return '#d812b4';
    }
    case 'U': {
      return '#7fdcc7';
    }
    case 'W': {
      return '#1275d8';
    }
    case 'Q': {
      return '#d85112';
    }
    case 'Z': {
      return '#d8ac12';
    }
    case 'X': {
      return '#75f0ff';
    }
    default: {
      return '#0f829c';
    }
  }
};

const styles = StyleSheet.create({
  mainContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50,
  },
});