This is not loading images

[Sharathnasa]

Hi,

I would like to thank you for creating this. I followed the instruction and tried to used the CachedImage functionality as shown below. But its not working.

return (<View style={styles.container}>
<CachedImage isBackground={true} source={{uri: props.results.img_url}} style={styles.imageStyle}>
            <Faded height={height / 12} color="#000000" direction="bottom">
                <View style={{
                    paddingVertical: 20, justifyContent: 'top', alignItems: 'center'
                }}>
                    <Text style={styles.nameStyle}>{props.results.name}</Text>
                </View>
            </Faded>
</CachedImage>
</View>)

I'm not getting any error as well. But images are not rendering. Can you please on this?

[wagslane]

Hi Sharathnasa, thanks for reaching out! I'm not sure I have enough information here to help yet. I would suggest the following debugging steps.

At each step run the app and see if the image renders. Find which step breaks the rendering, and if it turns out to be a bug on the component's side then I will be able to fix it.

1. Remove the child components, does it work now?
2. Remove your custom styles, does it work now?
3. Hard-code the image URI instead of using a variable, does it work now?
4. Remove the styles from the parent view, does it work now?

[nadideozturk]

I had the same issue (images not rendering without any error), my code was below:

<CachedImage
   style={{ flex: 1, width: null, height: 200 }}
   source={getMealImageSourceWithDeafult(meal)}
/>

When I changed width from null to 200:

<CachedImage
   style={{ flex: 1, width: 200, height: 200 }}
   source={getMealImageSourceWithDeafult(meal)}
/>

Now it works great, thanks for the library.

I'm having some trouble how to use below with your library:

require('../../assets/images/meal-placeholder.png');

because in my image source property helper:

export const getMealImageSourceWithDeafult = meal => (
    meal && meal.photoUrl ? { uri: meal.photoUrl } : defaultMealImage 
 );

you're expecting the scenario that returns the object with uri property but the other scenario is maybe not expected by your library or maybe I'm missing something. Maybe you would recommend me to use a wrapper that uses either Image or CachedImage component whether image comes from uri or hardcoded (so I wouldn't use CachedImage for hardcoded images which makes sense). Just an idea, maybe you'd want to support hardcoded images / images loaded from project assets (without duplicating on the disk cache somehow). fyi. Thanks again. I will take care of the asset image use case in my project.

[nadideozturk]

Update: For the issue I mentioned (ability to use asset images embedded in my package), I created my components/Image.js as:

import React from 'react';
import CachedImage from 'react-native-expo-cached-image';
import { Image as NativeImage } from 'react-native';

export default class Image extends React.PureComponent {
  render() {
    const { source } = this.props;
    if (source && source.uri) {
      return (
        <CachedImage {...this.props} />
      );
    }
    return (
      <NativeImage {...this.props} />
    );
  }
}

This allowed me to have mixed usage of network loaded and asset images (e.g. when rendering items that some have network loaded images some asset loaded images). My use case was displaying a default image (from package assets) when the user uploaded image is not present. Also if I need to make a CachedImage specific change etc, I can change from a single point.

[wagslane]

@nadideozturk Thanks for the feature request! I added an official ticket: https://github.com/lane-c-wagner/react-native-expo-cached-image/issues/3

I will work on this when I have time, or feel free to submit a pull request yourself!

[anfo000]

Hi @lane-c-wagner, thank you for taking the time and share with everyone this component.

I was having this same issue.. the image wasn't loading or at least it appeared that way.

After debuging for a while and looking at your code I found the Image and Image background had a View parent and even after I passed a width and height the styles where not applied to the view just the Images.

Just wanted to share this.

[wagslane]

Hi @lane-c-wagner, thank you for taking the time and share with everyone this component.

I was having this same issue.. the image wasn't loading or at least it appeared that way.

After debuging for a while and looking at your code I found the Image and Image background had a View parent and even after I passed a width and height the styles where not applied to the view just the Images.

Just wanted to share this.

Hey @anfo000 did this problem stop you from being able to use the component, or did you just need to tweak your implementation? If you have a recommended fix you would like me to make please open a new issue and include your code and what you expect to happen.

[anfo000]

Yeah, I just remove the wrapping <View> and it worked.

render() {
    if (this.props.isBackground)
      return (
        <ImageBackground
          {...this.props}
          source={this.state.imgURI ? { uri: this.state.imgURI } : null}>
          {this.props.children}
        </ImageBackground>
      );
    else
      return (
        <Image
          {...this.props}
          source={this.state.imgURI ? { uri: this.state.imgURI } : null}
        />
      );
}

Sorry for the if else syntax..