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

UIW for React Native

import React from 'react';
import { View, Image, StyleSheet, ActivityIndicator } from 'react-native';
import { useTheme } from '@shopify/restyle';
const defaultImage = require('./assets/user.png');
const Avatar = props => {
  const theme = useTheme();
  const styles = createStyles({
    color: theme.colors.gray100 || '#e4e4e4'
  });
  const {
    style,
    src = defaultImage,
    size = 40,
    shape = 'square',
    rounded = 3,
    imageProps,
    loading = false,
    ...otherProps
  } = props;
  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,
      zIndex: loading ? 2023 : 0
    }]}>
        {loading && <ActivityIndicator size="small" color={theme.colors.gray300 || 'gray'} />}
      </View>

      <Image style={{
      width: size,
      height: size,
      position: 'absolute',
      top: 0,
      left: 0
    }} source={typeof src === 'number' ? src : {
      uri: src
    }} {...imageProps} />
    </View>;
};
export default Avatar;
function createStyles({
  color
}) {
  return StyleSheet.create({
    default: {
      backgroundColor: color,
      overflow: 'hidden'
    }
  });
}