0.0.3 • Published 6 years ago
pro-image v0.0.3
ProImage
React native progressive image component.
Install
$ npm i pro-image
or
$ yarn add pro-imageUsage
Simple example:
import ProImage from 'pro-image';
const MyImageComponent = () =>
<ProImage
thumbnail={{ uri: 'lorem.ipsum/thumbnail.png' }}
image={{ uri: 'lorem.ipsum/big-image.png' }}
/>Properties
| Property | Is optional? | Default | Description |
|---|---|---|---|
| image | no | - | Image to render. |
| thumbnail | yes | null | The image to render with the same aspect ratio and the smallest resollution possible. |
| placeholder | yes | null | Placeholder image to render while the image is loading. (Note: placeholder will not show if there's a thumbnail) |
| resizeMode | yes | cover | Image resize mode. |
| style | yes | {} | Styles for the image. |
| containerStyle | yes | {} | Styles for the image container (View). |
| duration | yes | 1000 (ms) | Time in milliseconds that the fade effects lasts. |
Full example:
import ProImage from 'pro-image';
import placeholder from './path/to/placeholder.png';
const MyImageComponent = () =>
<ProImage
placeholder={placeholder}
thumbnail={{ uri: 'lorem.ipsum/thumbnail.png' }}
image={{ uri: 'lorem.ipsum/big-image.png' }}
containerStyle={{ margin: 4 }}
style={{ height: 100, width: 200 }}
resizeMode="contain"
/>Global properties
Set global values to all the images in your app.
Properties
| Property | Defalut | Description |
|---|---|---|
| duration | 1000 (ms) | Time in milliseconds that the fade effects lasts. |
| placeholder | null | Placeholder image. |
| blur | 1 | Blur radius for the thumbnail. |
Usage
Customize all options:
import ProImage from 'pro-image';
import placeholder from './path/to/placeholder.png';
ProImage.setDefaultConfig({
duration: 500,
placeholder,
blur: 2
});Changing just one value:
import ProImage from 'pro-image';
ProImage.setDefaultConfig({ duration: 750 });