├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── index.d.ts ├── package.json ├── src └── index.tsx ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | /.idea/ 3 | /dist/ 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | jest.config.jest 3 | .prettierrc 4 | .babelrc 5 | .gitignore 6 | 7 | yarn-error.log 8 | yarn.lock 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 IDT Labs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Material Initials 2 | 3 | ![react-native-material-initials](https://cloud.githubusercontent.com/assets/5383963/16163426/20d1c50c-34a7-11e6-9b4c-eebea5f5831b.png) 4 | 5 | ## Usage 6 | ```JavaScript 7 | 15 | ``` 16 | 17 | ## Installation 18 | ``` 19 | $ npm install --save react-native-material-initials 20 | ``` 21 | 22 | ## React Native 23 | ```JavaScript 24 | import MaterialInitials from 'react-native-material-initials'; 25 | ``` 26 | 27 | ## Props 28 | |Key |Type |Description | 29 | |--- |--- |--- | 30 | |`text`|String|The text to use to make initials| 31 | |`size`|Number|The pixel height / width of the icon| 32 | |`color`|String|Override the text color with any valid CSS color value| 33 | |`single`|Boolean|Whether to only use a single initial or two| 34 | |`backgroundColor`|String|Override the background color with any valid CSS color value| 35 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface NativeIniticonProps { 4 | text: string, 5 | size:number 6 | color?: string, 7 | backgroundColor?: string, 8 | single?: boolean 9 | } 10 | 11 | declare const NativeIniticon: React.Component 12 | 13 | export default NativeIniticon 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-material-initials", 3 | "version": "1.0.0", 4 | "description": "React Native library to generate Google Inbox style material list icons.", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.ts", 7 | "scripts": { 8 | "build": "rm -rf dist && tsc", 9 | "prepare": "yarn build" 10 | }, 11 | "author": { 12 | "name": "IDT Labs", 13 | "email": "apisupport@idt.net" 14 | }, 15 | "contributors": [ 16 | { 17 | "name": "Aryeh Stiefel", 18 | "email": "aryeh.stiefel@idt.net" 19 | }, 20 | { 21 | "name": "Filip Woźniczak", 22 | "email": "filip.wozniczak@idt.net" 23 | } 24 | ], 25 | "devDependencies": { 26 | "@types/react": "^16.9.11", 27 | "@types/react-native": "^0.60.22", 28 | "typescript": "^3.6.4" 29 | }, 30 | "peerDependencies": { 31 | "react": "^16.8.x", 32 | "react-native": "^0.60.x" 33 | }, 34 | "keywords": [ 35 | "react-native", 36 | "avatar", 37 | "material", 38 | "initials", 39 | "icon" 40 | ], 41 | "repository": { 42 | "type": "git", 43 | "url": "git+https://github.com/IDTLabs/react-native-material-initials" 44 | }, 45 | "bugs": { 46 | "url": "https://github.com/IDTLabs/react-native-material-initials/issues" 47 | }, 48 | "homepage": "https://github.com/IDTLabs/react-native-material-initials#readme" 49 | } 50 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import {StyleSheet, Text, View, ViewStyle} from 'react-native'; 3 | 4 | interface Props { 5 | text: string, 6 | size: number, 7 | color: string, 8 | backgroundColor: string, 9 | single?: boolean 10 | style?: ViewStyle 11 | } 12 | 13 | const MaterialInitials: React.FC = 14 | ({ 15 | text, 16 | size, 17 | color, 18 | backgroundColor, 19 | single, 20 | style 21 | }) => { 22 | 23 | const getFontSize = () => { 24 | return single ? (size) / 1.7 : (size - 5) / 2 25 | } 26 | 27 | const getInitials = () => { 28 | if ( text === '') { 29 | return text; 30 | } else { 31 | let symbols = text.trim(); 32 | let indexOfSpace = symbols.indexOf(' '); 33 | if ((indexOfSpace > 0) && (indexOfSpace < symbols.length) && !single) { 34 | return (symbols[0] + symbols[indexOfSpace + 1]).toUpperCase(); 35 | } else { 36 | return symbols[0].toUpperCase(); 37 | } 38 | } 39 | } 40 | 41 | return ( 42 | 43 | 51 | {getInitials()} 56 | 57 | 58 | ) 59 | } 60 | 61 | 62 | const styles = StyleSheet.create({ 63 | icon: { 64 | justifyContent: 'center', 65 | alignItems: 'center', 66 | backgroundColor: 'transparent', 67 | }, 68 | text: { 69 | color: '#fff' 70 | } 71 | }); 72 | 73 | export default MaterialInitials 74 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "target": "es5", 5 | "lib": ["es5", "es6", "es7", "es2017", "dom"], 6 | "sourceMap": true, 7 | "allowJs": false, 8 | "jsx": "react-native", 9 | "esModuleInterop": true, 10 | "moduleResolution": "node", 11 | "skipLibCheck": true, 12 | "rootDirs": ["src", "stories"], 13 | "baseUrl": "src", 14 | "forceConsistentCasingInFileNames": true, 15 | "noImplicitReturns": true, 16 | "noImplicitThis": true, 17 | "noImplicitAny": true, 18 | "strictNullChecks": true, 19 | "suppressImplicitAnyIndexErrors": true, 20 | "noUnusedLocals": true, 21 | "declaration": true, 22 | "allowSyntheticDefaultImports": true, 23 | "experimentalDecorators": true, 24 | "emitDecoratorMetadata": true 25 | }, 26 | "include": ["src/**/*"], 27 | "exclude": ["node_modules", "build", "scripts"] 28 | } 29 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@types/prop-types@*": 6 | version "15.7.3" 7 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" 8 | integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== 9 | 10 | "@types/react-native@^0.60.22": 11 | version "0.60.31" 12 | resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.31.tgz#a7af12197f884ad8dd22cda2df9862ed72973ded" 13 | integrity sha512-Y0Q+nv50KHnLL+jM0UH68gQQv7Wt6v2KuNepiHKwK1DoWGVd1oYun/GJCnvUje+/V8pMQQWW6QuBvHZz1pV7tQ== 14 | dependencies: 15 | "@types/prop-types" "*" 16 | "@types/react" "*" 17 | 18 | "@types/react@*": 19 | version "17.0.0" 20 | resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8" 21 | integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw== 22 | dependencies: 23 | "@types/prop-types" "*" 24 | csstype "^3.0.2" 25 | 26 | "@types/react@^16.9.11": 27 | version "16.14.2" 28 | resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c" 29 | integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ== 30 | dependencies: 31 | "@types/prop-types" "*" 32 | csstype "^3.0.2" 33 | 34 | csstype@^3.0.2: 35 | version "3.0.5" 36 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8" 37 | integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ== 38 | 39 | typescript@^3.6.4: 40 | version "3.9.7" 41 | resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" 42 | integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== 43 | --------------------------------------------------------------------------------