@uiw/react-native/lib/Avatar/index.js

UIW for React Native

import React, { useState } from 'react';
import { View, Image, StyleSheet, ActivityIndicator } from 'react-native';
const styles = StyleSheet.create({
  default: {
    backgroundColor: '#e4e4e4',
    overflow: 'hidden'
  }
});
const defaultImage = require('./assets/user.png');
const Avatar = props => {
  const {
    style,
    src = defaultImage,
    size = 40,
    shape = 'square',
    rounded = 3,
    imageProps,
    ...otherProps
  } = props;
  const [imageLoaded, setImageLoaded] = useState(false);
  return <View style={[styles.default, style, {
    width: size,
    height: size,
    borderRadius: shape === 'circle' ? size / 2 : rounded
  }]} {...otherProps}>
      <View style={[styles.default, {
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
      width: size,
      height: size
    }]}>
        {!imageLoaded && <ActivityIndicator size="small" color="gray" />}
      </View>
      <Image style={{
      width: size,
      height: size,
      position: 'absolute',
      top: 0,
      left: 0
    }} source={typeof src === 'number' ? src : {
      uri: src
    }} onLoad={() => setImageLoaded(true)} {...imageProps} />
    </View>;
};
export default Avatar;