README
React Native User Avatar
Note : Any wrong prop(s) or value passed to the component leads to the default value(s).
For more detail refer below guide.
Installation
npm install --save react-native-avatar-generator
or yarn add react-native-avatar-generator
Usage
How to use ? :thinking:
import React from 'react';
import {View, StyleSheet} from 'react-native';
import UserAvatar from 'react-native-avatar-generator';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<UserAvatar
size={100}
fontWeight="bold"
color="#FFFFFF"
backgroundColor="red"
firstName="Rakesh"
lastName="Vanam"
/>
<View style={{margin: 10}}>
<UserAvatar
size={50}
fontWeight="noraml"
color="white"
backgroundColor="#0033CC"
firstName="John"
lastName="Doe"
/>
</View>
<UserAvatar
imageSource={require('./images/avatar.png')}
showImage={true}
size={70}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Props :)
Hey you can get more props for your userAvatar component and customize it with your choice of filter.
List of props that you can use :-
# | Props | Expected Value | Default Value | Example |
---|---|---|---|---|
1 | imageSource | Any valid require('../image.png') path | U userAvatar | imageSource={require('./images/avatar.png')} |
2 | showImage | true or false | false | showImage={true} |
3 | size | Any valid number without any unit | 50 | size=100 |
4 | backgroundColor | Any valid color in hex code or color name | orange | backgroundColor=#FF5733 |
5 | color | Any valid color in hex code or color name | #FFFFFF | color=red |
6 | fontWeight | normal | bold | normal |
7 | firstName | Any valid First Name | U | firstName=Rakesh |
8 | lastName | Any valid Last Name | U | lastName=Vanam |