From fddee2c583c0978d0e7e91cdf4d6c87629afe015 Mon Sep 17 00:00:00 2001 From: Dylan Vann Date: Sat, 9 Jun 2018 22:12:56 -0400 Subject: [PATCH] Show local images. Show local images on iOS and Android. --- .../fastimage/FastImageRequestListener.java | 2 +- .../fastimage/FastImageViewManager.java | 7 +- ios/FastImage/FFFastImageSource.h | 10 +- ios/FastImage/FFFastImageSource.m | 2 +- ios/FastImage/FFFastImageView.m | 51 ++- ios/FastImage/FFFastImageViewManager.m | 2 +- ios/FastImage/RCTConvert+FFFastImage.m | 9 +- ios/Vendor/SDWebImage | 2 +- package.json | 8 +- .../.gitignore | 2 + .../FastImage/App.js | 32 -- .../FastImage/BorderRadiusExample.js | 60 --- .../FastImage/Button.js | 28 -- .../FastImage/DefaultImageGrid.js | 16 - .../FastImage/FastImageExamples.js | 81 ---- .../FastImage/FastImageGrid.js | 15 - .../FastImage/FeatureText.js | 10 - .../FastImage/GifExample.js | 33 -- .../FastImage/Icons/Icon.js | 17 - .../FastImage/ImageGrid.js | 125 ------ .../FastImage/PreloadExample.js | 84 ---- .../FastImage/PriorityExample.js | 59 --- .../FastImage/ProgressExample.js | 49 --- .../FastImage/Section.js | 13 - .../FastImage/SectionFlex.js | 20 - .../FastImage/StatusBarUnderlay.js | 18 - .../FastImage/withCacheBust.js | 28 -- .../__tests__/App.js | 12 - .../index.js | 2 +- .../ios/Podfile | 3 +- .../package.json | 5 +- .../yarn.lock | 7 +- .../pictures/jellyfish.gif | Bin 131 -> 1031090 bytes .../pictures/jellyfish.webp | Bin 0 -> 586484 bytes .../pictures/plankton.gif | Bin 131 -> 823510 bytes .../__tests__/App.js | 12 - .../android/app/build.gradle | 1 + .../android/app/src/main/AndroidManifest.xml | 2 + .../MainApplication.java | 4 +- .../android/settings.gradle | 2 + .../project.pbxproj | 58 +++ .../ReactNativeFastImageExample/Info.plist | 2 + .../metro.config.js | 21 +- react-native-fast-image-example/package.json | 7 +- react-native-fast-image-example/src/App.js | 39 +- .../src/BulletText.js | 8 + .../src/FastImageExamples.js | 3 +- .../src/FeatureText.js | 4 +- .../src/Icons/Icon.js | 2 +- .../src/ImageGrid.js | 2 +- .../src/LocalImagesExample.js | 152 +++++++ .../src/ResizeModeExample.js | 43 +- .../src/SectionFlex.js | 17 +- .../src/images/fields.jpg | Bin 0 -> 21192 bytes .../src/images/fields.js | 7 + .../src/images/jellyfish.gif | Bin 0 -> 106418 bytes react-native-fast-image-example/yarn.lock | 101 ++++- src/__snapshots__/index.test.js.snap | 51 ++- src/index.js | 38 +- yarn.lock | 409 ++++++++++-------- 60 files changed, 708 insertions(+), 1089 deletions(-) delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/App.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/BorderRadiusExample.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/Button.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/DefaultImageGrid.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/FastImageExamples.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/FastImageGrid.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/FeatureText.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/GifExample.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/Icons/Icon.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/ImageGrid.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/PreloadExample.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/PriorityExample.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/ProgressExample.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/Section.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/SectionFlex.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/StatusBarUnderlay.js delete mode 100644 react-native-fast-image-example-cocoapods/FastImage/withCacheBust.js delete mode 100644 react-native-fast-image-example-cocoapods/__tests__/App.js create mode 100644 react-native-fast-image-example-server/pictures/jellyfish.webp delete mode 100644 react-native-fast-image-example/__tests__/App.js create mode 100644 react-native-fast-image-example/src/BulletText.js create mode 100644 react-native-fast-image-example/src/LocalImagesExample.js create mode 100644 react-native-fast-image-example/src/images/fields.jpg create mode 100644 react-native-fast-image-example/src/images/fields.js create mode 100644 react-native-fast-image-example/src/images/jellyfish.gif diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java b/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java index 4ec30a5..d8deaad 100644 --- a/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java +++ b/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java @@ -17,7 +17,7 @@ public class FastImageRequestListener implements RequestListener { static final String REACT_ON_LOAD_EVENT = "onFastImageLoad"; static final String REACT_ON_LOAD_END_EVENT = "onFastImageLoadEnd"; - private String key = null; + private String key; FastImageRequestListener(String key) { this.key = key; diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java index f25a370..d3a9263 100644 --- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java +++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java @@ -95,8 +95,13 @@ class FastImageViewManager extends SimpleViewManager imple .dontTransform() .placeholder(TRANSPARENT_DRAWABLE); + String stringUrl = glideUrl.toString(); requestManager - .load(glideUrl) + // This will make this work for remote and local images. e.g. + // - file:/// + // - content:// + // - data:image/png;base64 + .load(stringUrl.startsWith("http") ? glideUrl : stringUrl) .apply(options) .listener(new FastImageRequestListener(key)) .into(view); diff --git a/ios/FastImage/FFFastImageSource.h b/ios/FastImage/FFFastImageSource.h index b6dca54..0a4dc21 100644 --- a/ios/FastImage/FFFastImageSource.h +++ b/ios/FastImage/FFFastImageSource.h @@ -1,4 +1,5 @@ #import +#import typedef NS_ENUM(NSInteger, FFFPriority) { FFFPriorityLow, @@ -6,13 +7,14 @@ typedef NS_ENUM(NSInteger, FFFPriority) { FFFPriorityHigh }; -/** - * Object containing an image URL and associated metadata. - */ +// Object containing an image uri and metadata. @interface FFFastImageSource : NSObject -@property (nonatomic) NSURL* uri; +// uri for image, or base64 +@property (nonatomic) NSURL* url; +// priority for image request @property (nonatomic) FFFPriority priority; +// headers for the image request @property (nonatomic) NSDictionary *headers; - (instancetype)initWithURL:(NSURL *)url diff --git a/ios/FastImage/FFFastImageSource.m b/ios/FastImage/FFFastImageSource.m index 238528d..0888d89 100644 --- a/ios/FastImage/FFFastImageSource.m +++ b/ios/FastImage/FFFastImageSource.m @@ -8,7 +8,7 @@ { self = [super init]; if (self) { - _uri = url; + _url = url; _priority = priority; _headers = headers; } diff --git a/ios/FastImage/FFFastImageView.m b/ios/FastImage/FFFastImageView.m index d96ff42..472e23f 100644 --- a/ios/FastImage/FFFastImageView.m +++ b/ios/FastImage/FFFastImageView.m @@ -54,10 +54,46 @@ } } +- (void)sendOnLoad:(UIImage *)image { + onLoadEvent = @{ + @"width":[NSNumber numberWithDouble:image.size.width], + @"height":[NSNumber numberWithDouble:image.size.height] + }; + if (_onFastImageLoad) { + _onFastImageLoad(onLoadEvent); + } +} + - (void)setSource:(FFFastImageSource *)source { if (_source != source) { _source = source; + // Load base64 images. + NSString* url = [_source.url absoluteString]; + if (url && [url hasPrefix:@"data:image"]) { + if (_onFastImageLoadStart) { + _onFastImageLoadStart(@{}); + hasSentOnLoadStart = YES; + } { + hasSentOnLoadStart = NO; + } + UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:_source.url]]; + [self setImage:image]; + if (_onFastImageProgress) { + _onFastImageProgress(@{ + @"loaded": @(1), + @"total": @(1) + }); + } + hasCompleted = YES; + [self sendOnLoad:image]; + + if (_onFastImageLoadEnd) { + _onFastImageLoadEnd(@{}); + } + return; + } + // Set headers. [_source.headers enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSString* header, BOOL *stop) { [[SDWebImageDownloader sharedDownloader] setValue:header forHTTPHeaderField:key]; @@ -88,7 +124,12 @@ hasErrored = NO; // Load the new source. - [self sd_setImageWithURL:_source.uri + // This will work for: + // - https:// + // - file:///var/containers/Bundle/Application/50953EA3-CDA8-4367-A595-DE863A012336/ReactNativeFastImageExample.app/assets/src/images/fields.jpg + // - file:///var/containers/Bundle/Application/545685CB-777E-4B07-A956-2D25043BC6EE/ReactNativeFastImageExample.app/assets/src/images/plankton.gif + // - file:///Users/dylan/Library/Developer/CoreSimulator/Devices/61DC182B-3E72-4A18-8908-8A947A63A67F/data/Containers/Data/Application/AFC2A0D2-A1E5-48C1-8447-C42DA9E5299D/Documents/images/E1F1D5FC-88DB-492F-AD33-B35A045D626A.jpg" + [self sd_setImageWithURL:_source.url placeholderImage:nil options:options progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) { @@ -112,13 +153,7 @@ } } else { hasCompleted = YES; - onLoadEvent = @{ - @"width":[NSNumber numberWithDouble:image.size.width], - @"height":[NSNumber numberWithDouble:image.size.height] - }; - if (_onFastImageLoad) { - _onFastImageLoad(onLoadEvent); - } + [self sendOnLoad:image]; if (_onFastImageLoadEnd) { _onFastImageLoadEnd(@{}); } diff --git a/ios/FastImage/FFFastImageViewManager.m b/ios/FastImage/FFFastImageViewManager.m index af6820b..5cc8618 100644 --- a/ios/FastImage/FFFastImageViewManager.m +++ b/ios/FastImage/FFFastImageViewManager.m @@ -27,7 +27,7 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray *)sources) [source.headers enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSString* header, BOOL *stop) { [[SDWebImageDownloader sharedDownloader] setValue:header forHTTPHeaderField:key]; }]; - [urls setObject:source.uri atIndexedSubscript:idx]; + [urls setObject:source.url atIndexedSubscript:idx]; }]; [[SDWebImagePrefetcher sharedImagePrefetcher] prefetchURLs:urls]; diff --git a/ios/FastImage/RCTConvert+FFFastImage.m b/ios/FastImage/RCTConvert+FFFastImage.m index 2478509..ab2ab88 100644 --- a/ios/FastImage/RCTConvert+FFFastImage.m +++ b/ios/FastImage/RCTConvert+FFFastImage.m @@ -13,9 +13,10 @@ RCT_ENUM_CONVERTER(FFFPriority, (@{ if (!json) { return nil; } - NSString *URLString = json[@"uri"]; - NSURL *url = [self NSURL:URLString]; - + + NSString *uriString = json[@"uri"]; + NSURL *uri = [self NSURL:uriString]; + FFFPriority priority = [self FFFPriority:json[@"priority"]]; NSDictionary *headers = [self NSDictionary:json[@"headers"]]; @@ -35,7 +36,7 @@ RCT_ENUM_CONVERTER(FFFPriority, (@{ } } - FFFastImageSource *imageSource = [[FFFastImageSource alloc] initWithURL:url priority:priority headers:headers]; + FFFastImageSource *imageSource = [[FFFastImageSource alloc] initWithURL:uri priority:priority headers:headers]; return imageSource; } diff --git a/ios/Vendor/SDWebImage b/ios/Vendor/SDWebImage index ad9f1a2..dc5c974 160000 --- a/ios/Vendor/SDWebImage +++ b/ios/Vendor/SDWebImage @@ -1 +1 @@ -Subproject commit ad9f1a24360b2c7581f136e3bd987ff700862ce7 +Subproject commit dc5c974b89509992d6c6e0d0510344fd0e35baa6 diff --git a/package.json b/package.json index 807bb06..e11ebb3 100644 --- a/package.json +++ b/package.json @@ -22,16 +22,16 @@ "url": "git+https://github.com/DylanVann/react-native-fast-image.git" }, "scripts": { - "format": "prettier --write --list-different ./**/*.js", + "format": "prettier --write --list-different ./src/*.js", "prepare": "git submodule update --init --recursive", "test": "yarn run format && yarn run test:jest", "test:jest": "jest ./src/*.js" }, "devDependencies": { - "babel-jest": "^22.4.4", + "babel-jest": "^23.0.1", "babel-preset-react-native": "^4.0.0", - "jest": "^22.4.4", - "prettier": "^1.12.1", + "jest": "^23.1.0", + "prettier": "^1.13.4", "prettier-check": "^2.0.0", "prop-types": "^15.6.1", "react": "^16.4.0", diff --git a/react-native-fast-image-example-cocoapods/.gitignore b/react-native-fast-image-example-cocoapods/.gitignore index 934a37c..1ae1a04 100644 --- a/react-native-fast-image-example-cocoapods/.gitignore +++ b/react-native-fast-image-example-cocoapods/.gitignore @@ -57,3 +57,5 @@ buck-out/ # CocoaPods ios/Pods + +src \ No newline at end of file diff --git a/react-native-fast-image-example-cocoapods/FastImage/App.js b/react-native-fast-image-example-cocoapods/FastImage/App.js deleted file mode 100644 index 41b745c..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/App.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { TabNavigator, TabBarBottom } from 'react-navigation' -import FastImageExamples from './FastImageExamples' -import FastImageGrid from './FastImageGrid' -import DefaultImageGrid from './DefaultImageGrid' - -const App = TabNavigator( - { - fastImageExample: { - screen: FastImageExamples, - }, - image: { - screen: DefaultImageGrid, - }, - fastImage: { - screen: FastImageGrid, - }, - }, - { - tabBarComponent: TabBarBottom, - tabBarPosition: 'bottom', - swipeEnabled: false, - animationEnabled: false, - tabBarOptions: { - style: { - backgroundColor: 'white', - }, - }, - }, -) - -export default App diff --git a/react-native-fast-image-example-cocoapods/FastImage/BorderRadiusExample.js b/react-native-fast-image-example-cocoapods/FastImage/BorderRadiusExample.js deleted file mode 100644 index eedd35b..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/BorderRadiusExample.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react' -import { StyleSheet, View } from 'react-native' -import withCacheBust from './withCacheBust' -import SectionFlex from './SectionFlex' -import FastImage from 'react-native-fast-image' -import Section from './Section' -import FeatureText from './FeatureText' - -const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif' - -const BorderRadiusExample = ({ onPressReload, bust }) => ( - -
- -
- - - - - -) - -const styles = StyleSheet.create({ - imageSquare: { - borderRadius: 50, - height: 100, - backgroundColor: '#ddd', - margin: 20, - width: 100, - flex: 0, - }, - imageRectangular: { - borderRadius: 50, - borderTopLeftRadius: 10, - borderBottomRightRadius: 10, - height: 100, - backgroundColor: '#ddd', - margin: 20, - flex: 1, - }, - plus: { - width: 30, - height: 30, - position: 'absolute', - bottom: 0, - right: 0, - }, -}) - -export default withCacheBust(BorderRadiusExample) diff --git a/react-native-fast-image-example-cocoapods/FastImage/Button.js b/react-native-fast-image-example-cocoapods/FastImage/Button.js deleted file mode 100644 index 3583eb8..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/Button.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' - -const Button = ({ text, onPress }) => ( - - - {text} - - -) - -const styles = StyleSheet.create({ - button: { - backgroundColor: 'black', - margin: 5, - height: 44, - paddingLeft: 10, - paddingRight: 10, - borderRadius: 10, - alignItems: 'center', - justifyContent: 'center', - }, - text: { - color: 'white', - }, -}) - -export default Button diff --git a/react-native-fast-image-example-cocoapods/FastImage/DefaultImageGrid.js b/react-native-fast-image-example-cocoapods/FastImage/DefaultImageGrid.js deleted file mode 100644 index 1a37bb1..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/DefaultImageGrid.js +++ /dev/null @@ -1,16 +0,0 @@ -// @flow -import React from 'react' -import { Image } from 'react-native' -import Icon from './Icons/Icon' -import ImageGrid from './ImageGrid' - -const DefaultImageGrid = () => - -DefaultImageGrid.navigationOptions = { - tabBarLabel: 'Image Grid', - tabBarIcon: props => ( - - ), -} - -export default DefaultImageGrid diff --git a/react-native-fast-image-example-cocoapods/FastImage/FastImageExamples.js b/react-native-fast-image-example-cocoapods/FastImage/FastImageExamples.js deleted file mode 100644 index 5741ba0..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/FastImageExamples.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native' -import Icon from './Icons/Icon' -import Section from './Section' -import PriorityExample from './PriorityExample' -import GifExample from './GifExample' -import BorderRadiusExample from './BorderRadiusExample' -import FeatureText from './FeatureText' -import ProgressExample from './ProgressExample' -import PreloadExample from './PreloadExample' -import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay' - -const FastImageExample = () => ( - - - - -
- 🚩 FastImage - -
- - - - - - - - - -) - -FastImageExample.navigationOptions = { - tabBarLabel: 'FastImage Example', - tabBarIcon: props => ( - - ), -} - -const styles = StyleSheet.create({ - titleText: { - fontWeight: '900', - marginBottom: 20, - color: '#222', - }, - contentContainer: { - marginTop: 20, - marginBottom: 20, - }, - image: { - flex: 1, - height: 100, - backgroundColor: '#ddd', - margin: 10, - }, - container: { - flex: 1, - alignItems: 'stretch', - backgroundColor: '#fff', - }, - scrollContainer: { - marginTop: STATUS_BAR_HEIGHT, - }, - scrollContentContainer: { - alignItems: 'stretch', - flex: 0, - }, -}) - -export default FastImageExample diff --git a/react-native-fast-image-example-cocoapods/FastImage/FastImageGrid.js b/react-native-fast-image-example-cocoapods/FastImage/FastImageGrid.js deleted file mode 100644 index 907c09e..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/FastImageGrid.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import FastImage from 'react-native-fast-image' -import Icon from './Icons/Icon' -import ImageGrid from './ImageGrid' - -const FastImageGrid = () => - -FastImageGrid.navigationOptions = { - tabBarLabel: 'FastImage Grid', - tabBarIcon: props => ( - - ), -} - -export default FastImageGrid diff --git a/react-native-fast-image-example-cocoapods/FastImage/FeatureText.js b/react-native-fast-image-example-cocoapods/FastImage/FeatureText.js deleted file mode 100644 index 66e468f..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/FeatureText.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import { StyleSheet, Text } from 'react-native' - -export default ({ text }) => {text} - -const styles = StyleSheet.create({ - style: { - color: '#222', - }, -}) diff --git a/react-native-fast-image-example-cocoapods/FastImage/GifExample.js b/react-native-fast-image-example-cocoapods/FastImage/GifExample.js deleted file mode 100644 index d5a4077..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/GifExample.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import { StyleSheet, View } from 'react-native' -import withCacheBust from './withCacheBust' -import SectionFlex from './SectionFlex' -import FastImage from 'react-native-fast-image' -import Section from './Section' -import FeatureText from './FeatureText' - -const GIF_URL = - 'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif' - -const GifExample = ({ onPressReload, bust }) => ( - -
- -
- - - - -) - -const styles = StyleSheet.create({ - image: { - backgroundColor: '#ddd', - margin: 10, - height: 100, - width: 100, - flex: 0, - }, -}) - -export default withCacheBust(GifExample) diff --git a/react-native-fast-image-example-cocoapods/FastImage/Icons/Icon.js b/react-native-fast-image-example-cocoapods/FastImage/Icons/Icon.js deleted file mode 100644 index d4909fb..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/Icons/Icon.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import Base from 'react-native-vector-icons/Ionicons' - -const Icon = ({ size, name, focusedName, focused, tintColor }) => ( - -) - -Icon.defaultProps = { - size: 26, -} - -export default Icon \ No newline at end of file diff --git a/react-native-fast-image-example-cocoapods/FastImage/ImageGrid.js b/react-native-fast-image-example-cocoapods/FastImage/ImageGrid.js deleted file mode 100644 index 98bc5c8..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/ImageGrid.js +++ /dev/null @@ -1,125 +0,0 @@ -import React, { Component } from 'react' -import { FlatList, StyleSheet, Text, View } from 'react-native' -import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay' - -const getImageUrl = (id, width, height) => - `https://unsplash.it/${width}/${height}?image=${id}` - -class ImageGrid extends Component { - constructor(props: Object) { - super(props) - - fetch('https://unsplash.it/list') - .then(res => res.json()) - .then(this._onFetchImagesSuccess) - .catch(this._onFetchImagesError) - } - - state = { - images: [], - itemHeight: 0, - } - - _onLayout = e => { - const width = e.nativeEvent.layout.width - this.setState({ - itemHeight: width / 4, - }) - } - - _onFetchImagesError = () => { - this.setState({ - error: true, - }) - } - - _onFetchImagesSuccess = images => { - this.setState({ - images, - }) - } - - _getItemLayout = (data, index) => { - const { itemHeight } = this.state - return { length: itemHeight, offset: itemHeight * index, index } - } - - _renderItem = ({ item }) => { - const ImageComponent = this.props.ImageComponent - const uri = getImageUrl(item.id, 100, 100) - return ( - - - - ) - } - - _extractKey = item => { - return item.id - } - - render() { - if (this.state.error) { - return ( - - Error fetching images. - - ) - } - return ( - - - - - ) - } -} - -const MARGIN = 2 - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'stretch', - justifyContent: 'center', - }, - text: { - textAlign: 'center', - }, - list: { - marginTop: STATUS_BAR_HEIGHT, - flex: 1, - }, - columnWrapper: { - flex: 1, - flexDirection: 'row', - marginLeft: -MARGIN, - marginRight: -MARGIN, - }, - image: { - flex: 1, - width: null, - height: null, - margin: MARGIN, - backgroundColor: '#eee', - }, - imageContainer: { - flex: 1, - alignItems: 'stretch', - }, -}) - -export default ImageGrid diff --git a/react-native-fast-image-example-cocoapods/FastImage/PreloadExample.js b/react-native-fast-image-example-cocoapods/FastImage/PreloadExample.js deleted file mode 100644 index 4e97339..0000000 --- a/react-native-fast-image-example-cocoapods/FastImage/PreloadExample.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component } from 'react' -import { StyleSheet, View } from 'react-native' -import SectionFlex from './SectionFlex' -import FastImage from 'react-native-fast-image' -import Section from './Section' -import FeatureText from './FeatureText' -import uuid from 'uuid/v4' -import Button from './Button' -import { createImageProgress } from 'react-native-image-progress' - -const IMAGE_URL = - 'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif' - -const Image = createImageProgress(FastImage) - -class PreloadExample extends Component { - state = { - show: false, - url: IMAGE_URL, - } - - bustCache = () => { - const key = uuid() - const bust = `?bust=${key}` - // Preload images. This can be called anywhere. - const url = IMAGE_URL + bust - this.setState({ - url, - show: false, - }) - } - - preload = () => { - FastImage.preload([{ uri: this.state.url }]) - } - - showImage = () => { - this.setState({ show: true }) - } - - render() { - return ( - -
- - -
- - {this.state.show ? ( - - ) : ( - - )} - - -