{"size": 1107, "ext": "js", "max_stars_repo_path": "src/components/Avatar.js", "max_stars_repo_name": "truongpham17/Carhub", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Avatar.js", "max_issues_repo_name": "truongpham17/Carhub", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Avatar.js", "max_forks_repo_name": "truongpham17/Carhub", "max_forks_repo_forks_event_min_datetime": "2020-09-28T15:41:45.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-28T15:41:45.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 23.0625, "max_line_length": 76, "alphanum_fraction": 0.5980126468}
import React from 'react';
import { View, TouchableOpacity, ViewStyle, StyleProp } from 'react-native';
import FastImage from 'react-native-fast-image';
import { scaleHor } from 'Constants/dimensions';
import { Edit } from 'Assets/svgs';
import { defaultFunction } from 'Utils/common';

type PropTypes = {
  uri: string,
  style: StyleProp<ViewStyle>,
  editable?: boolean,
  onAvatarPress?: () => void,
};

const Avatar = ({
  uri,
  style = {},
  editable = false,
  onAvatarPress = defaultFunction,
}: PropTypes) => {
  const renderContent = () => (
    <FastImage
      source={{ uri }}
      style={[
        {
          width: scaleHor(100),
          height: scaleHor(100),
          borderRadius: scaleHor(50),
          // backgroundColor: 'green',
        },
        style,
      ]}
      resizeMode="cover"
    />
  );
  if (!editable) return renderContent();
  return (
    <TouchableOpacity onPress={onAvatarPress}>
      {renderContent()}
      <View style={{ position: 'absolute', bottom: 0, right: 0 }}>
        <Edit />
      </View>
    </TouchableOpacity>
  );
};

export default Avatar;
