@momo-kits/avatar 0.0.33-beta → 0.0.33

package/Avatar.js

@@ -2,13 +2,19 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
-    View, StyleSheet, TouchableOpacity
+    View, StyleSheet, TouchableOpacity, Dimensions, Platform
 } from 'react-native';
 import { get, isEqual } from 'lodash';
 import {
- ValueUtil, Colors, Text, IconSource, Image
+ ValueUtil, Colors, Text, IconSource, Image, ScaleSize
 } from '@momo-kits/core';
 
+export const AvatarQuality = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+
 export const AvatarSize = {
     tiny: 'tiny',
     small: 'small',
@@ -29,6 +35,29 @@ export const AvatarSize = {
     size96: 'size96'
 };
 
+const COLORS = [
+    '#3683f3',
+    '#ea63af',
+    '#f94889',
+    '#82b6da',
+    '#2fc093',
+    '#7b4a41',
+    '#ff97bc',
+    '#4130d7',
+    '#c3c3c3',
+    '#f7ae2f',
+    '#b04595',
+    '#57b748',
+    '#ff8900',
+    '#7841bf',
+    '#be3f3e',
+    '#c51515',
+    '#8e6472',
+    '#fed27d',
+    '#ff6f5d',
+    '#05b8ae',
+];
+
 export const SubIconType = {
     momo: 'momo',
     online: 'online',
@@ -76,7 +105,7 @@ const styles = StyleSheet.create({
     }
 });
 
-const subIconSize = StyleSheet.create({
+const subIconSize = (width) => ({
     tiny: {
         width: 8,
         height: 8,
@@ -176,7 +205,7 @@ const subIconSize = StyleSheet.create({
     }
 });
 
-const avatarSize = StyleSheet.create({
+const avatarSize = (width) => ({
     tiny: {
         width: 16,
         height: 16,
@@ -264,32 +293,59 @@ const avatarSize = StyleSheet.create({
     }
 });
 
-const shortName = StyleSheet.create({
+const shortName = (width) => ({
     tiny: {
-        fontSize: 5
+        fontSize: ScaleSize(5, width)
     },
     small: {
-        fontSize: 11
+        fontSize: ScaleSize(11, width)
     },
     medium: {
-        fontSize: 15
+        fontSize: ScaleSize(15, width)
+    },
+    middle: {
+        fontSize: ScaleSize(16, width)
     },
     large: {
-        fontSize: 20
+        fontSize: ScaleSize(20, width)
     },
     giant: {
-        fontSize: 25
+        fontSize: ScaleSize(25, width)
     }
 });
 
 export default class Avatar extends Component {
     constructor(props) {
         super(props);
+        this.color = this.getAvatarColor(props.name);
         this.state = {
             hideSource: false,
             ownUpdate: false,
-            source: props.source
+            source: props.source,
+            dimensions: {}
         };
+        this.imageSource = '';
+    }
+
+    componentDidMount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription = Dimensions.addEventListener(
+                'change',
+                ({ window }) => {
+                    if(window?.height > 0 && window?.width > 0 && Platform.OS === 'android') {
+                        this.setState({ dimensions: window });
+                    }
+                }
+            );
+        }
+    }
+
+    componentWillUnmount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription?.remove?.();
+        }
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -315,12 +371,24 @@ export default class Avatar extends Component {
         return alphabet.join('');
     }
 
-    renderShortName = (name, avatarStyle, size) => {
+    hashUrl(url) {
+        let hash = 0;
+        let char;
+        if (url?.length === 0) return hash;
+        for (let i = 0; i < url?.length; i++) {
+            char = url?.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash &= hash; // Convert to 32bit integer
+        }
+        return hash;
+    }
+
+    renderShortName = (name, avatarStyle, size, color,) => {
         if (name) {
             const shortedName = this.getContactShortName(name);
             const shortNameStyle = this.mapShortNameStyle(size);
             return (
-                <View style={[styles.shortNameView, avatarStyle]}>
+                <View style={[styles.shortNameView, avatarStyle, { backgroundColor: color }]}>
                     <Text.H4 style={[styles.shortNameText, shortNameStyle]}>{shortedName}</Text.H4>
                 </View>
             );
@@ -334,49 +402,70 @@ export default class Avatar extends Component {
     }
 
     isValidImageUrl = (source) => {
-        const validSource = source && (((source.uri && this.isUrl(source.uri)) || (typeof source === 'number')));
+        const validSource = source && source.uri && this.isUrl(source.uri);
         return validSource;
     }
 
+    mapAvatarQuality = (url, quality) => {
+        if (!quality || quality === AvatarQuality.medium) {
+            return url;
+        }
+        if (quality === AvatarQuality.low) {
+            return url.replace('.png', '_s64.png');
+        }
+        if (quality === AvatarQuality.high) {
+            return url.replace('.png', '_s512.png');
+        }
+
+        return url;
+    }
+
     mapStyleFromSize = (size) => {
-        const avatarStyle = avatarSize.small;
+        const { dimensions } = this.state;
+        const avatarStyle = avatarSize(dimensions?.width > 0 ? dimensions?.width : null).small;
         if (typeof size === 'object') return size;
-        if (avatarSize[size]) return avatarSize[size];
+        if (avatarSize(dimensions?.width > 0 ? dimensions?.width : null)[size]) return avatarSize(dimensions?.width > 0 ? dimensions?.width : null)[size];
         return avatarStyle;
     }
 
     mapShortNameStyle = (size) => {
         let shortNameStyle = {};
+        const { dimensions } = this.state;
         switch (size) {
             case AvatarSize.tiny: {
-                shortNameStyle = shortName.tiny;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).tiny;
                 break;
             }
             case AvatarSize.small: {
-                shortNameStyle = shortName.small;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).small;
                 break;
             }
             case AvatarSize.medium: {
-                shortNameStyle = shortName.medium;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).medium;
+                break;
+            }
+            case AvatarSize.size48: {
+                shortNameStyle = shortName(dimensions?.width || null).middle;
                 break;
             }
             case AvatarSize.large: {
-                shortNameStyle = shortName.large;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).large;
                 break;
             }
             case AvatarSize.giant: {
-                shortNameStyle = shortName.giant;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).giant;
                 break;
             }
             default:
-                shortNameStyle = shortName.small;
+                shortNameStyle = shortName(dimensions?.width > 0 ? dimensions?.width : null).small;
         }
         return shortNameStyle;
     }
 
     mapSubIconSize = (size) => {
-        const subIconStyle = subIconSize.small;
-        if (subIconSize[size]) return subIconSize[size];
+        const { dimensions } = this.state;
+        const subIconStyle = subIconSize(dimensions?.width > 0 ? dimensions?.width : null).small;
+        if (subIconSize(dimensions?.width > 0 ? dimensions?.width : null)[size]) return subIconSize(dimensions?.width > 0 ? dimensions?.width : null)[size];
         return subIconStyle;
     }
 
@@ -393,8 +482,11 @@ export default class Avatar extends Component {
         };
     }
 
-    onLoadSourceError = () => {
-        this.setState({ hideSource: true, ownUpdate: true });
+    onLoadSourceError = (imageSource) => {
+        if(this.imageSource?.uri !== imageSource?.uri){
+            this.imageSource = imageSource;
+            this.setState({ hideSource: true, ownUpdate: true });
+        }
     }
 
     renderSubIcon = () => {
@@ -426,6 +518,15 @@ export default class Avatar extends Component {
         );
     }
 
+    getAvatarColor(name) {
+        const shortName = this.getContactShortName(name)
+        if (!shortName) return "#d5d6d6"
+        const firstLetter = shortName[0].charCodeAt(0)
+        let colorIndex = Number(firstLetter) % 26
+        if (colorIndex > 19) colorIndex = 25 - colorIndex
+        return COLORS[colorIndex]
+    }
+
     onPress = () => {
         const { onPress } = this.props;
         if (onPress && typeof onPress === 'function') onPress();
@@ -433,23 +534,34 @@ export default class Avatar extends Component {
 
     render() {
         const {
-            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage
+            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage, quality
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
         const containerSize = this.extractSize(avatarStyle);
         const imageSource = ValueUtil.getImageSource(source);
         const showName = typeof imageSource === 'object' && Object.keys(imageSource).length === 0 && typeof imageSource !== 'number';
+        // add priority high for avatar
+        if (imageSource?.uri) {
+            imageSource.priority = 'high';
+            imageSource.uri = this.mapAvatarQuality(imageSource.uri, quality);
+            // if doest not have time query, set default cache time to 1 day
+            if (!imageSource.uri?.includes('?') && cached) {
+                const midnight = new Date().setHours(0, 0, 0, 0);
+                imageSource.uri = `${imageSource.uri}?time=${midnight}`;
+            }
+        }
+
         const inner = (
             <View style={[styles.container, containerSize, style]}>
-                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : <View />}
+                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size, this.color) : <View />}
                 {this.isValidImageUrl(imageSource) && !hideSource
                     ? (
                         <Image
                             cached={cached}
                             loading={loading || isShowLoading}
                             source={imageSource}
-                            onError={this.onLoadSourceError}
+                            onError={() => this.onLoadSourceError(imageSource)}
                             style={avatarStyle}
                             resizeMode={resizeMode}
                             {...extraPropsImage}
@@ -472,10 +584,8 @@ export default class Avatar extends Component {
 Avatar.propTypes = {
     name: PropTypes.string,
     resizeMode: PropTypes.string,
-    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'size8', 'size24', 'size36', 'size44', 'size48', 'size52', 'size56', 'size64', 'size72', 'size80', 'size88', 'size96',
-        PropTypes.shape({
-            width: PropTypes.number, height: PropTypes.number, borderRadius: PropTypes.number
-        })]),
+    quality: PropTypes.oneOf(['low', 'medium', 'high']),
+    size: PropTypes.any,
     source: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.string]),
     subIcon: PropTypes.oneOf(['momo', 'online', 'key', 'none']),
     subIconSource: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.string]),
@@ -483,10 +593,15 @@ Avatar.propTypes = {
     onPress: PropTypes.func,
     loading: PropTypes.bool,
     cached: PropTypes.bool,
-    extraPropsImage: PropTypes.object
+    scaleSize: PropTypes.bool,
+    extraPropsImage: PropTypes.object,
+    number: PropTypes.string
 };
 
 Avatar.defaultProps = {
     resizeMode: 'cover',
-    cached: true
+    cached: true,
+    scaleSize: false,
+    quality: 'medium',
+    size: 'small'
 };

package/Avatar.web.js

@@ -2,14 +2,43 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
-    View, StyleSheet, TouchableOpacity, Image
+    View, StyleSheet, TouchableOpacity, Image, Dimensions
 } from 'react-native';
 import { get, isEqual } from 'lodash';
-import ValueUtils from '../../utils/ValueUtil';
-import Colors from '../../colors';
-import { Icons } from '../../icons';
-import Text from '../typography';
-import { ColorCore } from '../../colors/colorCore';
+import ValueUtil from '../../core/utils/ValueUtil';
+import Colors from '../../core/colors';
+import { Icons as IconSource } from '../../core/icons';
+import Text from '../../core/components/typography';
+import { RFValueHorizontal as ScaleSize } from '../../core/components/typography/reponsiveSize';
+
+export const AvatarQuality = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+
+const COLORS = [
+    '#3683f3',
+    '#ea63af',
+    '#f94889',
+    '#82b6da',
+    '#2fc093',
+    '#7b4a41',
+    '#ff97bc',
+    '#4130d7',
+    '#c3c3c3',
+    '#f7ae2f',
+    '#b04595',
+    '#57b748',
+    '#ff8900',
+    '#7841bf',
+    '#be3f3e',
+    '#c51515',
+    '#8e6472',
+    '#fed27d',
+    '#ff6f5d',
+    '#05b8ae',
+];
 
 export const AvatarSize = {
     tiny: 'tiny',
@@ -78,7 +107,7 @@ const styles = StyleSheet.create({
     }
 });
 
-const subIconSize = StyleSheet.create({
+const subIconSize = (width) => ({
     tiny: {
         width: 8,
         height: 8,
@@ -178,7 +207,7 @@ const subIconSize = StyleSheet.create({
     }
 });
 
-const avatarSize = StyleSheet.create({
+const avatarSize = (width) => ({
     tiny: {
         width: 16,
         height: 16,
@@ -266,34 +295,57 @@ const avatarSize = StyleSheet.create({
     }
 });
 
-const shortName = StyleSheet.create({
+const shortName = (width) => ({
     tiny: {
-        fontSize: 5
+        fontSize: ScaleSize(5, width)
     },
     small: {
-        fontSize: 11
+        fontSize: ScaleSize(11, width)
     },
     medium: {
-        fontSize: 15
+        fontSize: ScaleSize(15, width)
     },
     large: {
-        fontSize: 20
+        fontSize: ScaleSize(20, width)
     },
     giant: {
-        fontSize: 25
+        fontSize: ScaleSize(25, width)
     }
 });
 
 export default class Avatar extends Component {
     constructor(props) {
         super(props);
+        this.color = this.getAvatarColor(props.name);
         this.state = {
             hideSource: false,
             ownUpdate: false,
-            source: props.source
+            source: props.source,
+            dimensions: {}
         };
     }
 
+    componentDidMount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription = Dimensions.addEventListener(
+                'change',
+                ({ window }) => {
+                    if(window?.height > 0 && window?.width > 0) {
+                        this.setState({ dimensions: window });
+                    }
+                }
+            );
+        }
+    }
+
+    componentWillUnmount() {
+        const { scaleSize } = this.props;
+        if (scaleSize) {
+            this.subscription?.remove?.();
+        }
+    }
+
     static getDerivedStateFromProps(nextProps, prevState) {
         if (prevState.ownUpdate) {
             return {
@@ -336,49 +388,66 @@ export default class Avatar extends Component {
     }
 
     isValidImageUrl = (source) => {
-        const validSource = source && (((source.uri && this.isUrl(source.uri)) || (typeof source === 'number')));
+        const validSource = source && source.uri && this.isUrl(source.uri);
         return validSource;
     }
 
+    mapAvatarQuality = (url, quality) => {
+        if (!quality || quality === AvatarQuality.medium) {
+            return url;
+        }
+        if (quality === AvatarQuality.low) {
+            return url.replace('.png', '_s64.png');
+        }
+        if (quality === AvatarQuality.high) {
+            return url.replace('.png', '_s512.png');
+        }
+
+        return url;
+    }
+
     mapStyleFromSize = (size) => {
-        const avatarStyle = avatarSize.small;
+        const { dimensions } = this.state;
+        const avatarStyle = avatarSize(dimensions?.width || null).small;
         if (typeof size === 'object') return size;
-        if (avatarSize[size]) return avatarSize[size];
+        if (avatarSize(dimensions?.width || null)[size]) return avatarSize(dimensions?.width || null)[size];
         return avatarStyle;
     }
 
     mapShortNameStyle = (size) => {
         let shortNameStyle = {};
+        const { dimensions } = this.state;
         switch (size) {
             case AvatarSize.tiny: {
-                shortNameStyle = shortName.tiny;
+                shortNameStyle = shortName(dimensions?.width || null).tiny;
                 break;
             }
             case AvatarSize.small: {
-                shortNameStyle = shortName.small;
+                shortNameStyle = shortName(dimensions?.width || null).small;
                 break;
             }
             case AvatarSize.medium: {
-                shortNameStyle = shortName.medium;
+                shortNameStyle = shortName(dimensions?.width || null).medium;
                 break;
             }
             case AvatarSize.large: {
-                shortNameStyle = shortName.large;
+                shortNameStyle = shortName(dimensions?.width || null).large;
                 break;
             }
             case AvatarSize.giant: {
-                shortNameStyle = shortName.giant;
+                shortNameStyle = shortName(dimensions?.width || null).giant;
                 break;
             }
             default:
-                shortNameStyle = shortName.small;
+                shortNameStyle = shortName(dimensions?.width || null).small;
         }
         return shortNameStyle;
     }
 
     mapSubIconSize = (size) => {
-        const subIconStyle = subIconSize.small;
-        if (subIconSize[size]) return subIconSize[size];
+        const { dimensions } = this.state;
+        const subIconStyle = subIconSize(dimensions?.width || null).small;
+        if (subIconSize(dimensions?.width || null)[size]) return subIconSize(dimensions?.width || null)[size];
         return subIconStyle;
     }
 
@@ -391,10 +460,20 @@ export default class Avatar extends Component {
             height: containerWidth,
             borderRadius: containerWidth / 2,
             borderWidth,
-            borderColor: ColorCore.black_01
+            borderColor: Colors.black_01
         };
     }
 
+    getAvatarColor(name) {
+        const shortName = this.getContactShortName(name)
+        if (!shortName) return "#d5d6d6"
+        const firstLetter = shortName[0].charCodeAt(0)
+        let colorIndex = Number(firstLetter) % 26
+        if (colorIndex > 19) colorIndex = 25 - colorIndex
+        return COLORS[colorIndex]
+    }
+
+
     onLoadSourceError = () => {
         this.setState({ hideSource: true, ownUpdate: true });
     }
@@ -403,14 +482,14 @@ export default class Avatar extends Component {
         const { subIcon, size, subIconSource } = this.props;
         if ((!subIcon || subIcon === SubIconType.none) && !subIconSource) return <View />;
         const subIconSizeStyle = this.mapSubIconSize(size);
-        const iconSource = ValueUtils.getImageSource(subIconSource);
+        const iconSource = ValueUtil.getImageSource(subIconSource);
         return (
             <View style={styles.subIcon}>
                 {subIcon === SubIconType.momo
                     ? (
                         <Image
                             style={[styles.subIconImage, subIconSizeStyle]}
-                            source={Icons.ic_round_momo_tiny}
+                            source={IconSource.ic_round_momo_tiny}
                         />
                     )
                     : <View />}
@@ -435,16 +514,27 @@ export default class Avatar extends Component {
 
     render() {
         const {
-            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage
+            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage, quality
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
         const containerSize = this.extractSize(avatarStyle);
-        const imageSource = ValueUtils.getImageSource(source);
+        const imageSource = ValueUtil.getImageSource(source);
         const showName = typeof imageSource === 'object' && Object.keys(imageSource).length === 0 && typeof imageSource !== 'number';
+        // add priority high for avatar
+        if (imageSource?.uri) {
+            imageSource.priority = 'high';
+            imageSource.uri = this.mapAvatarQuality(imageSource.uri, quality);
+            // if doest not have time query, set default cache time to 1 day
+            if (!imageSource.uri?.includes('?') && cached) {
+                const midnight = new Date().setHours(0, 0, 0, 0);
+                imageSource.uri = `${imageSource.uri}?time=${midnight}`;
+            }
+        }
+
         const inner = (
-            <View style={[styles.container, avatarStyle, style]}>
-                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : null}
+            <View style={[styles.container, containerSize, style]}>
+                {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : <View />}
                 {this.isValidImageUrl(imageSource) && !hideSource
                     ? (
                         <Image
@@ -472,54 +562,27 @@ export default class Avatar extends Component {
 }
 
 Avatar.propTypes = {
-     /**
-   * The default name when image load fail.
-   */
     name: PropTypes.string,
-    /**
-   * How resize should the avatar be?
-   */
     resizeMode: PropTypes.string,
-    /**
-   * How large should the avatar be?
-   */
-    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'size8', 'size24', 'size36', 'size44', 'size48', 'size52', 'size56', 'size64', 'size72', 'size80', 'size88', 'size96']),
-    /**
-   * What source Avatar to use?
-   */
+    quality: PropTypes.oneOf(['low', 'medium', 'high']),
+    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'size8', 'size24', 'size36', 'size44', 'size48', 'size52', 'size56', 'size64', 'size72', 'size80', 'size88', 'size96',
+        PropTypes.shape({
+            width: PropTypes.number, height: PropTypes.number, borderRadius: PropTypes.number
+        })]),
     source: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.string]),
-    /**
-   * What subIcon Avatar to use?
-   */
     subIcon: PropTypes.oneOf(['momo', 'online', 'key', 'none']),
-     /**
-   * What custom subIcon Avatar to use?
-   */
     subIconSource: PropTypes.oneOfType([PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.string]),
-     /**
-   * What custom style Avatar to use?
-   */
     style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-   /**
-   * Optional click handler.
-   */
     onPress: PropTypes.func,
-    /**
-   * Optional loading handler.
-   */
     loading: PropTypes.bool,
-    /**
-   * Optional cached handler.
-   */
     cached: PropTypes.bool,
-    /**
-   * Optional extra prop of Image.
-   */
+    scaleSize: PropTypes.bool,
     extraPropsImage: PropTypes.object
 };
 
 Avatar.defaultProps = {
     resizeMode: 'cover',
-    size: 'medium',
-    cached: true
+    cached: true,
+    scaleSize: false,
+    quality: 'medium',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/avatar",
-  "version": "0.0.33-beta",
+  "version": "0.0.33",
   "private": false,
   "main": "index.js",
   "dependencies": {},
@@ -8,16 +8,9 @@
     "react-native": ">=0.55",
     "prop-types": "^15.7.2",
     "react": "16.9.0",
-    "lodash": "^4.17.15",
-    "@momo-kits/core": ">=0.0.5-beta"
+    "@momo-kits/core": ">=0.0.5-beta",
+    "lodash": "^4.17.15"
   },
-  "devDependencies": {
-    "metro-react-native-babel-preset": "^0.64.0",
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5"
-  },
-  "license": "MoMo",
-  "jest": {
-    "preset": "react-native"
-  }
+  "devDependencies": {},
+  "license": "MoMo"
 }

package/publish.sh

@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-echo  '{"text": "@momo-kits/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    presets: ['module:metro-react-native-babel-preset'],
-};