1.0.2 • Published 4 years ago

react-native-avatar-generator v1.0.2

Weekly downloads
19
License
MIT
Repository
github
Last release
4 years ago

React Native User Avatar

npm version npm downloads Build license

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 :-

#PropsExpected ValueDefault ValueExample
1imageSourceAny valid require('../image.png') pathU userAvatarimageSource={require('./images/avatar.png')}
2showImagetrue or falsefalseshowImage={true}
3sizeAny valid number without any unit50size=100
4backgroundColorAny valid color in hex code or color nameorangebackgroundColor=#FF5733
5colorAny valid color in hex code or color name#FFFFFFcolor=red
6fontWeightnormalboldnormalfontEeight=normal
7firstNameAny valid First NameUfirstName=Rakesh
8lastNameAny valid Last NameUlastName=Vanam

Screenshots :

screenshots