Skip to content

muxbert/react-native-avataaars

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native component for Avataaars

A thin wrapper on top of React component for Avataaars, developed by Fang-Pen Lin, which is the React component for Avataaars. This package allow you to use React component for Avataaars in React Native!

avataars

Features

  1. Just like React component for Avataaars but can be used in React Native Project

Usage

yarn add react-native-avataaars

or

npm install react-native-avataaars --save
...
import { Avatar } from "react-native-avataaars";
...

const YourComponent = props => (
    <Avatar
        size={300}
        avatarStyle="Circle"
        topType="ShortHairShortRound"
        accessoriesType="Prescription02"
        hairColor="Black"
        facialHairType="Blank"
        clotheType="BlazerShirt"
        eyeType="Happy"
        eyebrowType="Default"
        mouthType="Default"
        skinColor="Light"
    />
)

You may also use the Piece Element.

...
import { Piece } from "react-native-avataaars";
...

const YourComponent = props => (
    <ScrollView>
        <Piece pieceType="mouth" pieceSize="100" mouthType="Eating" />
        <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy" />
        <Piece
            pieceType="eyebrows"
            pieceSize="100"
            eyebrowType="RaisedExcited"
        />
        <Piece
            pieceType="accessories"
            pieceSize="100"
            accessoriesType="Round"
        />
        <Piece
            pieceType="top"
            pieceSize="100"
            topType="LongHairFro"
            hairColor="Red"
        />
        <Piece
            pieceType="facialHair"
            pieceSize="100"
            facialHairType="BeardMajestic"
        />
        <Piece
            pieceType="clothe"
            pieceSize="100"
            clotheType="Hoodie"
            clotheColor="Red"
        />
        <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
        <Piece pieceType="skin" pieceSize="100" skinColor="Brown" />
    </ScrollView>
)

Credit

Credit to Fang-Pen Lin making such amazing package and shout out to Shiva Nandan, creator of react-native-remote-svg. You two make this package possible!

About

React Native component for Avataaars

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%