Unhandled JS Exception: Cannot read property 'Pie' of undefined

when accessing properties from StyleSheet.create() it will return a number instead of an object. in the propType imageStyle its expecting an object which isn't 100% compatible. you should also say it can be a number.

Please accept Baptiste-Garcin PR.

with version 0.6.0 the styles was passed to the ImageComponent, with the new version the are overrided:

style={StyleSheet.absoluteFill}

how can I create rounded images with the new version?

could it be a solution to use both styles on the image and not on the view:

style={[StyleSheet.absoluteFill, style]}

===update===

I just see the pull request #41 and your remark, what about two styles props one for the ViewWrapper and one for the image?

see my pull request #45

I have followed the example about ProgressPie and the application is not working.
I follow the first example about ProgressBar and it's working fine.
How could I solve it ?

Can we have events for image errors or timeouts?

When using this component I get the above error pointing to:

ImageProgress._this2.handleLoadStart
index.js:28

which relates to:

handleLoadStart = () => {
    if (!this.state.loading && this.state.progress !== 1) {

Just incase, I'm using:

"react": "^15.1.0",
"react-native": "^0.28.0",
"react-native-image-progress": "^0.6.0",

no component found for view with name artshape

In the latest React-Native master commits, rendering children inside an <Image> tag throws a yellowbox warning and will soon be removed. A suggested replacement is <ImageBackground>, facebook/react-native@9637dd4

Hi, I've installed both libraries, and am using ProgressCircle:

import Image from 'react-native-image-progress';
import ProgressCircle from 'react-native-progress/Circle';

... 

<Image
        source={{ uri: 'http://loremflickr.com/640/480/dog' }}
        indicator={ProgressCircle}
        indicatorProps={{
          showsText: true,
        }}
        style={{
          width: 320,
          height: 240,
        }}
 />

But the indicator just spins randomly, no signal of any progress and no text showed as well. After a while the picture is rendered.

I also tried adding indeterminate: false into indicatorProps. This time it shows text but is locked at 0%; then after a while picture is rendered.

What possibly have I done wrong?

Progress does not work on android because onProgress Image callback is iOS only.

Hi,

Thanks for your library, now there is a warning message in the console, the blog address.

When I updated to v0.20 (from v0.18) I get the following error using the image loader and progress components.

<ImageLoader
    indicator={Progress.CircleSnail}
    indicatorProps={{
        size: this.props.indicatorSize || 60,
        color: colour.blue
    }}
    threshold={100}
    {...this.props}
/>

Could you please provide an implementation with a threshold property? If the request finished before the threshold is reached, it will not show any loadingIndicator at all.

In my case it looks very strange when I'm going to show a'lot of cached images. It will flicker the indicator in and out.

I could try to implement it myself, if I got some time next week. What do you think about this feature?

Thanks a'lot!

the image was loaded, and shown and the progressbar do not disappear after some times

Hey,
this library looks pretty good. Any chances the pending PR's are going to get merged or are there reasons why they aren't merged?

Thanks
Daniel

Any example on how to use renderError to have an image fallback?

Is it possible to run this module's ES6 through babel to compile down to ES5 before publishing to NPM? This way we can use this library on web projects via react-native-web!

react native version 0.21

During the loading the progress regresses backward sometimes. Does it know the total image size initially? In my case it goes up and goes down even with the pourcent showing:

Here is the code that I am using:

<Image
source={{uri: 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg'}}
style={[styles.image]}
indicator={Progress.Circle}
indicatorProps={{
size: 80,
showsText: true,
}}
/>

drunk keyboard

use Progress.Pie is OK

Hi,When I load too many images in the list, I will execute the renderError function. Is there a solution?

whether we can use if in the event of an error I change to the following package: https://github.com/avishayil/react-native-user-avatar, is it possible?

i.e. using the renderIndicator callback's progress parameter?

How to use the renderIndicator prop?

I would like to show image loading progress for large images.

Hi Joel, incredible work with your node modules! I'm trying to integrate image-progress and lightbox module you have. I saw #8 so I'm pretty sure its possible but I'm trying to use your refactor branch for a zoomable image (https://github.com/oblador/react-native-lightbox/tree/navigator-refactor).

I tried looking at the source in your lightbox module but I dont see a direct use of the component anywhere. Any tips?

Hey there. I receive several "Could not find image file" yellow box warning when using this component. Any ideas how to "fix" this?

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

const ImageComponent = props => {
    const style = [props.style, { borderRadius: 8 }];
    const newProps = { ...props, style };
    return <Image {...newProps} />;
};

const ImageProgress = createImageProgress(ImageComponent);

 <ImageProgress
            renderIndicator={() => (
                <ActivityIndicator
                    animating={true}
                    color={styles.thumbnailIndicatorColor}
                    size="small"
                    style={{ position: "absolute", right: 20 }}
                />
            )}
            source={{ uri: document.thumbnail }}
            style={styles.thumbnail}
        />

resizeMode = {'cover'}

Hello,

Does the lib support svg files ? I am trying to use the lib react-native-svg-uri in the renderIndicator() of the PlaceholderImage() but it seems that it doesn't work because I receive an error message : Failed prop type : Invalide prop 'source' supplied to 'Image'.

Thanks !

If you have something like

<Image>
    <Text />
</Image>

The text will get hidden after Image is loaded

Hello @oblador !

I've tried custom image FastImage:

And I see progress is loading forever (even that image is loaded).
Maybe this related DylanVann/react-native-fast-image#37

For those of us who may have a completely different idea of how to show the progress indicator (and to save you from serving requests for different styles) you might consider adding a generic callback and/or event in the forms:

<Image indicator={(progress) => console.log(`${Math.round(progress * 100)}%`)}/>

or

<Image ref="blah"/>
...
this.refs.blah.on('progress', (progress) => console.log(`${Math.round(progress * 100)}%`));

Nice work so far! :)

Can you provide caching of images anytime soon? When re-rendering the host component - I don't want to fetch the images again and again in case they are from external source.

Hey!

First, I just realised you were responsible for at least half of the components I use on my current project, and they are all awesome, so thank you deeply!

Funnily enough, I have a very small issue when combining the image progress and your awesome lightbox : When you tap on the Image to "grow", you can see the loader in front of the image for something like 300ms, and then disappear.

This is obviously not a pressing issue, and more of a heads up, I'm sure it's nothing!

Again thanks for your absolutely wonderful work, I'll start following what you do, awesome you!

Hi folks,

There is some way to do that? I'm trying with onError method but the image still loading.

Thanks!

What the title says..

Doesn't the onLayout prop get passed to the Image within?

Upgraded to the latest version v1.1.0, the loading indicator is still showing when image is already in cache.

After upgrading to 1.0.0, a bunch of my Image components are not being correctly sized. I am applying height and width via the style prop:

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

<Image
  ...
  source={...}
  style={{
    height: 50,
    width: 200,
  }}
  ...
/>

However on 1.0.0, these height and width style attributes are not being respected and the image is not being resized. The images are rendering at the source image's natural height and natural width.

Hi,

The resizeMode props for image is not working (or maybe, I don't know how to use it)...

Here is my component :
<Image style={ style.image__element } source={{uri: this.props.randomBeer.image_url }} indicatorProps={{ color: '#B53409', size: 'large' }} ></Image>

Here is my style :
image__element: { flex: 1, resizeMode: 'contain' }

Is there an alternative ?

Thanks

I am using this package along with react-native-fast-image. The first time when the image is opened, the progress bar is shown as expected and the progress bar disappears after the image is downloaded. But after that, when I view the image again, the progress bar is shown again and it just stays there. I expected the progress bar to not show up at all as the image is already cached. I tried using different values for threshold but that didn't help.

Below is the code to show the image

<ImageWithProgress
          source={{ uri: this.props.imagePath }}
          style={{
            position: 'absolute',
            right: 0,
            left: 0,
            top: 0,
            bottom: 0
          }}
          indicator={ProgressBar}
          indicatorProps={{
            size: 80,
            borderWidth: 0,
            color: 'rgba(150, 150, 150, 1)',
            unfilledColor: 'rgba(200, 200, 200, 0.2)'
          }}
          threshold={200}
        />

Below is a gif showing the continuous progress bar

I am not sure if this is an issue or I am missing something in the code. Please comment either ways.

I am trying this on iOS emulator.

Version information:
react-native-image-progress - 1.0.1
react-native-progress - 3.4.0
react-native-fast-image - 2.0.1
react-native - 0.52.4

I followed the instructions to install react-native-progress, and tested with the examples, it displays normally.
But when I copy the code in this repo's example folder to the project created with "react-native init",
run-ios only displays a blank screen, no error.

My package.json:

{
	"name": "ReactNativeImageProgress",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0-alpha.12",
		"react-native": "0.46.1",
		"react-native-image-progress": "^1.0.1",
		"react-native-progress": "^3.3.0"
	},
	"devDependencies": {
		"babel-jest": "20.0.3",
		"babel-preset-react-native": "2.1.0",
		"jest": "20.0.4",
		"react-test-renderer": "16.0.0-alpha.12"
	},
	"jest": {
		"preset": "react-native"
	}
}

My index.ios.js:

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View, AppRegistry } from 'react-native';

import Image from 'react-native-image-progress';
import * as Progress from 'react-native-progress';

const INDICATORS = [null, Progress.Bar, Progress.Circle, Progress.Pie];

const IMAGES = [
  'http://www.savethecat.com/wp-content/uploads/2015/06/cats.jpg',
  'http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg',
  'http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg',
  'http://media1.santabanta.com/full1/Animals/Cats/cats-87a.jpg',
  'http://awesomegifs.com/wp-content/uploads/cat-smacks-at-hands.gif',
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 300,
    height: 200,
  },
});

