https://github.com/ceamkrier/react-native-peeps
React Native implementation of the Open Peeps
https://github.com/ceamkrier/react-native-peeps
avatar-generator avatars customizable open-peeps
Last synced: about 1 month ago
JSON representation
React Native implementation of the Open Peeps
- Host: GitHub
- URL: https://github.com/ceamkrier/react-native-peeps
- Owner: CeamKrier
- License: mit
- Created: 2020-03-02T18:11:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T09:05:04.000Z (almost 3 years ago)
- Last Synced: 2025-08-31T11:35:49.936Z (about 2 months ago)
- Topics: avatar-generator, avatars, customizable, open-peeps
- Language: JavaScript
- Homepage: https://www.opeeps.fun
- Size: 1.41 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-peeps
React-native implementation of the hand drawn illustration library called [Open Peeps](https://www.openpeeps.com/)
## Installation
```
npm install react-native-peeps
```
Module depends on react-native-svg, so install it too.
```
npm install react-native-svg
```
If your React Native version is below 0.60 the auto-linking feature won't work. You need to follow the steps to complete your installation of the [react-native-svg](https://github.com/react-native-community/react-native-svg#manually).
Otherwise, running the `npm install react-native-svg` command will be sufficient.
## Usage
```javascript
import { StyleSheet } from 'react-native'
import Peep, { Accessories, Body, Face, FacialHair, Hair } from 'react-native-peeps'
const App = () => {
return (
)
}
const styles = StyleSheet.create({
peepStyle: {
width: 200,
height: 200,
justifyContent: 'center',
alignSelf: 'center'
}
})
```
To use circular version
```javascript
import { StyleSheet } from 'react-native'
import { CirclePeep, Accessories, Body, Face, FacialHair, Hair } from 'react-native-peeps'
const App = () => {
return (
)
}
const styles = StyleSheet.create({
circleStyle: {
backgroundColor: '#F3D34A',
width: 180,
height: 180,
alignSelf: 'center',
borderRadius: 100,
overflow: 'hidden',
borderWidth: 3,
borderColor: 'black'
}
})
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Thanks :raised_hands:
## License
[MIT]([https://choosealicense.com/licenses/mit/](https://choosealicense.com/licenses/mit/))