Avatar Component. Make an avatar image (rounded) using Image component.

Avatar.component.jsx

// @flow

import React from 'react';
import { Image } from 'react-native';
import type ImageStylePropTypes from 'react-native/Libraries/DeprecatedPropTypes/DeprecatedImageStylePropTypes';
import { Styles } from './Avatar.component.style';

type Props = {
  source: {uri: string} | number,
  size: number,
  resizeMode?: ('stretch' | 'cover' | 'center' | 'contain'),
  style?: ImageStylePropTypes
}

export default ({
  source,
  size,
  style,
  resizeMode = 'contain'
}: Props) => (
  <Image source={source} style={[Styles.avatar(size, resizeMode), style]} />
);

Avatar.component.style.jsx

//@flow

import { StyleSheet } from 'react-native';
import { responsiveWidth as rw } from '../../Utils/Layout.utils';

export const Styles = StyleSheet.create({
  avatar: (size: number, resizeMode: string) => ({
    width: rw(size),
    height: rw(size),
    borderRadius: size,
    resizeMode
  })
});

ExampleScreen.component.jsx

//@flow

import React from 'react';
import { View } from 'react-native';
import { Styles } from './Example.screen.style';
import { Avatar } from '../../../Components';

type ScreenProps = {}

export default (props: ScreenProps) => {

  return (
    <View style={Styles.container}>
      <Avatar
        resizeMode="stretch"
        size={50}
        source={
          { uri: 'image_url' }
        }
        style={Styles.avatar}
      />
    </View>
  );
};