rn-svg-avatar v1.0.4

React Native SVG Avatar

A React Native package to render SVG avatars with ease. Used dapi-labs/react-nice-avatar for SVG and utility functions.

Installation

Expo Managed App

$ npm i rn-svg-avatar react-native-svg

React Native CLI

$ npm i rn-svg-avatar react-native-svg react-native-svg-transformer

Uninstall the app from Emulator/Simulator/Physical Device, and rebuild the app:

For Android:

$ npx react-native run-android

For iOS:

$ cd ios && pod install
$ npx react-native run-ios

Usage

Example 1:

Will always return a random avatar everytime it renders

import React from 'react'
import { View, StyleSheet } from 'react-native'
import Avatar from 'rn-svg-avatar'

const HomeScreen = () => {
    return <View style={styles.container}>
        <Avatar />
    </View>
}

const styles = StyleSheet.create({
    container: {}
})

export default HomeScreen ;

Example 2:

Will always return the same avatar for a fixed config (config should be string)

import React from 'react'
import { View, StyleSheet } from 'react-native'
import Avatar from 'rn-svg-avatar'

const HomeScreen = () => {
    return <View style={styles.container}>
        <Avatar config={'someString'} />
    </View>
}

const styles = StyleSheet.create({
    container: {}
})

export default HomeScreen ;

Example 3:

Can customize avatar's properties like shape, shape.

import React from 'react'
import { View, StyleSheet } from 'react-native'
import Avatar from 'rn-svg-avatar'

const HomeScreen = () => {
    return <View style={styles.container}>
        <Avatar config={'someString'} shape={'rounded'} size={160} />
    </View>
}

const styles = StyleSheet.create({
    container: {}
})

export default HomeScreen ;

Options

^AvatarConfig {
	sex?: 'man' | 'woman',
	faceColor?: string,
	earSize?: 'small' | 'big',
	hairColor?: string,
	hairStyle?: 'beanie' |'turban' | 'none',
	hairColorRandom?: boolean,
	hatColor?: 'beanie' |'turban' | 'none',
	hatStyle?: 'beanie' |'turban' | 'none',
	eyeStyle?: 'circle' | 'oval' | 'smile',
	glassesStyle?: 'round' | 'square' | 'none',
	noseStyle?: 'short' | 'long' | 'round',
	mouthStyle?: 'laugh' | 'smile' | 'peace',
	shirtStyle?: 'hoody' | 'short' | 'polo',
	shirtColor?: string,
	bgColor?: string
}

Authors

• Rahul Singh - LinkedIn

License

MIT License © Rahul Singh