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

Documentation For React-native 0.26.2+ to 0.40

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

See more in the Example Project

⚠️ 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 nameTypeRemark
interactiveReact.PropTypes.boolif true, allows to select a new image on Press (if no onPress function is defined)
onChangeReact.PropTypes.funccalled on change when interactive is true
onChangeFailedReact.PropTypes.funccalled on change failure when interactive is true
onPressReact.PropTypes.func
overlayColorReact.PropTypes.stringOn android only, should be the same than the backgroundColor of the surrounding View
pickerOptionsImagePicker.optionsSee react-native-image-picker
placeholderSourceImage.propTypes.sourceA source for the Image that is displayed when source and uri are empty
placeholderURIReact.PropTypes.stringdistant source for the Image that is displayed when source and uri are empty
sizeReact.PropTypes.oneOf([ ‘default’, ‘mini’, ‘verySmall’, ‘small’, ‘medium’ ])A set of sizes that you can set for the Avatar
sourceImage.propTypes.sourceThe source Image to display
styleImage.propTypes.styleThe style of the Image
uriReact.PropTypes.stringdistant source to display
withBorderReact.PropTypes.boolShould it have a border?

This component uses the awesome react-native-image-picker

Installation

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