const pseudoRandom = () => 0.5 - Math.random();

const getRandomIndicator = () => INDICATORS.slice(0).sort(pseudoRandom)[0];

const getRandomImage = excludeUri => {
  const imageUrl = IMAGES.filter(
    uri => !excludeUri || excludeUri.indexOf(uri) !== 0,
  ).sort(pseudoRandom)[0];
  return `${imageUrl}?rand=${Date.now()}`;
};

const getRandomState = excludeUri => ({
  imageUri: getRandomImage(excludeUri),
  indicator: getRandomIndicator(),
});

export default class ReactNativeImageProgress extends Component {
  constructor(props) {
    super(props);
    this.state = getRandomState();
  }

  randomize = () => {
    this.setState(getRandomState(this.state.imageUri));
  };

  render() {
    console.log(this.state);
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.randomize}>
          <Image
            key={this.state.imageUri}
            source={{ uri: this.state.imageUri }}
            indicator={this.state.indicator}
            style={styles.image}
            onLoaded={() => console.log('Image was loaded!')}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

AppRegistry.registerComponent('ReactNativeImageProgress', () => ReactNativeImageProgress);

I tried to clone this repo, and yarn inside example folder, run-ios inside it works just fine, strange.

It would be awesome if this package exposed an isWeb prop or something of the sort. Instead of importing always from react-native, when isWeb prop is true the components import from react-native-web.

All of the components used by this package are exported by react-native-web, so adding this simple if / else would allow this package to work on web.

Thoughts?

I tried to implement for avatar image, but the borderRadius props doesn't work to the image.

How to change the progress state for example to 100% on image error?

Because I don't see any possible solution on it...

Do you have plans to support Android?