Skip to content

Instantly share code, notes, and snippets.

@teramuza
Created November 14, 2020 10:46
Show Gist options
  • Save teramuza/ac7c5fab5468e44ee9d5c31a6c087255 to your computer and use it in GitHub Desktop.
Save teramuza/ac7c5fab5468e44ee9d5c31a6c087255 to your computer and use it in GitHub Desktop.
Avatar Component. Make an avatar image (rounded) using Image component.
// @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]} />
);
//@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
})
});
//@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>
);
};
@nihalmehaboob
Copy link

good explanation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment