question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[IOS]RN 0.33 Support for defaultImageSource

See original GitHub issue

Hi @anvilabs . Great work, This component looks awesome. I have successfully integrated into my react project. But got one small Issue.

When passing the props to the component (renderContent) I am also passing the defaultSource which is a static file on the project folder . This works fine with the thumbnails but when loading the fullscreen view it shows a black view not the defaultSource. below is the code I have used.

Render Method

return ( <View> <Text style={styles.sectionHeaderText}>ADDITIONAL IMAGES</Text> <View style={styles.additionalImageContainer}> <ImageCarousel ref={(imageCarousel: ImageCarousel) => { this._imageCarousel = imageCarousel; }} renderContent={this.renderImage} > {this.state.imageList.map((url: string): ReactElement<any> => ( <Image style={styles.thumbnailImage} key={Math.random()} source={{uri:url}} defaultSource={{uri: './images/placeholder.jpg'}} /> ))} </ImageCarousel> </View> </View> )

renderImage method

return ( <Image style={styles.imageViewerImage} resizeMode={'contain'} onLoadStart={this.onImageLoadStart(i)} source={{uri:this.state.imageList[i]}} defaultSource={{uri: './images/placeholder.jpg'}} /> );

Is there anything I need to do to fix it…

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ismdcfcommented, Nov 16, 2016

The Image cache reset issue was because my apps default cache size being depleted. Added the following to Appdeligate.m didFinishLaunchingWithOptions method to increase it to 200 MB fixed the image cache resetting and now it works.

// Set app-wide shared cache NSUInteger cacheSizeMemory = 200*1024*1024; // 200 MB NSUInteger cacheSizeDisk = 200*1024*1024; // 200 MB NSURLCache *sharedCache = [[NSURLCache alloc] initWithMemoryCapacity:cacheSizeMemory diskCapacity:cacheSizeDisk diskPath:@"nsurlcache"]; [NSURLCache setSharedURLCache:sharedCache];

1reaction
binchikcommented, Oct 31, 2016

Hi, thank you for the issue. renderContent Image must have flex: 1 to fill the fullscreen view. If that doesn’t help you, please share whole component’s source code in a gist.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using HEIF or HEVC media on Apple devices - Apple Support
When you import HEIF or HEVC media from an attached iOS device to Photos, Image Capture, or a PC, the media might be...
Read more >
react-native-image-crop-picker - npm
iOS /Android image picker with support for camera, video, configurable compression, multiple images and cropping ...
Read more >
How to use default iOS images? - Stack Overflow
I know how to use images in iOS application. But I don't know how to use default images like share or bookmark icons...
Read more >
Creating XAML Markup Extensions - Xamarin - Microsoft Learn
You can explore the source code of the standard markup extensions described ... It uses the Source property to call the static ImageSource....
Read more >
opacity - CSS: Cascading Style Sheets - MDN Web Docs
1 (default value), The element is fully opaque (visually solid). ... <img src="//interactive-examples.mdn.mozilla.net/media/dino.svg" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found