diff --git a/README.md b/README.md index 9a757b4..f0bd271 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# React Native Userpic +# React Native Avatar
- + 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 --- - + **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. --- - + **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. --- - + **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. --- - + **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. --- - + **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. --- - + **Custom badges** Another option for utilizing avatar badges is to display a custom status icon, such as an emoji, for example. @@ -59,11 +59,11 @@ 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 @@ -71,11 +71,11 @@ npm install react-native-userpic ```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 }) => ( - + ); @@ -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 }) => ( - + 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 diff --git a/example/App.tsx b/example/App.tsx index 4fa7e39..c4f483e 100644 --- a/example/App.tsx +++ b/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,45 +50,45 @@ const App = () => { Shape - - - + + + No image - - - + + + Initials - - - + + + Image - - - + + + Gravatar - - - + + + Badge - - - + + { Status - - - + + + Size - - - + + + { return ( - + ); diff --git a/package.json b/package.json index fc06ffa..741fc64 100644 --- a/package.json +++ b/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://kolking@github.com/kolking/react-native-userpic.git" + "url": "git+https://kolking@github.com/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", diff --git a/src/Userpic.tsx b/src/Avatar.tsx similarity index 95% rename from src/Userpic.tsx rename to src/Avatar.tsx index 7a8ee56..19cb546 100644 --- a/src/Userpic.tsx +++ b/src/Avatar.tsx @@ -33,7 +33,7 @@ export interface Props extends ViewProps { badgeProps?: Omit; } -const Userpic = ({ +const Avatar = ({ size = 50, name, email, @@ -64,7 +64,7 @@ const Userpic = ({ setImageSource(defaultSource); }, [defaultSource]); - // debug('RENDER ', name || email || imageSource); + // debug('RENDER ', name || email || imageSource); return ( @@ -108,4 +108,4 @@ const styles = StyleSheet.create({ }, }); -export default React.memo(Userpic); +export default React.memo(Avatar); diff --git a/src/__tests__/Userpic.tsx b/src/__tests__/Avatar.tsx similarity index 95% rename from src/__tests__/Userpic.tsx rename to src/__tests__/Avatar.tsx index 377041e..ab1e3d2 100644 --- a/src/__tests__/Userpic.tsx +++ b/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) => ; +const createElement = (props: Partial) => ; -const createRenderer = (props: Partial) => TestRenderer.create(createElement(props)); +const createRenderer = (props: Partial) => TestRenderer.create(createElement(props)); it('should match snapshot', () => { expect(createRenderer({ badge: 35 })).toMatchSnapshot(); diff --git a/src/__tests__/__snapshots__/Userpic.tsx.snap b/src/__tests__/__snapshots__/Avatar.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Userpic.tsx.snap rename to src/__tests__/__snapshots__/Avatar.tsx.snap diff --git a/src/index.tsx b/src/index.tsx index c573dca..07345e0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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'; diff --git a/tsconfig.json b/tsconfig.json index d0d6aa8..8a81702 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "compilerOptions": { "baseUrl": "./", "paths": { - "react-native-userpic": ["./src/index"] + "@kolking/react-native-avatar": ["./src/index"] } } }