• Stars
    star
    1,723
  • Rank 27,083 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Progress indicator for networked images in React Native

react-native-image-progress Travis npm version

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. To use them, please follow installation instructions for that package.

Usage

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

Example

Check full example in the Example folder.

Pie

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:

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. © Joel Arvidsson

More Repositories

1

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
JavaScript
17,427
star
2

react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
JavaScript
9,838
star
3

react-native-progress

Progress indicators and spinners for React Native
JavaScript
3,628
star
4

hush

🤫 Noiseless Browsing – Content Blocker for Safari
JavaScript
3,264
star
5

react-native-keychain

🔑 Keychain Access for React Native
Kotlin
3,194
star
6

react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
JavaScript
2,818
star
7

react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
JavaScript
2,450
star
8

loki

👁 Visual Regression Testing for Storybook
JavaScript
1,778
star
9

angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
JavaScript
1,482
star
10

react-native-performance

📐 Monitor and measure React Native performance
TypeScript
929
star
11

react-native-store-review

Rate on App/Play Store directly in your React Native app
Java
751
star
12

react-native-shimmer

Simple shimmering effect for any view in React Native
Java
700
star
13

react-native-esbuild

Fast bundler and dev server for react-native using esbuild
JavaScript
595
star
14

react-native-parallax

Parallax effects for React Native using Animated API
JavaScript
585
star
15

react-native-vector-image

iOS/Android native vector assets generated from SVG
JavaScript
310
star
16

react-native-pinchable

Instagram like pinch to zoom for React Native
Java
225
star
17

angular-parallax

Lightweight & performant parallax scrolling for angular.js.
JavaScript
203
star
18

angular-lazytube

Lightweight, responsive, lazy loaded YouTube videos that degrades gracefully.
JavaScript
45
star
19

diglett

Keep your JS project lean by detecting duplicate dependencies
JavaScript
44
star
20

esbuild-server

Fast, lightweight and powerful development server for esbuild
TypeScript
38
star
21

react-native-oxc

10x your react-native builds with OXC
TypeScript
28
star
22

oblador.github.io

Landing page for my GitHub projects
HTML
10
star
23

oblador

5
star
24

node-cloud-imager

Powerful yet simple way to apply filters/crop/resize images and upload to cloud providers (Amazon S3, Rackspace, Azure).
JavaScript
3
star
25

node-ups-sdk

JavaScript
3
star
26

sovra

🤏 Rust-based Test Decider for JavaScript using Oxc
Rust
2
star
27

expo-requestidlecallback-issue

TypeScript
1
star
28

react-native-android-autolinking-bug-repro

TypeScript
1
star
29

.github

1
star
30

react-native-fabric-image-unicode-issue

TypeScript
1
star