kolking · kolking · Jun 26, 2023 · Jun 25, 2023 · Jun 25, 2023 · Jun 25, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,16 +1,5 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        '@typescript-eslint/no-shadow': ['error'],
-        'no-shadow': 'off',
-        'no-undef': 'off',
-      },
-    },
-  ],
+  extends: '@react-native',
+  ignorePatterns: ['/coverage/*'],
 };
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,3 @@
 coverage/
 example/
-demo/
+demo/
diff --git a/README.md b/README.md
@@ -1,60 +1,67 @@
 # React Native Userpic
 
-Full featured and highly customizable React Native component to display user avatars. The component allows you to show gravatar images, fallback to user's initials, fine tune shape and size, add badges and custom statuses to avatar image.
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/877fbd1b-7040-41d4-a29b-80958b9b7cdd" />      
+
+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.
+
+<br clear="both" />
 
 ---
 
-<img width="200" align="left" src="https://user-images.githubusercontent.com/4656448/173195684-55d89be7-7037-4050-a5e3-6beb85b38b7b.png" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/53d8eec3-6685-4b6b-9d85-261e7f391b11" />
 
-**Shape that fits your design**  
-Square, circle, rounded borders. For your convenience, the `borderRadius` prop supports percent values just like in CSS.
+**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, such as adding a border.
 
 ---
 
-<img width="200" align="left" src="https://user-images.githubusercontent.com/4656448/173195937-eb636936-181d-4acb-b404-c851ddeb9d1a.png" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/d7a4a923-fb79-4734-8092-7531835876ce" />
 
-**Custom fallback image or even emoji**  
-For users without an image you can leave the default profile icon, or use your own fallback image, or even show an emoji.
+**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://user-images.githubusercontent.com/4656448/173196145-b06e448d-b31b-4df9-a751-d2c6d84600a4.png" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/de5dfe87-37ba-49ad-ba73-1e7828c06468" />
 
 **Fallback to user's initials**  
-Another option for those who have no image is to display their initials. The `colorize` option will generate unique colors based on user's name.
+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://user-images.githubusercontent.com/4656448/173196152-2b0dc063-443c-4910-bc42-2f7b11e85761.png" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/06e2e2e6-10f7-420e-a381-3f2fd154b82a" />
 
 **Gravatar support**  
-Add user's email address to display their gravatar image. This can be combined with your own avatar images as a fallback option.
+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://user-images.githubusercontent.com/4656448/173196169-4fda6644-49e0-4ef8-8eb2-5682a36dd48a.png" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/91f3bab9-f1cd-4d4d-9965-967ca524f484" />
 
 **Numeric badges**  
-You can add a badge to display unread messages count, or user's online/offline status. Badge position can be customized as well.
+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://user-images.githubusercontent.com/4656448/173196176-51a670e3-9d4c-4102-8c5e-460c51bb6853.png" />
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/9b7a07b9-b988-492c-b9d0-e74e3e3208ed" />
 
 **Custom badges**  
-Another way of using badges is allowing your users to attach a status icon to their avatar by picking up an emoji.
+Another option for utilizing avatar badges is to display a custom status icon, such as an emoji, for example.
 
 ---
 
 ## Installation
 
+### yarn
 ```sh
 yarn add react-native-userpic
-# or
+```
+### npm
+```sh
 npm install react-native-userpic
 ```
 
-## Usage
+## Basic Example
 
 ```jsx
 import React from 'react';
@@ -78,7 +85,7 @@ const styles = StyleSheet.create({
 export default MyComponent;
 ```
 
