# react-native-interactive-avatar

> An avatar allowing you to click on it to change the image

Latest version **2.0.0** (published 2017-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-interactive-avatar
pnpm add react-native-interactive-avatar
yarn add react-native-interactive-avatar
bun add react-native-interactive-avatar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-09-18 |
| First published | 2016-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | Adrien Thiery |
| Maintainers | adrienthiery, nram |
| Keywords | Avatar, react-native, pick, interactive |

## Links

- npm: https://www.npmjs.com/package/react-native-interactive-avatar
- Repository: https://github.com/Osedea/react-native-interactive-avatar
- Homepage: https://github.com/Osedea/react-native-interactive-avatar#readme
- Issues: https://github.com/Osedea/react-native-interactive-avatar/issues
- npm.io page: https://npm.io/package/react-native-interactive-avatar

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.0
- [react-native-image-picker](https://npm.io/package/react-native-image-picker.md) ^0.26.7

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 2.0.0 (latest) — 2017-09-18
- 1.1.0 — 2017-02-01
- 1.0.7 — 2016-08-19
- 1.0.6 — 2016-08-19
- 1.0.5 — 2016-06-03
- 1.0.4 — 2016-06-01
- 1.0.3 — 2016-05-31
- 1.0.2 — 2016-05-31
- 1.0.1 — 2016-05-31
- 1.0.0 — 2016-05-31

## README

# react-native-interactive-avatar
An avatar allowing you to click on it to change the image

# [Documentation For React-native 0.26.2+ to 0.40](https://github.com/Osedea/react-native-interactive-avatar/tree/b63c2c131d349b0b8377f6770715b6f1f17bebc9)
# For React-native 0.40 to 0.47, use ^1.0.0
# For React-native 0.48+, use ^2.0.0

# For React-native 0.40+

The component might work on older versions

## Example

```
import Avatar from 'react-native-interactive-avatar';

export default class Example extends Component {
    handleImageChange = (response) => {
        // Do something

        // response looks like : {
        //      data: "data:image/jpeg;base64,/9j/4AAQSkZJRg...", // Base64
        //      fileSize: 474486,
        //      height: 531,
        //      isVertical: false,
        //      origURL: "assets-library://asset/asset.JPG?id=106E99A1-4F6A-45A2-B320-B0AD4A8E8473&ext=JPG",
        //      uri: "file:///...",
        //      width: 800,
        // }
    };

    render() {
        <View>
            <Avatar
                uri={'https://media2.giphy.com/media/sbLpwwHlgls8E/giphy.gif'}
                size={'default'}
                placeholderSource={require('example/images/placeholder.png')}
                interactive
                onChange={this.handleImageChange}
            />
            <Avatar
                source={require('example/images/logo.png')}
                size={'medium'}
            />
            <Avatar
                source={require('example/images/logo.png')}
                size={'small'}
            />
            <Avatar
                withBorder
                placeholderSource={require('example/images/placeholder.png')}
                interactive
                style={{
                    borderColor: '#000000',
                    borderWidth: 1,
                    marginLeft: 5,
                }}
                size={'verySmall'}
            />
        </View>
    }
}
```

![Example](example.png)

See more in the [Example Project](./example)

:warning: Use npm to install the dependencies of the example project. Yarn is ignoring the `.npmignore` and therefore installing `example/` in the `node_modules/react-native-interactive-avatar` relative dependency.

## Properties

Property name | Type | Remark
--- | --- | ----
interactive| React.PropTypes.bool | if true, allows to select a new image on Press (if no onPress function is defined)
onChange| React.PropTypes.func | called on change when interactive is true
onChangeFailed| React.PropTypes.func | called on change failure when interactive is true
onPress| React.PropTypes.func |
overlayColor| React.PropTypes.string | On android only, should be the same than the backgroundColor of the surrounding View
pickerOptions | ImagePicker.options | See [react-native-image-picker](https://github.com/marcshilling/react-native-image-picker)
placeholderSource | [Image.propTypes.source](https://facebook.github.io/react-native/docs/image.html#source) | A source for the Image that is displayed when `source` and `uri` are empty
placeholderURI | React.PropTypes.string | A **distant** source for the Image that is displayed when `source` and `uri` are empty
size| React.PropTypes.oneOf([ 'default', 'mini', 'verySmall', 'small', 'medium' ]) | A set of sizes that you can set for the Avatar
source| [Image.propTypes.source](https://facebook.github.io/react-native/docs/image.html#source) | The source Image to display
style| Image.propTypes.style | The style of the Image
uri | React.PropTypes.string | A **distant** source to display
withBorder| React.PropTypes.bool | Should it have a border?

This component uses the awesome [react-native-image-picker](https://github.com/marcshilling/react-native-image-picker)

## Installation

```
    npm i --save react-native-interactive-avatar
    react-native link react-native-image-picker
```

---
_Source: https://npm.io/package/react-native-interactive-avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._