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

| prop | type | default | accept | description | | --- | --- | --- | --- | --- | | size | number | 100 | any positive value | changes the height and width of the avatar's root container | | shape | string | square | 'circle', 'rounded', 'square' | change shape of the avatar's root container' | | scale | number | 0.8 | a value in the range (0, 1] - excluding 0, including 1 | any numerical value | Scale factor applied to the avatar size. w.r.t to the root container | | containerStyle | StyleProp | {} | React Native View style | Custom styles for the avatar container. | | bgColor | string | random | Any valid color string | Background color of the avatar's root container | | config | string or ^this config object | none/random | string or AvatarFullConfig | Configuration for the avatar. | | logSchema | boolean | false | true/false | Whether to log schema of the avatar to the console |

^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