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
33
34
35
36
37

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 loading ? (
    <ImageBackground
      style={style}
      defaultSource={require('../../assets/images/avatar-placeholder.png')}
      source={{uri, cache: 'reload'}}>
      {loading && (
        <Image
          source={require('../../assets/gifs/loading-animation.gif')}
          style={loadingStyle}
        />
      )}
    </ImageBackground>
  ) : (
    <Image
      defaultSource={require('../../assets/images/avatar-placeholder.png')}
      source={{uri, cache: 'reload'}}
      style={style}
    />
  );
};

export default Avatar;