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

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>
    }
}

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 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
placeholderSource	Image.propTypes.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	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

Installation

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