# react-native-styled-image-progress

> Progress indicator for networked images, supports progress bar and spinner, supports styling in image

Latest version **0.0.2** (published 2017-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-styled-image-progress
pnpm add react-native-styled-image-progress
yarn add react-native-styled-image-progress
bun add react-native-styled-image-progress
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2017-12-22 |
| First published | 2017-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Turfa Auliarachman |
| Maintainers | turfaa |
| Keywords | react-native, react-component, react-native-component, react, mobile, ios, ui, image, progress, bar, progressbar, spinner, activityindicator, loading, indicator |

## Links

- npm: https://www.npmjs.com/package/react-native-styled-image-progress
- Repository: https://github.com/turfaa/react-native-styled-image-progress
- Issues: https://github.com/turfaa/react-native-styled-image-progress/issues
- npm.io page: https://npm.io/package/react-native-styled-image-progress

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2017-12-22
- 0.0.1 — 2017-12-22

## README

# react-native-styled-image-progress [![npm version](https://img.shields.io/npm/v/react-native-styled-image-progress.svg?style=flat)](https://www.npmjs.com/package/react-native-styled-image-progress)
*Progress indicator for networked images in React Native, supporting styled image*

## Notes from Turfa

On my current project, I need to use this package on a circled image. Instead of doing some hacks,
I decided to edit the package myself for a more general usage. So here it comes.

I don't edit this readme much. Basically, if you want to add style to your image component,
just pass the style as `imageStyle` props.

## Installation

```
npm install react-native-styled-image-progress --save
```

**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';
<Image
  source={{ uri: 'http://loremflickr.com/640/480/dog' }}
  indicator={ProgressBar}
  style={{
    width: 320,
    height: 240,
  }}/>
```

## Properties

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

| Prop | Description | Default |
|---|---|---|
|**`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 receiving 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';
<Image
  source={{ uri: 'http://loremflickr.com/640/480/dog' }}
  indicator={Progress.Pie}
  indicatorProps={{
    size: 80,
    borderWidth: 0,
    color: 'rgba(150, 150, 150, 1)',
    unfilledColor: 'rgba(200, 200, 200, 0.2)'
  }}
  style={{
    width: 320,
    height: 240,
  }}/>
```

## 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

---
_Source: https://npm.io/package/react-native-styled-image-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._