V99Image¶
A component for displaying images.
I. Props¶
| Name | Type | Default | Description |
|---|---|---|---|
| source | ImageURISource | ImageRequireSource | - | Path of image |
| thumbnail | boolean | false | Add thumbnail for image |
| marginBottom | V99Spacing | - | Set the bottom margin of image |
| marginLeft | V99Spacing | - | Set the left margin of image |
| marginRight | V99Spacing | - | Set the right margin of image |
| marginTop | V99Spacing | - | Set the top margin of image |
| margin | V99Spacing | - | Set the margin for all four sides of image |
| marginHorizontal | V99Spacing | - | Set the left and right margin of image |
| marginVertical | V99Spacing | - | Set the top and bottom margin of image |
| radius | number | - | Set border radius for four corner of image |
| topLeftRadius | number | - | Set top left border radius of image |
| topRightRadius | number | - | Set top right border radius of image |
| bottomLeftRadius | number | - | Set bottom left border radius of image |
| bottomRightRadius | number | - | Set bottom right border radius of image |
| height | number | string | - | Set height for image |
| width | number | string | - | Set width for image |
| size | number | - | Set size for image including height and width |
| resizeMode | 'cover' | 'contain' | 'stretch' | 'center' | 'cover' | Determines how to resize the image when the frame doesn't match the raw image dimensions. |
| blurHashEnabled | boolean | - | Set blur for image |
| containerStyle | StyleProp<ViewStyle> | - | Set style for container including image |
| disabled | boolean | - | Whether the press behavior to image is disabled. |
| onPress | () => void | - | Called when a long-tap gesture is detected. |
II. Usage¶
Example¶
<V99Image
width={100}
height={100}
marginTop={V99Spacing.s24}
blurHashEnabled={false}
thumbnail={true}
resizeMode={'contain'}
source={{
uri: 'https://wallpaper.dog/large/20533651.jpg',
}}
/>
Demo¶
