src/components/common/Avatar.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React, {FC} from 'react';
import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native';

type AvatarProps = {
  style: StyleProp<ImageStyle>;
  uri: string | undefined;
  loading: boolean;
  loadingStyle: StyleProp<ImageStyle> | undefined;
};
const Avatar: FC<AvatarProps> = ({
  style,
  uri,
  loading = false,
  loadingStyle,
}) => {
  return (
    <ImageBackground
      style={style}
      imageStyle={style}
      defaultSource={require('../../assets/images/avatar-placeholder.png')}
      source={{uri, cache: 'reload'}}>
      {loading && (
        <Image
          source={require('../../assets/gifs/loading-animation.gif')}
          style={loadingStyle}
        />
      )}
    </ImageBackground>
  );
};

export default Avatar;