Avatar
Avatars can be used to represent people or objects. It supports images, icons, or letters.
import { Avatar } from '@redshank/native';
Examples
Text Avatar
The basic using text prop
Color And Size
The custom color or size avatar
Avatar Type
Change type into circle or square
With Image
Avatar render image
With Icons
Show an icon instead of text or image
Count Text
Show quantity letter in Avatar
Pressable
Pressable avatar
Icon Props
Api props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | FunctionComponent ComponentClass | React Element | Wrapper to avatar element | View or Ripple |
| ImageComponent | FunctionComponent ComponentClass | React Element | Wrapper to image element | ImageRN |
| color | ThemeColor | ThemeColor | string color format valid | getRandomColor |
| icon | IconObject | IconObject | Size icon | - |
| imageProps | object | ImageProps | Image props when passing the src prop | - |
| showCountText | number all | Number or all | show all text or number letter | 2 |
| size | number | Number | Size icon | 40 |
| src | ImageSrcType | Absolute path or url | Render image for avatar | - |
| style | StyleProp<ViewStyle> | Object | Style for wrapper element | - |
| text | string | String | Text for show if your pass src prop, text will be placeholder | - |
| textColor | ThemeColor | ThemeColor | Color of text | white or black |
| type | AvatarType | circle square | Avatar type variant | circle |
| Other Props | any | Other props | Interactive props for element | - |
Base Properties
type BaseProperties = {
onBlur?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onFocus?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
onPress?: ((event: GestureResponderEvent) => void) | undefined;
onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
};
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.