React-Native Avatar

React Native Avatars can be used to represent people in a graphical way with support for falling back to using the user's initials on a colored background as the avatar if valid source is not present.

Installation

npm install --save rn-avatar
npm install --save react-native-vector-icons
react-native link react-native-vector-icons

Props

| Prop | Type | Default | Description | |--|--|--|--| | activeOpacity | number | 0.2 | opacity when pressed | | avatarStyle | object (style) | none | Avatar image style | | containerStyle | object (style) | none | Outer container style | | editButton | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } | none | Vector Icon props to be user for edit button | | icon | object {name: string, color: string, size: number, type: string } | (default is Material, or choose from supported icon sets | Displays an icon as the main content of the Avatar. Cannot be used alongside title. When used with the source prop it will be used as the placeholder. | | iconStyle | object (style) | none | styling for icon component | | imageProps | object | none | Optional properties to pass to the avatar e.g "resizeMode" | | onEditPress | function | none | Callback function when pressing on the edit button | | onLongPress | function | none | Callback function when long pressing component | | onPress | function | none | Callback function when pressing the component | | overlayContainerStyle | object (style) | none | Style for the view outside image or icon | | placeholderStyle | object (style) | { backgroundColor: '#BDBDBD' } | Adds style to the placeholder wrapper | | rounded | boolean | false | Makes the avatar circular | | size | string or number | Sizes.SMALL | Size of the avatar, choose from supported size sets or give any number | | showEditButton | boolean | false | Shows an edit button over the avatar | | source | object (style) | none | Image source | | title | string | none | To render initials of title inside placeholder | | titleStyle | object (style) | none | Style for the title | | renderPlaceholderContent | function | default title | Custom placeholder element in place of title | | Component | function | TouchableHighlight | Component for enclosing element | | ImageComponent | React component or element | Image | Custom ImageComponent for Avatar |

Avatar Size Set

import { Sizes } from 'rn-avatar';

| Size | Description | |--|--| | Sizes.EXTRA_SMALL | extra small size avatar | | Sizes.SMALL | return small size avatar | | Sizes.MEDIUM | return medium size avatar | | Sizes.LARGE | return large size avatar | | Sizes.EXTRA_LARGE | return extra large size avatar |

Icon Set

import { IconTypes } from 'rn-avatar';

1. IconTypes.AntDesign
2. IconTypes.Entypo
3. IconTypes.EvilIcon
4. IconTypes.Feather
5. IconTypes.FontAwesome
6. IconTypes.FontAwesome5
7. IconTypes.Foundation
8. IconTypes.Ionicon
9. IconTypes.Material
10. IconTypes.MaterialCommunity
11. IconTypes.Octicon
12. IconTypes.SimpleLineIcon
13. IconTypes.Zocial

Example

import Avatar, { IconTypes, Sizes } from 'rn-avatar';

class Example extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <Avatar
          size={Sizes.SMALL}
          title='Ava Andrew'
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          size={Sizes.MEDIUM}
          source={require('../assets/images/logo.png')}
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          size={Sizes.MEDIUM}
          title='Lucifer J'
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          icon={{
            name: 'home', type: IconTypes.Material,
          }}
          size={Sizes.LARGE}
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          icon={{
            name: 'user', type: IconTypes.FontAwesome,
          }}
          size={120}
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          rounded
          size={Sizes.EXTRA_LARGE}
          title='Lucy Watson'
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          size={Sizes.EXTRA_LARGE}
          source={{ uri: 'http://www.sarkarinaukrisearch.in/wp-content/uploads/2019/03/Beautiful-Wallpaper-1.jpg' }}
          title='Lucy Smith'
          containerStyle={{ margin: 10 }}
        />
        <Avatar
          rounded
          showEditButton
          size={Sizes.EXTRA_LARGE}
          source={{ uri: 'https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg' }}
          title='Grace'
          containerStyle={{ margin: 10 }}
          onEditPress={()=> console.log('edit button pressed')}
          onLongPress={()=> console.log('component long pressed')}
          onPress={()=> console.log('component pressed')}
          editButton={{
            name: 'edit', type: IconTypes.Entypo
          }}
        />
      </View>
    );
  }
}

License

Licensed under the MIT