├── .gitignore ├── README.md ├── demo.jpg ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | example/ 3 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Text Avatar 2 | Text avatar for the given string like gmail 3 | 4 | 5 | ### Installation 6 | 7 | ``` 8 | npm install react-native-text-avatar --save 9 | or 10 | yarn add react-native-text-avatar 11 | ``` 12 | 13 | ### Example Usage 14 | 15 | ```js 16 | John Doe 22 | ``` 23 | ### Configuration 24 | | Property | Type | Default | Description | Example | 25 | |:-:|:-:|:-:|:-:|:-:| 26 | | backgroundColor | string | '#333' | Container Background Color | '#ccc' | 27 | | textColor | string | '#fff' | Text Color | '#000' | 28 | | size | number | 60 | Avatar Size | 100 | 29 | | type | string | none | Type of Avatar Optional values are: circle, hexagon | 'circle' | 30 | -------------------------------------------------------------------------------- /demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicay/react-native-text-avatar/c32fb1a95df67cd4e64b6417cedb05de0190090d/demo.jpg -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { View, Text } from 'react-native' 3 | import initials from 'initials' 4 | 5 | // Copied from https://stackoverflow.com/a/1026087 6 | function capitalizeFirstLetter(string) { 7 | return string.charAt(0).toUpperCase() + string.slice(1); 8 | } 9 | 10 | class TextAvatar extends Component { 11 | constructor(props) { 12 | super(props) 13 | } 14 | 15 | render() { 16 | let { 17 | children, 18 | size = 60, 19 | backgroundColor = '#333', 20 | textColor = '#fff', 21 | type, 22 | style 23 | } = this.props 24 | 25 | if (typeof children !== 'string') throw new Error('Children must be only a string \n Ex: Technology') 26 | let abbr = initials(capitalizeFirstLetter(children)) 27 | 28 | if (typeof size !== 'number') throw new Error('Size must be an integer') 29 | 30 | let containerStyle = { 31 | width: size, 32 | height: size, 33 | backgroundColor: backgroundColor, 34 | alignItems: 'center', 35 | justifyContent: 'center', 36 | } 37 | let textStyle = { 38 | color: textColor, 39 | fontSize: size / 3.14, 40 | fontWeight: 'bold', 41 | letterSpacing: 1 42 | } 43 | 44 | // Hexagon style inspired from https://codedaily.io/tutorials/22/The-Shapes-of-React-Native 45 | let hexagon = { 46 | height: size / 2 47 | } 48 | 49 | let hexagonAfter = { 50 | position: 'absolute', 51 | bottom: - size / 3, 52 | left: 0, 53 | width: 0, 54 | height: 0, 55 | borderStyle: 'solid', 56 | borderLeftWidth: size / 2, 57 | borderLeftColor: 'transparent', 58 | borderRightWidth: size / 2, 59 | borderRightColor: 'transparent', 60 | borderTopWidth: size / 3, 61 | borderTopColor: backgroundColor 62 | } 63 | let hexagonBefore = { 64 | position: 'absolute', 65 | top: -size / 3, 66 | left: 0, 67 | width: 0, 68 | height: 0, 69 | borderStyle: 'solid', 70 | borderLeftWidth: size / 2, 71 | borderLeftColor: 'transparent', 72 | borderRightWidth: size / 2, 73 | borderRightColor: 'transparent', 74 | borderBottomWidth: size / 3, 75 | borderBottomColor: backgroundColor 76 | } 77 | if (type == 'circle'){ 78 | containerStyle.borderRadius = size / 2 79 | return ( 80 | 81 | {abbr} 83 | 84 | ); 85 | } 86 | else if(type == 'hexagon'){ 87 | return ( 88 | 89 | 90 | 91 | {abbr} 92 | 93 | ); 94 | } 95 | else { 96 | return ( 97 | 98 | {abbr} 100 | 101 | ); 102 | } 103 | } 104 | } 105 | 106 | export default TextAvatar; 107 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-text-avatar", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "initials": { 8 | "version": "3.0.0", 9 | "resolved": "https://registry.npmjs.org/initials/-/initials-3.0.0.tgz", 10 | "integrity": "sha512-yUmhaPDhOBzQQ3P+Fx6o/oHLmbKtbMQsXkaF8vEMtKk8EEaGYwza6NAl+hwUGufmVqTGfxNLS3tsCygKXxpdmQ==" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-text-avatar", 3 | "version": "1.0.7", 4 | "description": "React Native component for a text avatar", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "react-native", 11 | "react-native-component", 12 | "avatar", 13 | "text", 14 | "letter" 15 | ], 16 | "author": "Salih Çağlar İSPİRLİ ", 17 | "license": "ISC", 18 | "dependencies": { 19 | "initials": "^3.0.0" 20 | } 21 | } 22 | --------------------------------------------------------------------------------