Rename react-native-userpic -> react-native-avatar

Author: kolking

README.md

@@ -1,9 +1,9 @@
-# React Native Userpic
+# React Native Avatar
 
 <table>
 <tr>
 <td width="228">
-<img width="200" src="https://github.com/kolking/react-native-userpic/assets/4656448/877fbd1b-7040-41d4-a29b-80958b9b7cdd" />
+<img width="200" src="https://github.com/kolking/react-native-avatar/assets/4656448/877fbd1b-7040-41d4-a29b-80958b9b7cdd" />
 </td>
 <td>
 The ultimate React Native component for displaying user avatars written in TypeScript with a strong focus on performance. This fully featured and highly customizable component allows you to show Gravatar images by providing an email address, fallback to user's initials, fine-tune the shape and size of avatars, add badges and custom statuses to the avatar image.
@@ -13,42 +13,42 @@ The ultimate React Native component for displaying user avatars written in TypeS
 
 ---
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/53d8eec3-6685-4b6b-9d85-261e7f391b11" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/53d8eec3-6685-4b6b-9d85-261e7f391b11" />
 
 **Control the shape of the avatars**  
 The default circular shape can be changed by specifying a custom border radius. The `style` prop enables you to override the default styles.
 
 ---
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/d7a4a923-fb79-4734-8092-7531835876ce" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/d7a4a923-fb79-4734-8092-7531835876ce" />
 
 **Custom fallback image or emoji**  
 For users without an image, you have the option to display the default avatar icon, provide a custom fallback image, or even show an emoji.
 
 ---
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/de5dfe87-37ba-49ad-ba73-1e7828c06468" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/de5dfe87-37ba-49ad-ba73-1e7828c06468" />
 
 **Fallback to user's initials**  
 Another option for users without an image is to display their initials. By enabling the `colorize` option, unique color can be generated based on the user's name.
 
 ---
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/06e2e2e6-10f7-420e-a381-3f2fd154b82a" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/06e2e2e6-10f7-420e-a381-3f2fd154b82a" />
 
 **Gravatar support**  
 Include the user's email address to display their Gravatar image. This can be combined with your own avatar image to provide a fallback option.
 
 ---
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/91f3bab9-f1cd-4d4d-9965-967ca524f484" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/91f3bab9-f1cd-4d4d-9965-967ca524f484" />
 
 **Numeric badges**  
 You can add a badge to display the count of unread messages or the online/offline status of the user. The position of the badge can also be customized.
 
 ---
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/9b7a07b9-b988-492c-b9d0-e74e3e3208ed" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/9b7a07b9-b988-492c-b9d0-e74e3e3208ed" />
 
 **Custom badges**  
 Another option for utilizing avatar badges is to display a custom status icon, such as an emoji, for example.
