https://github.com/oblador/react-native-image-progress

Progress indicator for networked images in React Native
https://github.com/oblador/react-native-image-progress

Last synced: about 1 month ago
JSON representation

Progress indicator for networked images in React Native

• Host: GitHub
• URL: https://github.com/oblador/react-native-image-progress
• Owner: oblador
• License: mit
• Created: 2015-07-16T12:22:46.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2022-01-02T13:27:01.000Z (over 2 years ago)
• Last Synced: 2024-05-15T14:06:58.000Z (4 months ago)
• Language: JavaScript
• Size: 526 KB
• Stars: 1,704
• Watchers: 30
• Forks: 179
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-image-progress [![Travis](https://img.shields.io/travis/oblador/react-native-image-progress.svg)](https://travis-ci.org/oblador/react-native-image-progress) [![npm version](https://img.shields.io/npm/v/react-native-image-progress.svg)](https://www.npmjs.com/package/react-native-image-progress)

*Progress indicator for networked images in React Native*

## Installation

```

yarn add react-native-image-progress

```

**Note: Progress indicators has been broken out to a separate component; [react-native-progress](https://github.com/oblador/react-native-progress). To use them, please follow installation instructions for that package.**

## Usage

```js

import Image from 'react-native-image-progress';

import ProgressBar from 'react-native-progress/Bar';

```

## Properties

Any [`Image` property](http://facebook.github.io/react-native/docs/image.html) and the following:

| Prop | Description | Default |

|---|---|---|

|**`imageStyle`**|Styles applied to the inner image component.|*None*|

|**`indicator`**|A component to display progress, will be passed a `progress` prop with a number between 0 and 1 and `indeterminate` a boolean wether or not component has started recieveing data.|`ActivityIndicator`|

|**`indicatorProps`**|An object of props being passed to the `indicator` component. To disable indeterminate state, pass `{indeterminate: false}`.|*None*|

|**`renderIndicator(progress, indeterminate)`**|Function to render your own custom indicator, useful for something very simple. If not, consider breaking it out to a separate component and use `indicator` prop instead.|*None*|

|**`renderError(error)`**|Function to render your own custom error message or image fallback.|*None*|

|**`threshold`**|Number of milliseconds after mount to wait before displaying the indicator. Basically a workaround for cached images not to flash a spinner. Set to `0` to disable.|`50`|

Note: `onLoad*` events are bubbled up, so if you want to do some custom thing when the image is loaded for example. 

## Demo

![image-progress-demo](https://cloud.githubusercontent.com/assets/378279/10882718/0f33e7b4-813b-11e5-9f6c-90df8b9050b8.gif)

## Example 

Check full example in the `Example` folder. 

### Pie

```js

import Image from 'react-native-image-progress';

import Progress from 'react-native-progress';

```

## Using a custom image component

For some use cases such as better GIF support or more granular control over caching you might want to use a custom image component, to do this simply use the `createImageProgress` function: 

```js

import { createImageProgress } from 'react-native-image-progress';

import FastImage from 'react-native-fast-image';

const Image = createImageProgress(FastImage);

``` 

*NOTE: the alternative image implementation must conform to the core `Image` component life cycle props, notably `onProgress`, `onError`, `onLoad` and `onLoadStart`.*

## License

[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson