react-native-gifted-avatar
Cross platform React Native avatar UI component with built-in common features:
Avatar Options:
- Image as avatar
- Text placeholder as avatar
- Icon placeholder as avatar
Utilities:
- Icon/button badge
- Status indicator
Styles:
- Rounded
- Size
Installation
Inside your project:
npm install react-native-gifted-avatar --save
Demo
Change logs
Road Map
API
Prop Types
const UtilTypes = NONE: 'NONE' ICON: 'ICON' INDICATOR: 'INDICATOR'; const propTypes = /* ===== CONFIGS ===== */ size: PropTypesnumber rounded: PropTypesbool containerStyle: ViewPropTypesstyle avatarContainerComponent: PropTypes avatarContainerProps: PropTypesobject avatarContainerStyle: ViewPropTypesstyle /* ===== AVATAR CONTENT ===== */ source: ImagepropTypessource imageStyle: ImagepropTypesstyle title: PropTypesshape text: PropTypesstring color: PropTypesstring style: TextpropTypesstyle icon: PropTypesshape ...iconPropTypes emptyIcon: PropTypesshape ...iconPropTypes /* ===== UTIL ===== */ utilType: PropTypes utilIcon: PropTypesshape ...iconPropTypes onPress: PropTypesfunc underlayColor: PropTypesstring indicator: PropTypesshape size: PropTypesnumber status: PropTypesstring types: PropTypes style: ViewPropTypesstyle ; const defaultProps = size: 100 rounded: false containerStyle: null avatarContainerComponent: View avatarContainerProps: {} avatarContainerStyle: null source: null imageStyle: null title: color: DEFAULT_COLORS3 icon: color: '#fff' emptyIcon: color: '#fff' utilType: UtilTypesNONE utilIcon: name: 'mode-edit' color: '#fff' underlayColor: DEFAULT_COLORS0 indicator: types: key: 'active' color: 'lightgreen' key: 'inactive' color: 'tomato' status: 'active' ;