@@ -59,23 +59,23 @@ Another option for utilizing avatar badges is to display a custom status icon, s
 
 ### yarn
 ```sh
-yarn add react-native-userpic
+yarn add @kolking/react-native-avatar
 ```
 ### npm
 ```sh
-npm install react-native-userpic
+npm install @kolking/react-native-avatar
 ```
 
 ## Basic Example
 
 ```jsx
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Userpic } from 'react-native-userpic';
+import { Avatar } from '@kolking/react-native-avatar';
 
 const MyComponent = ({ userImage, userEmail }) => (
   <View style={styles.wrapper}>
-    <Userpic source={{ uri: userImage }} email={userEmail} />
+    <Avatar source={{ uri: userImage }} email={userEmail} />
   </View>
 );
 
@@ -95,7 +95,7 @@ export default MyComponent;
 ```jsx
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Userpic } from 'react-native-userpic';
+import { Avatar } from '@kolking/react-native-avatar';
 
 const defaultImage = require('./assets/defaultAvatar.png');
 const badgeProps = {
@@ -106,7 +106,7 @@ const badgeProps = {
 
 const MyComponent = ({ userImage, userEmail, userName, unreadCount }) => (
   <View style={styles.wrapper}>
-    <Userpic
+    <Avatar
       size={60}
       defaultSource={defaultImage}
       source={{ uri: userImage }}
@@ -152,7 +152,7 @@ Prop | Type | Default | Description
 
 ## Badge Component
 
-<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/6ee48b43-d2ac-40bb-ab21-152a93637e4a" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-avatar/assets/4656448/6ee48b43-d2ac-40bb-ab21-152a93637e4a" />
 
 The badge can be used as a standalone component. The font size of the badge text value is calculated based on the `size` prop, so you normally don't have to specify it. By default, the badge appears with a spring animation, which can be disabled using the `animate` prop. To position the badge absolutely over its parent, use the `position` prop along with the `parentRadius` prop.
 
@@ -161,7 +161,7 @@ The badge can be used as a standalone component. The font size of the badge text
 ```jsx
 import React, { useState } from 'react';
 import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
-import { Badge } from 'react-native-userpic';
+import { Badge } from '@kolking/react-native-avatar';
 
 const MyComponent = () => {
   const [badge, setBadge] = useState(0);
@@ -225,7 +225,7 @@ Prop | Type | Default | Description
 
 ## Feedback
 
-I appreciate your feedback, so please star the repository if you like it. This is the best motivation for me to maintain the package and add new features. If you have any feature requests, found a bug, or have ideas for improvement, feel free to [open an issue](https://github.com/kolking/react-native-userpic/issues).
+I appreciate your feedback, so please star the repository if you like it. This is the best motivation for me to maintain the package and add new features. If you have any feature requests, found a bug, or have ideas for improvement, feel free to [open an issue](https://github.com/kolking/react-native-avatar/issues).
 
 ## License
 

example/App.tsx

@@ -8,7 +8,7 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-import { Badge, Userpic, UserpicProps } from 'react-native-userpic';
+import { Badge, Avatar, AvatarProps } from '@kolking/react-native-avatar';
 
 StatusBar.setBarStyle('light-content');
 
@@ -50,61 +50,61 @@ const App = () => {
     <View style={styles.container}>
       <View style={styles.row}>
         <Text style={styles.label}>Shape</Text>
-        <Userpic radius={0} />
-        <Userpic radius={15} />
-        <Userpic />
+        <Avatar radius={0} />
+        <Avatar radius={15} />
+        <Avatar />
       </View>
       <View style={styles.row}>
         <Text style={styles.label} onPress={toggleBadImage}>
           No image
         </Text>
-        <Userpic source={badImage} />
-        <Userpic defaultSource={require('./assets/custom.png')} />
-        <Userpic name="👩" />
+        <Avatar source={badImage} />
+        <Avatar defaultSource={require('./assets/custom.png')} />
+        <Avatar name="👩" />
       </View>
       <View style={styles.row}>
         <Text style={styles.label}>Initials</Text>
-        <Userpic name="Nick" color="gray" />
-        <Userpic name="Jason Smith" colorize={true} />
-        <Userpic name="Emma Miller" email="[email protected]" colorize={true} />
+        <Avatar name="Nick" color="gray" />
+        <Avatar name="Jason Smith" colorize={true} />
+        <Avatar name="Emma Miller" email="[email protected]" colorize={true} />
       </View>
       <View style={styles.row}>
         <Text style={styles.label} onPress={toggleImage}>
           Image
         </Text>
-        <Userpic source={IMAGES[image]} />
-        <Userpic source={IMAGES[3]} />
-        <Userpic source={IMAGES[6]} />
+        <Avatar source={IMAGES[image]} />
+        <Avatar source={IMAGES[3]} />
+        <Avatar source={IMAGES[6]} />
       </View>
       <View style={styles.row}>
         <Text style={styles.label}>Gravatar</Text>
-        <Userpic radius={10} email="[email protected]" />
-        <Userpic radius={10} email="[email protected]" />
-        <Userpic radius={10} email="[email protected]" />
+        <Avatar radius={10} email="[email protected]" />
+        <Avatar radius={10} email="[email protected]" />
+        <Avatar radius={10} email="[email protected]" />
       </View>
       <View style={styles.row}>
         <Text style={styles.label} onPress={toggleBadge}>
           Badge
         </Text>
-        <Userpic email="[email protected]" badge={!!badge} badgeColor="#34c759" />
-        <Userpic radius={15} email="[email protected]" badge={badge} badgeColor="#007aff" />
-        <Userpic
+        <Avatar email="[email protected]" badge={!!badge} badgeColor="#34c759" />
+        <Avatar radius={15} email="[email protected]" badge={badge} badgeColor="#007aff" />
+        <Avatar
           radius={10}
           email="[email protected]"
           badge={badge ? badge + 100 : undefined}
         />
       </View>
       <View style={styles.row}>
         <Text style={styles.label}>Status</Text>
-        <Userpic email="[email protected]" badge="👋" badgeProps={statusBadgeProps} />
-        <Userpic email="[email protected]" badge="😀" badgeProps={statusBadgeProps} />
-        <Userpic email="[email protected]" badge="🐵" badgeProps={statusBadgeProps} />
+        <Avatar email="[email protected]" badge="👋" badgeProps={statusBadgeProps} />
+        <Avatar email="[email protected]" badge="😀" badgeProps={statusBadgeProps} />
+        <Avatar email="[email protected]" badge="🐵" badgeProps={statusBadgeProps} />
       </View>
       <View style={styles.row}>
         <Text style={styles.label}>Size</Text>
-        <Userpic radius={8} size={30} email="[email protected]" />
-        <Userpic radius={12} size={50} email="[email protected]" />
-        <Userpic radius={18} size={75} email="[email protected]" />
+        <Avatar radius={8} size={30} email="[email protected]" />
+        <Avatar radius={12} size={50} email="[email protected]" />
+        <Avatar radius={18} size={75} email="[email protected]" />
       </View>
       <TouchableHighlight
         style={styles.button}
@@ -165,7 +165,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const statusBadgeProps: UserpicProps['badgeProps'] = {
+const statusBadgeProps: AvatarProps['badgeProps'] = {
   size: 22,
   position: 'bottom-right',
   style: styles.badgeStyle,

example/App2.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
-import { Userpic, UserpicProps } from 'react-native-userpic';
+import { Avatar, AvatarProps } from '@kolking/react-native-avatar';
 
-const badgeProps: UserpicProps[] = [
+const badgeProps: AvatarProps[] = [
   {
     defaultSource: require('./assets/custom.png'),
   },
@@ -79,7 +79,7 @@ const App = () => {
   return (
     <View style={styles.wrapper}>
       <Pressable onPress={toggleProps}>
-        <Userpic size={100} color="#636366" {...badgeProps[props]} />
+        <Avatar size={100} color="#636366" {...badgeProps[props]} />
       </Pressable>
     </View>
   );

package.json

@@ -1,16 +1,16 @@
 {
-  "name": "react-native-userpic",
+  "name": "@kolking/react-native-avatar",
   "version": "2.0.3",
   "description": "Display user avatars in React Native like a pro with support for Gravatar, user initials, unique colors, badges, statuses, and more.",
   "author": "Nick Seryakov (https://github.com/kolking)",
   "license": "MIT",
-  "homepage": "https://github.com/kolking/react-native-userpic#readme",
+  "homepage": "https://github.com/kolking/react-native-avatar#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://[email protected]/kolking/react-native-userpic.git"
+    "url": "git+https://[email protected]/kolking/react-native-avatar.git"
   },
   "bugs": {
-    "url": "https://github.com/kolking/react-native-userpic/issues"
+    "url": "https://github.com/kolking/react-native-avatar/issues"
   },
   "keywords": [
     "react-native",
@@ -19,6 +19,7 @@
     "userpic",
     "avatar",
     "gravatar",
+    "avatar image",
     "user picture",
     "user image",
     "user avatar",

src/Userpic.tsx src/Avatar.tsx

@@ -33,7 +33,7 @@ export interface Props extends ViewProps {
   badgeProps?: Omit<BadgeProps, 'value' | 'color' | 'parentRadius'>;
 }
 
-const Userpic = ({
+const Avatar = ({
   size = 50,
   name,
   email,
@@ -64,7 +64,7 @@ const Userpic = ({
     setImageSource(defaultSource);
   }, [defaultSource]);
 
-  // debug('RENDER <Userpic>', name || email || imageSource);
+  // debug('RENDER <Avatar>', name || email || imageSource);
 
   return (
     <View {...props} style={[styles.root, { width: size, height: size }]}>
@@ -108,4 +108,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default React.memo(Userpic);
+export default React.memo(Avatar);

src/__tests__/Userpic.tsx src/__tests__/Avatar.tsx

@@ -7,12 +7,12 @@ import TestRenderer, { act } from 'react-test-renderer';
 /**
  * Under test
  */
-import { Userpic, UserpicProps } from '../';
+import { Avatar, AvatarProps } from '../';
 import { getGravatarSource, getInitials, getStringColor } from '../helpers';
 
-const createElement = (props: Partial<UserpicProps>) => <Userpic {...props} />;
+const createElement = (props: Partial<AvatarProps>) => <Avatar {...props} />;
 
-const createRenderer = (props: Partial<UserpicProps>) => TestRenderer.create(createElement(props));
+const createRenderer = (props: Partial<AvatarProps>) => TestRenderer.create(createElement(props));
 
 it('should match snapshot', () => {
   expect(createRenderer({ badge: 35 })).toMatchSnapshot();

src/__tests__/__snapshots__/Userpic.tsx.snap src/__tests__/__snapshots__/Avatar.tsx.snap

@@ -1,4 +1,4 @@
 export { default as Badge } from './Badge';
-export { default as Userpic } from './Userpic';
+export { default as Avatar } from './Avatar';
 export type { Props as BadgeProps } from './Badge';
-export type { Props as UserpicProps } from './Userpic';
+export type { Props as AvatarProps } from './Avatar';

src/index.tsx

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "react-native-userpic": ["./src/index"]
+      "@kolking/react-native-avatar": ["./src/index"]
     }
   }
 }