-## Advanced example
+## Advanced Example
 
 ```jsx
 import React from 'react';
@@ -87,21 +94,22 @@ import { Userpic } from 'react-native-userpic';
 
 const defaultImage = require('./assets/defaultAvatar.png');
 const badgeProps = {
-  size: 30,
-  borderRadius: 5,
+  size: 24,
+  radius: 5,
+  position: 'top-left',
 }
 
-const MyComponent = ({ userImage, userEmail, userName }) => (
+const MyComponent = ({ userImage, userEmail, userName, unreadCount }) => (
   <View style={styles.wrapper}>
     <Userpic
-      size={75}
+      size={60}
       defaultSource={defaultImage}
       source={{ uri: userImage }}
       email={userEmail}
       name={userName}
       colorize={true}
-      borderRadius="25%"
-      badge={35}
+      radius={20}
+      badge={unreadCount}
       badgeColor="#007aff"
       badgeProps={badgeProps}
     />
@@ -123,60 +131,97 @@ export default MyComponent;
 
 Prop | Type | Default | Description
 ---|---|---|---
-`size` | number | 50 | Size of the image
-`borderRadius` | number \| string | '50%' | In addition to a number you can use percentage strings "0%...50%" where "50%" creates circle shape
-`name` | string | | User name for showing initials when no image provided
-`email` | string | | User email for showing their gravatar image
-`colorize` | boolean | false | This will generate a unique color when showing initials
-`source` | ImageSourcePropType | | The image source (either a remote URL or a local file resource)
+`size` | number | `50` | Width and height of the avatar
+`name` | string | | User name for showing initials
+`email` | string | | User email for showing Gravatar image
+`source` | ImageSourcePropType | | The avatar image source (either a remote URL or a local file resource)
 `defaultSource` | ImageSourcePropType | | The fallback image source
-`style` | ViewStyle | | Style of the container
-`textStyle` | TextStyle | | Style of the initials text
-`imageStyle` | ImageStyle | | Style of the image
-`badge` | number \| boolean \| string | | A number or string value to show in the badge, passing `true` will show a color dot
-`badgeColor` | string | | Color of the badge
-`badgePosition` | string | 'top-right' | Possible values are `top-right`, `bottom-right`, `bottom-left`, `top-left'`
-`badgeProps` | BadgeProps | | See [badge props](#badge-props) below
+`color` | string | `#aeaeb2` | Background color of the avatar
+`radius` | number | `size / 2` | Border radius of the avatar
+`colorize` | boolean | `false` | To generate a unique background color when displaying initials
+`style` | ViewStyle | | Style object applied to the image or initials container
+`textStyle` | TextStyle | | Style object applied to the initials text
+`badge` | number \| string \| boolean | | A number or string value to show in the badge, or `true` to display a color dot
+`badgeColor` | string | | Background color of the badge
+`badgeProps` | BadgeProps | | [Badge props](#badge-props) excluding `value`, `color`, and `parentRadius`
+
+## Badge Component
 
-## Badge
+<img width="200" align="left" src="https://github.com/kolking/react-native-userpic/assets/4656448/6ee48b43-d2ac-40bb-ab21-152a93637e4a" />
 
-You can also use the badge as a stand-alone component.
+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.
+
+<br clear="both" />
 
 ```jsx
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
 import { Badge } from 'react-native-userpic';
 
-const MyComponent = ({ count }) => (
-  <View style={styles.wrapper}>
-    <Badge value={count} color="#34c759" size={30} animate={false} />
-  </View>
-);
+const MyComponent = () => {
+  const [badge, setBadge] = useState(0);
+
+  return (
+    <View style={styles.wrapper}>
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#00849C"
+        onPress={() => setBadge(badge + 1)}
+      >
+        <>
+          <Text style={styles.buttonText}>Press me</Text>
+          <Badge value={badge} position="top-right" parentRadius={styles.button.borderRadius} />
+        </>
+      </TouchableHighlight>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  button: {
+    width: 200,
+    height: 44,
+    marginTop: 20,
+    borderRadius: 22,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#2FAFC7',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 17,
+    fontWeight: '600',
+  },
 });
 
 export default MyComponent;
 ```
 
-## Badge props
+## Badge Props
 
 Prop | Type | Default | Description
 ---|---|---|---
-`size` | number | 20 | Size (height) of the badge
-`color` | string | '#ff3b30' | Background color of the badge
-`borderRadius` | number \| string | '50%' | In addition to a number you can use percentage strings "0%...50%" where "50%" creates a circle or pill shape
-`animate` | boolean | true | When `true`, the badge will appear with a spring animation
-`value` | number \| boolean \| string | | A number or string value to show in the badge, passing `true` will show a color dot
-`limit` | number \| boolean | 99 | Will show "99+" when the value exceeds the limit, set `false` to turn it off
-`style` | ViewStyle | | Style of the container
-`textStyle` | TextStyle | | Style of the text value
+`size` | number | `20` | Height and min width of the badge
+`color` | string | `#ff3b30` | Background color of the badge
+`radius` | number | `size / 2` | Border radius of the badge
+`animate` | boolean | `true` | To animate appearance with a spring animation
+`value` | number \| boolean \| string | | A number or string value to show in the badge, or `true` to display a color dot
+`limit` | number | `99` | To display "99+" when the `value` exceeds the limit, set `0` to disable
+`parentRadius` | number | `0` | Border radius of the parent container, used to position the badge more precisely
+`position` | BadgePositions | | To position the badge absolutely over its parent, the allowed options are `top-left`, `top-right`, `bottom-left`, and `bottom-right`
+`style` | ViewStyle | | Style object applied to the container
+`textStyle` | TextStyle | | Style object applied to the text
+
+## 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).
 
 ## License
 
-MIT
+Licensed under the MIT license.
diff --git a/demo/badge-button.gif b/demo/badge-button.gif
diff --git a/demo/hero.gif b/demo/hero.gif
diff --git a/example/.buckconfig b/example/.buckconfig
diff --git a/example/.gitignore b/example/.gitignore
@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -29,33 +30,37 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
diff --git a/example/.ruby-version b/example/.ruby-version
diff --git a/example/.watchmanconfig b/example/.watchmanconfig
@@ -1 +1 @@
-{}
+{}