id | title | slug |
---|---|---|
avatar |
Avatar |
/avatar |
import Usage from './usage/Avatar/Avatar.md'
Avatars are found all over ui design from lists to profile screens.
They are commonly used to represent a user and can contain photos, icons, or even text.
- Avatar.Accessory - This is used for adding an accessory to the Avatar. Receives either all Icon or Image props.
Component for enclosing element (eg: TouchableHighlight, View, etc).
Type | Default |
---|---|
any | onPress | |
Custom ImageComponent for Avatar.
Type | Default |
---|---|
any |
Opacity when pressed.
Type | Default |
---|---|
number |
Style for avatar image.
Type | Default |
---|---|
ImageStyle |
Styling for outer container.
Type | Default |
---|---|
StyleProp<ViewStyle> |
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.
Type | Default |
---|---|
AvatarIcon |
Extra styling for icon component.
Type | Default |
---|---|
StyleProp<TextStyle> |
Optional properties to pass to the avatar e.g "resizeMode".
Type | Default |
---|---|
Partial<ImageProps> |
Callback function when long pressing component.
Type | Default |
---|---|
() => void |
Callback function when pressing component.
Type | Default |
---|---|
() => void |
Style for the view outside image or icon.
Type | Default |
---|---|
StyleProp<TextStyle> |
Adds style to the placeholder wrapper.
Type | Default |
---|---|
StyleProp<ViewStyle> |
Custom placeholder element (by default, it's the title).
Type | Default |
---|---|
any |
Makes the avatar circular.
Type | Default |
---|---|
boolean |
Size of the avatar.
Type | Default |
---|---|
number | "small" | "medium" |
Image source to be displayed on avatar.
Type | Default |
---|---|
ImageSourcePropType |
Renders title in the placeholder.
Type | Default |
---|---|
string |
Style for the title.
Type | Default |
---|---|
StyleProp<TextStyle> |
Style prop inherited from TextProps and TouchableWithoutFeedbackProperties
Only exist here so we can have ViewStyle or TextStyle
Style
Add custom styling to the accessory of avatar.
Type | Default |
---|---|
(ViewStyle | TextStyle) & StyleProp<ImageStyle> & StyleProp<ViewStyle> |
The color of the underlay that will show through when the touch is active.
Add underlay color to the accessory of avatar.
Type | Default |
---|---|
ColorValue | #000 |