User Avatar

Published in UI
August 10, 2022
1 min read
User Avatar

Introduction

The fallback avatar’s color may be set by passing in the bgColor prop, or you can customize the range of colors used by passing in an array of bgColors. The component uses a simple calculation to consistently use the same color for the same user’s name every time.

UserAvatar Props

AttributeTypeDefault ValueDescription
namestring'John Doe'name used for generating initials
srcstringundefinedsource image on the internet to display
bgColorstringundefinedcustom background color for the initials
bgColorsarraysee index.jscustom array of background colors to choose from
textColorstring'#fff'custom text color for the initials font
sizenumber32custom size that defines both the avatar and the initials font size
imageStyleobjectundefinedcustom image styling to append to the Image component displays the source image
textStyleobjectundefinedcustom text styling to append to the Text component that displays initials
styleobjectundefinedcustom style to append to the UserAvatar component container
borderRadiusnumbersize * 0.5custom border radius for the component
componentReact.Componentundefinedcustom component to display instead of initials or source image

Installation

npm install @muhzi/react-native-user-avatar --force

Example

import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import UserAvatar from '@muhzi/react-native-user-avatar';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.separator} >
<UserAvatar
size={80}
active
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2900&q=80"
/>
<Text style={{alignSelf : 'center'}}> User 1</Text>
</View>
<View style={styles.separator}>
<UserAvatar userName="Josh Samuel" size={80} active />
<Text style={{alignSelf : 'center'}}> User 1</Text>
</View>
<View style={styles.separator} >
<UserAvatar
size={80}
src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
/>
<Text style={{alignSelf : 'center'}}> User 2</Text>
</View>
<View style={styles.separator}>
<UserAvatar
initialName="SK"
size={80}
active
rounded={false}
backgroundColors={['#575fcf', '#ef5777', '#0be881']}
/>
<Text style={{alignSelf : 'center'}}> User 3</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
separator: {
marginTop: 16,
},
});

Tutorial

Coming Soon…


Share


Previous Article
Counter
Next Article
Action Sheet
Awesome React Native
© 2025, All Rights Reserved.

Social Media