Install dependencies and add example code.

react-native-fast-image-example-cocoapods/.gitignore

@@ -33,6 +33,7 @@ local.properties
 # node.js
 #
 node_modules/
+ios/Pods/
 npm-debug.log
 yarn-error.log
 

react-native-fast-image-example-cocoapods/App.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});

react-native-fast-image-example-cocoapods/android/app/build.gradle

@@ -137,6 +137,9 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-image-picker')
+    implementation project(':react-native-vector-icons')
+    implementation project(':react-native-fast-image')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules

react-native-fast-image-example-cocoapods/android/app/src/main/java/com/reactnativefastimageexamplecocoapods/MainApplication.java

@@ -3,6 +3,9 @@ package com.reactnativefastimageexamplecocoapods;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.imagepicker.ImagePickerPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.dylanvann.fastimage.FastImageViewPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +25,10 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+          new ImagePickerPackage(),
+          new VectorIconsPackage(),
+          new FastImageViewPackage()
       );
     }
 

react-native-fast-image-example-cocoapods/android/settings.gradle

 rootProject.name = 'ReactNativeFastImageExampleCocoaPods'
+include ':react-native-image-picker'
+project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-fast-image'
+project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
 
 include ':app'

react-native-fast-image-example-cocoapods/index.js

 /** @format */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

react-native-fast-image-example-cocoapods/ios/Podfile

+platform :ios, '9.0'
+
+target 'ReactNativeFastImageExampleCocoaPods' do
+  pod 'React', :path => '../node_modules/react-native', :subspecs => [
+    'Core',
+    'CxxBridge',
+    'DevSupport',
+    'RCTText',
+    'RCTNetwork',
+    'RCTWebSocket',
+    'RCTAnimation',
+    'RCTImage',
+  ]
+  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
+  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
+  pod 'react-native-fast-image', :path => '../node_modules/react-native-fast-image'
+end
\ No newline at end of file

react-native-fast-image-example-cocoapods/ios/Podfile.lock

+PODS:
+  - boost-for-react-native (1.63.0)
+  - DoubleConversion (1.1.6)
+  - FLAnimatedImage (1.0.12)
+  - Folly (2016.10.31.00):
+    - boost-for-react-native
+    - DoubleConversion
+    - glog
+  - glog (0.3.5)
+  - React (0.57.1):
+    - React/Core (= 0.57.1)
+  - react-native-fast-image (5.0.9):
+    - FLAnimatedImage
+    - React
+    - SDWebImage/Core
+    - SDWebImage/GIF
+  - react-native-image-picker (0.14.3):
+    - React
+  - React/Core (0.57.1):
+    - yoga (= 0.57.1.React)
+  - React/CxxBridge (0.57.1):
+    - Folly (= 2016.10.31.00)
+    - React/Core
+    - React/cxxreact
+  - React/cxxreact (0.57.1):
+    - boost-for-react-native (= 1.63.0)
+    - Folly (= 2016.10.31.00)
+    - React/jschelpers
+    - React/jsinspector
+  - React/DevSupport (0.57.1):
+    - React/Core
+    - React/RCTWebSocket
+  - React/fishhook (0.57.1)
+  - React/jschelpers (0.57.1):
+    - Folly (= 2016.10.31.00)
+    - React/PrivateDatabase
+  - React/jsinspector (0.57.1)
+  - React/PrivateDatabase (0.57.1)
+  - React/RCTAnimation (0.57.1):
+    - React/Core
+  - React/RCTBlob (0.57.1):
+    - React/Core
+  - React/RCTImage (0.57.1):
+    - React/Core
+    - React/RCTNetwork
+  - React/RCTNetwork (0.57.1):
+    - React/Core
+  - React/RCTText (0.57.1):
+    - React/Core
+  - React/RCTWebSocket (0.57.1):
+    - React/Core
+    - React/fishhook
+    - React/RCTBlob
+  - RNVectorIcons (5.0.0):
+    - React
+  - SDWebImage/Core (4.4.2)
+  - SDWebImage/GIF (4.4.2):
+    - FLAnimatedImage (~> 1.0)
+    - SDWebImage/Core
+  - yoga (0.57.1.React)
+
+DEPENDENCIES:
+  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - react-native-fast-image (from `../node_modules/react-native-fast-image`)
+  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
+  - React/Core (from `../node_modules/react-native`)
+  - React/CxxBridge (from `../node_modules/react-native`)
+  - React/DevSupport (from `../node_modules/react-native`)
+  - React/RCTAnimation (from `../node_modules/react-native`)
+  - React/RCTImage (from `../node_modules/react-native`)
+  - React/RCTNetwork (from `../node_modules/react-native`)
+  - React/RCTText (from `../node_modules/react-native`)
+  - React/RCTWebSocket (from `../node_modules/react-native`)
+  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
+  - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
+
+SPEC REPOS:
+  https://github.com/cocoapods/specs.git:
+    - boost-for-react-native
+    - FLAnimatedImage
+    - SDWebImage
+
+EXTERNAL SOURCES:
+  DoubleConversion:
+    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+  Folly:
+    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
+  glog:
+    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  React:
+    :path: "../node_modules/react-native"
+  react-native-fast-image:
+    :path: "../node_modules/react-native-fast-image"
+  react-native-image-picker:
+    :path: "../node_modules/react-native-image-picker"
+  RNVectorIcons:
+    :path: "../node_modules/react-native-vector-icons"
+  yoga:
+    :path: "../node_modules/react-native/ReactCommon/yoga"
+
+SPEC CHECKSUMS:
+  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
+  DoubleConversion: bb338842f62ab1d708ceb63ec3d999f0f3d98ecd
+  FLAnimatedImage: 4a0b56255d9b05f18b6dd7ee06871be5d3b89e31
+  Folly: c89ac2d5c6ab169cd7397ef27485c44f35f742c7
+  glog: e8acf0ebbf99759d3ff18c86c292a5898282dcde
+  React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
+  react-native-fast-image: cba3d9bf9c2cf8ddb643d887a686c53a5dd90a2c
+  react-native-image-picker: b303e31c3c4ada1d7cb1342423d328d2efb07fb3
+  RNVectorIcons: c0dbfbf6068fefa240c37b0f71bd03b45dddac44
+  SDWebImage: 624d6e296c69b244bcede364c72ae0430ac14681
+  yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
+
+PODFILE CHECKSUM: 9c1b580892a7e8ba16c3ef11342f53e075ff596a
+
+COCOAPODS: 1.5.3

react-native-fast-image-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods.xcworkspace/contents.xcworkspacedata

+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:ReactNativeFastImageExampleCocoaPods.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

react-native-fast-image-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

react-native-fast-image-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods/Info.plist

@@ -24,8 +24,28 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>UIAppFonts</key>
+	<array>
+		<string>FontAwesome.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -40,21 +60,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-	<dict>
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
 </dict>
 </plist>

react-native-fast-image-example-cocoapods/package.json

@@ -8,7 +8,15 @@
   },
   "dependencies": {
     "react": "16.5.0",
-    "react-native": "0.57.1"
+    "react-native": "0.57.1",
+    "react-native-fast-image": "^5.0.9",
+    "react-native-image-picker": "^0.26.10",
+    "react-native-image-progress": "^1.1.1",
+    "react-native-status-bar-height": "^2.1.0",
+    "react-native-vector-icons": "^5.0.0",
+    "react-navigation": "^2.16.0",
+    "react-timeout": "^1.1.2",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "babel-jest": "23.6.0",
@@ -19,4 +27,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
\ No newline at end of file
+}

react-native-fast-image-example-cocoapods/src/AutoSizeExample.js

+import React, { Component } 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'
+
+class AutoSizingImage extends Component {
+    state = {
+        height: 0,
+        width: 0,
+    }
+
+    onLoad = e => {
+        const {
+            nativeEvent: { width, height },
+        } = e
+        this.setState({ width, height })
+        if (this.props.onLoad) this.props.onLoad(e)
+    }
+
+    getHeight = () => {
+        if (!this.state.height) return this.props.defaultHeight
+        const ratio = this.state.height / this.state.width
+        const height = this.props.width * ratio
+        return height
+    }
+
+    render() {
+        const height = this.getHeight()
+        return (
+            <FastImage
+                {...this.props}
+                onLoad={this.onLoad}
+                style={[{ width: this.props.width, height }, this.props.style]}
+            />
+        )
+    }
+}
+
+AutoSizingImage.defaultProps = {
+    defaultHeight: 300,
+}
+
+const AutoSizeExample = ({ onPressReload, bust }) => (
+    <View>
+        <Section>
+            <FeatureText text="• AutoSize." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <AutoSizingImage
+                style={styles.image}
+                width={200}
+                source={{ uri: GIF_URL + bust }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(AutoSizeExample)

react-native-fast-image-example-cocoapods/src/BorderRadiusExample.js

+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 }) => (
+    <View>
+        <Section>
+            <FeatureText text="• Border radius." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <FastImage
+                style={styles.imageSquare}
+                source={{
+                    uri: IMAGE_URL + bust,
+                }}
+            />
+            <FastImage
+                style={styles.imageRectangular}
+                source={{
+                    uri: IMAGE_URL + bust,
+                }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+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)

react-native-fast-image-example-cocoapods/src/BulletText.js

+import React from 'react'
+import FeatureText from './FeatureText'
+
+const BulletText = ({ text, children }) => (
+    <FeatureText text={`• ${text || children} •`} />
+)
+
+export default BulletText

react-native-fast-image-example-cocoapods/src/Button.js

+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+const Button = ({ text, onPress }) => (
+    <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+            <Text style={styles.text}>{text}</Text>
+        </View>
+    </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: 'black',
+        margin: 10,
+        height: 44,
+        paddingLeft: 10,
+        paddingRight: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        color: 'white',
+    },
+})
+
+export default Button

react-native-fast-image-example-cocoapods/src/DefaultImageGrid.js

+// @flow
+import React from 'react'
+import { Image } from 'react-native'
+import Icon from './Icons/Icon'
+import ImageGrid from './ImageGrid'
+
+const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
+
+DefaultImageGrid.navigationOptions = {
+    tabBarLabel: 'Image Grid',
+    tabBarIcon: props => (
+        <Icon name="ios-image" {...props} />
+    ),
+}
+
+export default DefaultImageGrid

react-native-fast-image-example-cocoapods/src/FastImageExamples.js

+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 ResizeModeExample from './ResizeModeExample'
+import LocalImagesExample from './LocalImagesExample'
+import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
+import AutoSizeExample from './AutoSizeExample'
+
+const FastImageExample = () => (
+    <View style={styles.container}>
+        <StatusBar
+            translucent
+            barStyle="dark-content"
+            backgroundColor="transparent"
+        />
+        <ScrollView
+            style={styles.scrollContainer}
+            contentContainerStyle={styles.scrollContentContainer}
+        >
+            <View style={styles.contentContainer}>
+                <Section>
+                    <Text style={styles.titleText}>🚩 FastImage</Text>
+                    <FeatureText text="Tap images to reload examples." />
+                </Section>
+                <PriorityExample />
+                <GifExample />
+                <BorderRadiusExample />
+                <ProgressExample />
+                <PreloadExample />
+                <ResizeModeExample />
+                <LocalImagesExample />
+                <AutoSizeExample />
+            </View>
+        </ScrollView>
+        <StatusBarUnderlay />
+    </View>
+)
+
+FastImageExample.navigationOptions = {
+    tabBarLabel: 'FastImage Example',
+    tabBarIcon: props => (
+        <Icon
+            name="ios-information-circle"
+            {...props}
+        />
+    ),
+}
+
+const styles = StyleSheet.create({
+    titleText: {
+        fontWeight: '900',
+        marginBottom: 20,
+        color: '#222',
+    },
+    contentContainer: {
+        marginTop: 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

react-native-fast-image-example-cocoapods/src/FastImageGrid.js

+import React from 'react'
+import FastImage from 'react-native-fast-image'
+import Icon from './Icons/Icon'
+import ImageGrid from './ImageGrid'
+
+const FastImageGrid = () => <ImageGrid ImageComponent={FastImage} />
+
+FastImageGrid.navigationOptions = {
+    tabBarLabel: 'FastImage Grid',
+    tabBarIcon: props => (
+        <Icon name="ios-photos" {...props} />
+    ),
+}
+
+export default FastImageGrid

react-native-fast-image-example-cocoapods/src/FeatureText.js

+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+export default ({ text, style, children }) => (
+    <Text style={[styles.style, style]}>{text || children}</Text>
+)
+
+const styles = StyleSheet.create({
+    style: {
+        color: '#222',
+    },
+})

react-native-fast-image-example-cocoapods/src/GifExample.js

+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 }) => (
+    <View>
+        <Section>
+            <FeatureText text="• GIF support." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <FastImage style={styles.image} source={{ uri: GIF_URL + bust }} />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        height: 100,
+        width: 100,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(GifExample)

react-native-fast-image-example-cocoapods/src/Icons/Icon.js

+import React from 'react'
+import Base from 'react-native-vector-icons/Ionicons'
+
+const Icon = ({ size, name, tintColor }) => (
+    <Base
+        name={name}
+        size={size}
+        style={{ width: size, height: size }}
+        color={tintColor}
+    />
+)
+
+Icon.defaultProps = {
+    size: 26,
+}
+
+export default Icon

react-native-fast-image-example-cocoapods/src/ImageGrid.js

+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) {
+        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 (
+            <View style={styles.imageContainer}>
+                <ImageComponent source={{ uri }} style={styles.image} />
+            </View>
+        )
+    }
+
+    _extractKey = item => {
+        return item.id
+    }
+
+    render() {
+        if (this.state.error) {
+            return (
+                <View style={styles.container}>
+                    <Text style={styles.text}>Error fetching images.</Text>
+                </View>
+            )
+        }
+        return (
+            <View style={styles.container}>
+                <FlatList
+                    onLayout={this._onLayout}
+                    style={styles.list}
+                    columnWrapperStyle={[
+                        styles.columnWrapper,
+                        { height: this.state.itemHeight },
+                    ]}
+                    data={this.state.images}
+                    renderItem={this._renderItem}
+                    numColumns={4}
+                    keyExtractor={this._extractKey}
+                    getItemLayout={this._getItemLayout}
+                />
+                <StatusBarUnderlay />
+            </View>
+        )
+    }
+}
+
+const MARGIN = 2
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+    },
+    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

react-native-fast-image-example-cocoapods/src/LocalImagesExample.js

+import React, { Component } from 'react'
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
+import withCacheBust from './withCacheBust'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import FieldsImage from './images/fields.jpg'
+import FieldsBase64 from './images/fields.js'
+import JellyfishImage from './images/jellyfish.gif'
+import ImagePicker from 'react-native-image-picker'
+import BulletText from './BulletText'
+
+var options = {
+    title: 'Select Avatar',
+    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
+    storageOptions: {
+        skipBackup: true,
+        path: 'images',
+    },
+}
+
+const Image = ({ source, ...p }) => (
+    <FastImage style={styles.imageSquare} source={source} {...p} />
+)
+
+const Row = p => <View style={styles.row} {...p} />
+
+class PhotoExample extends Component {
+    state = {}
+
+    pick = () => {
+        ImagePicker.showImagePicker(options, response => {
+            console.log('Response = ', response)
+            if (response.didCancel) {
+                console.log('User cancelled image picker')
+            } else if (response.error) {
+                console.log('ImagePicker Error: ', response.error)
+            } else if (response.customButton) {
+                console.log(
+                    'User tapped custom button: ',
+                    response.customButton,
+                )
+            } else {
+                const fileUri = `file://${response.path}`
+                const uri = response.uri
+                this.setState({
+                    image: { uri: uri },
+                })
+            }
+        })
+    }
+
+    render() {
+        return (
+            <Row>
+                <BulletText>photo library</BulletText>
+                <TouchableOpacity onPress={this.pick}>
+                    <Image style={styles.imageSquare} source={this.state.image}>
+                        <Text style={{ color: 'white', fontWeight: '900' }}>
+                            Pick Photo
+                        </Text>
+                    </Image>
+                </TouchableOpacity>
+            </Row>
+        )
+    }
+}
+
+const Require = () => (
+    <React.Fragment>
+        <BulletText>require</BulletText>
+        <Image source={require('./images/fields.jpg')} />
+    </React.Fragment>
+)
+
+const Import = () => (
+    <React.Fragment>
+        <BulletText>import</BulletText>
+        <Image source={FieldsImage} />
+    </React.Fragment>
+)
+
+const GIF = () => (
+    <React.Fragment>
+        <BulletText>gif</BulletText>
+        <Image source={JellyfishImage} />
+    </React.Fragment>
+)
+
+const Base64 = () => (
+    <React.Fragment>
+        <BulletText>base64</BulletText>
+        <Image source={{ uri: FieldsBase64 }} />
+    </React.Fragment>
+)
+
+const LocalImagesExample = ({ onPressReload, bust }) => (
+    <View>
+        <Section>
+            <FeatureText>• Local images.</FeatureText>
+        </Section>
+        <View style={styles.container}>
+            <Row>
+                <Require />
+            </Row>
+            <Row>
+                <Import />
+            </Row>
+            <Row>
+                <GIF />
+            </Row>
+            <Row>
+                <Base64 />
+            </Row>
+            <PhotoExample />
+        </View>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    row: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    container: {
+        backgroundColor: '#eee',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 10,
+        paddingBottom: 10,
+    },
+    imageSquare: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginTop: 10,
+        width: 100,
+        flex: 0,
+    },
+    plus: {
+        width: 30,
+        height: 30,
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+    },
+})
+
+export default withCacheBust(LocalImagesExample)

react-native-fast-image-example-cocoapods/src/PreloadExample.js

+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 (
+            <View>
+                <Section>
+                    <FeatureText text="• Preloading." />
+                    <FeatureText text="• Progress indication using react-native-image-progress." />
+                </Section>
+                <SectionFlex
+                    style={styles.section}
+                    onPress={this.props.onPressReload}
+                >
+                    {this.state.show ? (
+                        <Image
+                            style={styles.image}
+                            source={{ uri: this.state.url }}
+                        />
+                    ) : (
+                        <View style={styles.image} />
+                    )}
+                    <View style={styles.buttons}>
+                        <View style={{ flex: 1 }}>
+                            <Button text="Bust" onPress={this.bustCache} />
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <Button text="Preload" onPress={this.preload} />
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <Button text="Render" onPress={this.showImage} />
+                        </View>
+                    </View>
+                </SectionFlex>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    section: {
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    buttons: {
+        flexDirection: 'row',
+        marginHorizontal: 20,
+        marginBottom: 10,
+    },
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginBottom: 10,
+        height: 100,
+        width: 100,
+    },
+})
+
+export default PreloadExample

react-native-fast-image-example-cocoapods/src/PriorityExample.js

+import React from 'react'
+import { PixelRatio, StyleSheet, View } from 'react-native'
+import withCacheBust from './withCacheBust'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import SectionFlex from './SectionFlex'
+import FeatureText from './FeatureText'
+
+const getImageUrl = (id, width, height) =>
+    `https://source.unsplash.com/${id}/${width}x${height}`
+const IMAGE_SIZE = 1024
+const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
+const IMAGE_URLS = [
+    getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
+    getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
+    getImageUrl('S7VCcp6KCKE', IMAGE_SIZE, IMAGE_SIZE),
+]
+
+const PriorityExample = ({ onPressReload, bust }) => (
+    <View>
+        <Section>
+            <FeatureText text="• Prioritize images (low, normal, high)." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <FastImage
+                style={styles.image}
+                source={{
+                    uri: IMAGE_URLS[0] + bust,
+                    priority: FastImage.priority.low,
+                }}
+            />
+            <FastImage
+                style={styles.image}
+                source={{
+                    uri: IMAGE_URLS[1] + bust,
+                    priority: FastImage.priority.normal,
+                }}
+            />
+            <FastImage
+                style={styles.image}
+                source={{
+                    uri: IMAGE_URLS[2] + bust,
+                    priority: FastImage.priority.high,
+                }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        flex: 1,
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 10,
+        marginVertical: 20,
+    },
+})
+
+export default withCacheBust(PriorityExample)

react-native-fast-image-example-cocoapods/src/ProgressExample.js

+import React, { Component } from 'react'
+import { StyleSheet, View, Text } 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'
+
+class ProgressExample extends Component {
+    state = {
+        mount: new Date(),
+        start: undefined,
+        progress: undefined,
+        end: undefined,
+    }
+
+    render() {
+        const { onPressReload, bust } = this.props
+        const { mount, start, progress, end } = this.state
+        return (
+            <View>
+                <Section>
+                    <FeatureText text="• Progress callbacks." />
+                </Section>
+                <SectionFlex
+                    onPress={onPressReload}
+                    style={{
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        paddingBottom: 20,
+                    }}
+                >
+                    <FastImage
+                        style={styles.image}
+                        source={{
+                            uri: IMAGE_URL + bust,
+                        }}
+                        onLoadStart={() => this.setState({ start: Date.now() })}
+                        onProgress={e =>
+                            this.setState({
+                                progress: Math.round(
+                                    100 *
+                                        (e.nativeEvent.loaded /
+                                            e.nativeEvent.total),
+                                ),
+                            })
+                        }
+                        onLoad={() => this.setState({ end: Date.now() })}
+                        onLoadEnd={() => {}}
+                    />
+                    <Text>
+                        onLoadStart
+                        {start !== undefined && ` - ${start - mount} ms`}
+                    </Text>
+                    <Text>
+                        onProgress
+                        {progress !== undefined && ` - ${progress} %`}
+                    </Text>
+                    <Text>
+                        onLoad
+                        {end !== undefined && ` - ${end - mount} ms`}
+                    </Text>
+                </SectionFlex>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    image: {
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        width: 100,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(ProgressExample)

react-native-fast-image-example-cocoapods/src/ResizeModeExample.js

+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import SectionFlex from './SectionFlex'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import BulletText from './BulletText'
+
+const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
+
+const Col = p => <View style={styles.col} {...p} />
+
+const ResizeModeExample = () => (
+    <View>
+        <Section>
+            <FeatureText text="• resizeMode." />
+        </Section>
+        <SectionFlex style={styles.container}>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.contain}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>contain</BulletText>
+            </Col>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.center}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>center</BulletText>
+            </Col>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.stretch}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>stretch</BulletText>
+            </Col>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.cover}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>cover</BulletText>
+            </Col>
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        height: 100,
+        width: 50,
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginTop: 0,
+        marginBottom: 10,
+        flex: 0,
+    },
+    container: {
+        padding: 20,
+    },
+    col: {
+        alignItems: 'center',
+    },
+})
+
+export default ResizeModeExample

react-native-fast-image-example-cocoapods/src/Section.js

+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default ({ children }) => <View style={styles.section}>{children}</View>
+
+const styles = StyleSheet.create({
+    section: {
+        marginTop: 10,
+        marginBottom: 10,
+        marginLeft: 40,
+        marginRight: 40,
+    },
+})

react-native-fast-image-example-cocoapods/src/SectionFlex.js

+import React from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+export default ({ children, onPress, style }) =>
+    onPress ? (
+        <TouchableOpacity style={[styles.sectionFlex, style]} onPress={onPress}>
+            {children}
+        </TouchableOpacity>
+    ) : (
+        <View style={[styles.sectionFlex, style]}>{children}</View>
+    )
+
+const styles = StyleSheet.create({
+    sectionFlex: {
+        backgroundColor: '#eee',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginLeft: -10,
+        marginRight: -10,
+    },
+})

react-native-fast-image-example-cocoapods/src/StatusBarUnderlay.js

+import React from 'react'
+import { Platform, StatusBar, StyleSheet, View } from 'react-native'
+import { getStatusBarHeight } from 'react-native-status-bar-height'
+
+export const STATUS_BAR_HEIGHT = getStatusBarHeight()
+
+export default () => <View style={styles.statusBarUnderlay} />
+
+const styles = StyleSheet.create({
+    statusBarUnderlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: STATUS_BAR_HEIGHT,
+        backgroundColor: 'white',
+    },
+})

react-native-fast-image-example-cocoapods/src/index.js

+import React from 'react'
+import { YellowBox } from 'react-native'
+import { createBottomTabNavigator } from 'react-navigation'
+import FastImageExamples from './FastImageExamples'
+import FastImageGrid from './FastImageGrid'
+import DefaultImageGrid from './DefaultImageGrid'
+
+YellowBox.ignoreWarnings([
+    'Warning: isMounted(...) is deprecated',
+    'Module RCTImageLoader',
+])
+
+const App = createBottomTabNavigator({
+    fastImageExample: {
+        screen: FastImageExamples,
+    },
+    image: {
+        screen: DefaultImageGrid,
+    },
+    fastImage: {
+        screen: FastImageGrid,
+    },
+})
+
+export default App

react-native-fast-image-example-cocoapods/src/withCacheBust.js

+import React, { Component } from 'react'
+import uuid from 'uuid/v4'
+
+export default BaseComponent => {
+    class WithCacheBust extends Component {
+        state = { bust: '?bust' }
+
+        onPressReload = () => {
+            // Force complete re-render and bust image cache.
+            const key = uuid()
+            const bust = `?bust=${key}`
+            this.setState({ bust })
+        }
+
+        render() {
+            return (
+                <BaseComponent
+                    bust={this.state.bust}
+                    onPressReload={this.onPressReload}
+                />
+            )
+        }
+    }
+
+    WithCacheBust.displayName = `withCacheBust${BaseComponent.displayName}`
+
+    return WithCacheBust
+}

react-native-fast-image-example/App.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});

react-native-fast-image-example/android/app/build.gradle

@@ -137,6 +137,9 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-image-picker')
+    implementation project(':react-native-vector-icons')
+    implementation project(':react-native-fast-image')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules

react-native-fast-image-example/android/app/src/main/java/com/reactnativefastimageexample/MainApplication.java

@@ -3,6 +3,9 @@ package com.reactnativefastimageexample;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.imagepicker.ImagePickerPackage;
+import com.dylanvann.fastimage.FastImageViewPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +25,10 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+          new ImagePickerPackage(),
+          new VectorIconsPackage(),
+          new FastImageViewPackage()
       );
     }
 

react-native-fast-image-example/android/settings.gradle

 rootProject.name = 'ReactNativeFastImageExample'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-image-picker'
+project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
+include ':react-native-fast-image'
+project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
 
 include ':app'

react-native-fast-image-example/index.js

 /** @format */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

react-native-fast-image-example/ios/ReactNativeFastImageExample/Info.plist

@@ -25,7 +25,7 @@
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -40,13 +40,10 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
 		<key>NSExceptionDomains</key>
 		<dict>
 			<key>localhost</key>
@@ -56,5 +53,22 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

react-native-fast-image-example/package.json

@@ -8,7 +8,15 @@
   },
   "dependencies": {
     "react": "16.5.0",
-    "react-native": "0.57.1"
+    "react-native": "0.57.1",
+    "react-native-fast-image": "^5.0.9",
+    "react-native-image-picker": "^0.26.10",
+    "react-native-image-progress": "^1.1.1",
+    "react-native-status-bar-height": "^2.1.0",
+    "react-native-vector-icons": "^5.0.0",
+    "react-navigation": "^2.16.0",
+    "react-timeout": "^1.1.2",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "babel-jest": "23.6.0",
@@ -19,4 +27,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
\ No newline at end of file
+}

react-native-fast-image-example/src/AutoSizeExample.js

+import React, { Component } 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'
+
+class AutoSizingImage extends Component {
+    state = {
+        height: 0,
+        width: 0,
+    }
+
+    onLoad = e => {
+        const {
+            nativeEvent: { width, height },
+        } = e
+        this.setState({ width, height })
+        if (this.props.onLoad) this.props.onLoad(e)
+    }
+
+    getHeight = () => {
+        if (!this.state.height) return this.props.defaultHeight
+        const ratio = this.state.height / this.state.width
+        const height = this.props.width * ratio
+        return height
+    }
+
+    render() {
+        const height = this.getHeight()
+        return (
+            <FastImage
+                {...this.props}
+                onLoad={this.onLoad}
+                style={[{ width: this.props.width, height }, this.props.style]}
+            />
+        )
+    }
+}
+
+AutoSizingImage.defaultProps = {
+    defaultHeight: 300,
+}
+
+const AutoSizeExample = ({ onPressReload, bust }) => (
+    <View>
+        <Section>
+            <FeatureText text="• AutoSize." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <AutoSizingImage
+                style={styles.image}
+                width={200}
+                source={{ uri: GIF_URL + bust }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(AutoSizeExample)

react-native-fast-image-example/src/BorderRadiusExample.js

+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 }) => (
+    <View>
+        <Section>
+            <FeatureText text="• Border radius." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <FastImage
+                style={styles.imageSquare}
+                source={{
+                    uri: IMAGE_URL + bust,
+                }}
+            />
+            <FastImage
+                style={styles.imageRectangular}
+                source={{
+                    uri: IMAGE_URL + bust,
+                }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+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)

react-native-fast-image-example/src/BulletText.js

+import React from 'react'
+import FeatureText from './FeatureText'
+
+const BulletText = ({ text, children }) => (
+    <FeatureText text={`• ${text || children} •`} />
+)
+
+export default BulletText

react-native-fast-image-example/src/Button.js

+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+const Button = ({ text, onPress }) => (
+    <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+            <Text style={styles.text}>{text}</Text>
+        </View>
+    </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: 'black',
+        margin: 10,
+        height: 44,
+        paddingLeft: 10,
+        paddingRight: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        color: 'white',
+    },
+})
+
+export default Button

react-native-fast-image-example/src/DefaultImageGrid.js

+// @flow
+import React from 'react'
+import { Image } from 'react-native'
+import Icon from './Icons/Icon'
+import ImageGrid from './ImageGrid'
+
+const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
+
+DefaultImageGrid.navigationOptions = {
+    tabBarLabel: 'Image Grid',
+    tabBarIcon: props => (
+        <Icon name="ios-image" {...props} />
+    ),
+}
+
+export default DefaultImageGrid

react-native-fast-image-example/src/FastImageExamples.js

+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 ResizeModeExample from './ResizeModeExample'
+import LocalImagesExample from './LocalImagesExample'
+import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
+import AutoSizeExample from './AutoSizeExample'
+
+const FastImageExample = () => (
+    <View style={styles.container}>
+        <StatusBar
+            translucent
+            barStyle="dark-content"
+            backgroundColor="transparent"
+        />
+        <ScrollView
+            style={styles.scrollContainer}
+            contentContainerStyle={styles.scrollContentContainer}
+        >
+            <View style={styles.contentContainer}>
+                <Section>
+                    <Text style={styles.titleText}>🚩 FastImage</Text>
+                    <FeatureText text="Tap images to reload examples." />
+                </Section>
+                <PriorityExample />
+                <GifExample />
+                <BorderRadiusExample />
+                <ProgressExample />
+                <PreloadExample />
+                <ResizeModeExample />
+                <LocalImagesExample />
+                <AutoSizeExample />
+            </View>
+        </ScrollView>
+        <StatusBarUnderlay />
+    </View>
+)
+
+FastImageExample.navigationOptions = {
+    tabBarLabel: 'FastImage Example',
+    tabBarIcon: props => (
+        <Icon
+            name="ios-information-circle"
+            {...props}
+        />
+    ),
+}
+
+const styles = StyleSheet.create({
+    titleText: {
+        fontWeight: '900',
+        marginBottom: 20,
+        color: '#222',
+    },
+    contentContainer: {
+        marginTop: 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

react-native-fast-image-example/src/FastImageGrid.js

+import React from 'react'
+import FastImage from 'react-native-fast-image'
+import Icon from './Icons/Icon'
+import ImageGrid from './ImageGrid'
+
+const FastImageGrid = () => <ImageGrid ImageComponent={FastImage} />
+
+FastImageGrid.navigationOptions = {
+    tabBarLabel: 'FastImage Grid',
+    tabBarIcon: props => (
+        <Icon name="ios-photos" {...props} />
+    ),
+}
+
+export default FastImageGrid

react-native-fast-image-example/src/FeatureText.js

+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+export default ({ text, style, children }) => (
+    <Text style={[styles.style, style]}>{text || children}</Text>
+)
+
+const styles = StyleSheet.create({
+    style: {
+        color: '#222',
+    },
+})

react-native-fast-image-example/src/GifExample.js

+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 }) => (
+    <View>
+        <Section>
+            <FeatureText text="• GIF support." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <FastImage style={styles.image} source={{ uri: GIF_URL + bust }} />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        height: 100,
+        width: 100,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(GifExample)

react-native-fast-image-example/src/Icons/Icon.js

+import React from 'react'
+import Base from 'react-native-vector-icons/Ionicons'
+
+const Icon = ({ size, name, tintColor }) => (
+    <Base
+        name={name}
+        size={size}
+        style={{ width: size, height: size }}
+        color={tintColor}
+    />
+)
+
+Icon.defaultProps = {
+    size: 26,
+}
+
+export default Icon

react-native-fast-image-example/src/ImageGrid.js

+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) {
+        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 (
+            <View style={styles.imageContainer}>
+                <ImageComponent source={{ uri }} style={styles.image} />
+            </View>
+        )
+    }
+
+    _extractKey = item => {
+        return item.id
+    }
+
+    render() {
+        if (this.state.error) {
+            return (
+                <View style={styles.container}>
+                    <Text style={styles.text}>Error fetching images.</Text>
+                </View>
+            )
+        }
+        return (
+            <View style={styles.container}>
+                <FlatList
+                    onLayout={this._onLayout}
+                    style={styles.list}
+                    columnWrapperStyle={[
+                        styles.columnWrapper,
+                        { height: this.state.itemHeight },
+                    ]}
+                    data={this.state.images}
+                    renderItem={this._renderItem}
+                    numColumns={4}
+                    keyExtractor={this._extractKey}
+                    getItemLayout={this._getItemLayout}
+                />
+                <StatusBarUnderlay />
+            </View>
+        )
+    }
+}
+
+const MARGIN = 2
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+    },
+    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

react-native-fast-image-example/src/LocalImagesExample.js

+import React, { Component } from 'react'
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
+import withCacheBust from './withCacheBust'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import FieldsImage from './images/fields.jpg'
+import FieldsBase64 from './images/fields.js'
+import JellyfishImage from './images/jellyfish.gif'
+import ImagePicker from 'react-native-image-picker'
+import BulletText from './BulletText'
+
+var options = {
+    title: 'Select Avatar',
+    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
+    storageOptions: {
+        skipBackup: true,
+        path: 'images',
+    },
+}
+
+const Image = ({ source, ...p }) => (
+    <FastImage style={styles.imageSquare} source={source} {...p} />
+)
+
+const Row = p => <View style={styles.row} {...p} />
+
+class PhotoExample extends Component {
+    state = {}
+
+    pick = () => {
+        ImagePicker.showImagePicker(options, response => {
+            console.log('Response = ', response)
+            if (response.didCancel) {
+                console.log('User cancelled image picker')
+            } else if (response.error) {
+                console.log('ImagePicker Error: ', response.error)
+            } else if (response.customButton) {
+                console.log(
+                    'User tapped custom button: ',
+                    response.customButton,
+                )
+            } else {
+                const fileUri = `file://${response.path}`
+                const uri = response.uri
+                this.setState({
+                    image: { uri: uri },
+                })
+            }
+        })
+    }
+
+    render() {
+        return (
+            <Row>
+                <BulletText>photo library</BulletText>
+                <TouchableOpacity onPress={this.pick}>
+                    <Image style={styles.imageSquare} source={this.state.image}>
+                        <Text style={{ color: 'white', fontWeight: '900' }}>
+                            Pick Photo
+                        </Text>
+                    </Image>
+                </TouchableOpacity>
+            </Row>
+        )
+    }
+}
+
+const Require = () => (
+    <React.Fragment>
+        <BulletText>require</BulletText>
+        <Image source={require('./images/fields.jpg')} />
+    </React.Fragment>
+)
+
+const Import = () => (
+    <React.Fragment>
+        <BulletText>import</BulletText>
+        <Image source={FieldsImage} />
+    </React.Fragment>
+)
+
+const GIF = () => (
+    <React.Fragment>
+        <BulletText>gif</BulletText>
+        <Image source={JellyfishImage} />
+    </React.Fragment>
+)
+
+const Base64 = () => (
+    <React.Fragment>
+        <BulletText>base64</BulletText>
+        <Image source={{ uri: FieldsBase64 }} />
+    </React.Fragment>
+)
+
+const LocalImagesExample = ({ onPressReload, bust }) => (
+    <View>
+        <Section>
+            <FeatureText>• Local images.</FeatureText>
+        </Section>
+        <View style={styles.container}>
+            <Row>
+                <Require />
+            </Row>
+            <Row>
+                <Import />
+            </Row>
+            <Row>
+                <GIF />
+            </Row>
+            <Row>
+                <Base64 />
+            </Row>
+            <PhotoExample />
+        </View>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    row: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    container: {
+        backgroundColor: '#eee',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 10,
+        paddingBottom: 10,
+    },
+    imageSquare: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginTop: 10,
+        width: 100,
+        flex: 0,
+    },
+    plus: {
+        width: 30,
+        height: 30,
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+    },
+})
+
+export default withCacheBust(LocalImagesExample)

react-native-fast-image-example/src/PreloadExample.js

+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 (
+            <View>
+                <Section>
+                    <FeatureText text="• Preloading." />
+                    <FeatureText text="• Progress indication using react-native-image-progress." />
+                </Section>
+                <SectionFlex
+                    style={styles.section}
+                    onPress={this.props.onPressReload}
+                >
+                    {this.state.show ? (
+                        <Image
+                            style={styles.image}
+                            source={{ uri: this.state.url }}
+                        />
+                    ) : (
+                        <View style={styles.image} />
+                    )}
+                    <View style={styles.buttons}>
+                        <View style={{ flex: 1 }}>
+                            <Button text="Bust" onPress={this.bustCache} />
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <Button text="Preload" onPress={this.preload} />
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <Button text="Render" onPress={this.showImage} />
+                        </View>
+                    </View>
+                </SectionFlex>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    section: {
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    buttons: {
+        flexDirection: 'row',
+        marginHorizontal: 20,
+        marginBottom: 10,
+    },
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginBottom: 10,
+        height: 100,
+        width: 100,
+    },
+})
+
+export default PreloadExample

react-native-fast-image-example/src/PriorityExample.js

+import React from 'react'
+import { PixelRatio, StyleSheet, View } from 'react-native'
+import withCacheBust from './withCacheBust'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import SectionFlex from './SectionFlex'
+import FeatureText from './FeatureText'
+
+const getImageUrl = (id, width, height) =>
+    `https://source.unsplash.com/${id}/${width}x${height}`
+const IMAGE_SIZE = 1024
+const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
+const IMAGE_URLS = [
+    getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
+    getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
+    getImageUrl('S7VCcp6KCKE', IMAGE_SIZE, IMAGE_SIZE),
+]
+
+const PriorityExample = ({ onPressReload, bust }) => (
+    <View>
+        <Section>
+            <FeatureText text="• Prioritize images (low, normal, high)." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <FastImage
+                style={styles.image}
+                source={{
+                    uri: IMAGE_URLS[0] + bust,
+                    priority: FastImage.priority.low,
+                }}
+            />
+            <FastImage
+                style={styles.image}
+                source={{
+                    uri: IMAGE_URLS[1] + bust,
+                    priority: FastImage.priority.normal,
+                }}
+            />
+            <FastImage
+                style={styles.image}
+                source={{
+                    uri: IMAGE_URLS[2] + bust,
+                    priority: FastImage.priority.high,
+                }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        flex: 1,
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 10,
+        marginVertical: 20,
+    },
+})
+
+export default withCacheBust(PriorityExample)

react-native-fast-image-example/src/ProgressExample.js

+import React, { Component } from 'react'
+import { StyleSheet, View, Text } 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'
+
+class ProgressExample extends Component {
+    state = {
+        mount: new Date(),
+        start: undefined,
+        progress: undefined,
+        end: undefined,
+    }
+
+    render() {
+        const { onPressReload, bust } = this.props
+        const { mount, start, progress, end } = this.state
+        return (
+            <View>
+                <Section>
+                    <FeatureText text="• Progress callbacks." />
+                </Section>
+                <SectionFlex
+                    onPress={onPressReload}
+                    style={{
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        paddingBottom: 20,
+                    }}
+                >
+                    <FastImage
+                        style={styles.image}
+                        source={{
+                            uri: IMAGE_URL + bust,
+                        }}
+                        onLoadStart={() => this.setState({ start: Date.now() })}
+                        onProgress={e =>
+                            this.setState({
+                                progress: Math.round(
+                                    100 *
+                                        (e.nativeEvent.loaded /
+                                            e.nativeEvent.total),
+                                ),
+                            })
+                        }
+                        onLoad={() => this.setState({ end: Date.now() })}
+                        onLoadEnd={() => {}}
+                    />
+                    <Text>
+                        onLoadStart
+                        {start !== undefined && ` - ${start - mount} ms`}
+                    </Text>
+                    <Text>
+                        onProgress
+                        {progress !== undefined && ` - ${progress} %`}
+                    </Text>
+                    <Text>
+                        onLoad
+                        {end !== undefined && ` - ${end - mount} ms`}
+                    </Text>
+                </SectionFlex>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    image: {
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        width: 100,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(ProgressExample)

react-native-fast-image-example/src/ResizeModeExample.js

+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import SectionFlex from './SectionFlex'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import BulletText from './BulletText'
+
+const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
+
+const Col = p => <View style={styles.col} {...p} />
+
+const ResizeModeExample = () => (
+    <View>
+        <Section>
+            <FeatureText text="• resizeMode." />
+        </Section>
+        <SectionFlex style={styles.container}>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.contain}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>contain</BulletText>
+            </Col>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.center}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>center</BulletText>
+            </Col>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.stretch}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>stretch</BulletText>
+            </Col>
+            <Col>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.cover}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <BulletText>cover</BulletText>
+            </Col>
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        height: 100,
+        width: 50,
+        backgroundColor: '#ddd',
+        margin: 20,
+        marginTop: 0,
+        marginBottom: 10,
+        flex: 0,
+    },
+    container: {
+        padding: 20,
+    },
+    col: {
+        alignItems: 'center',
+    },
+})
+
+export default ResizeModeExample

react-native-fast-image-example/src/Section.js

+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default ({ children }) => <View style={styles.section}>{children}</View>
+
+const styles = StyleSheet.create({
+    section: {
+        marginTop: 10,
+        marginBottom: 10,
+        marginLeft: 40,
+        marginRight: 40,
+    },
+})

react-native-fast-image-example/src/SectionFlex.js

+import React from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+export default ({ children, onPress, style }) =>
+    onPress ? (
+        <TouchableOpacity style={[styles.sectionFlex, style]} onPress={onPress}>
+            {children}
+        </TouchableOpacity>
+    ) : (
+        <View style={[styles.sectionFlex, style]}>{children}</View>
+    )
+
+const styles = StyleSheet.create({
+    sectionFlex: {
+        backgroundColor: '#eee',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginLeft: -10,
+        marginRight: -10,
+    },
+})

react-native-fast-image-example/src/StatusBarUnderlay.js

+import React from 'react'
+import { Platform, StatusBar, StyleSheet, View } from 'react-native'
+import { getStatusBarHeight } from 'react-native-status-bar-height'
+
+export const STATUS_BAR_HEIGHT = getStatusBarHeight()
+
+export default () => <View style={styles.statusBarUnderlay} />
+
+const styles = StyleSheet.create({
+    statusBarUnderlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: STATUS_BAR_HEIGHT,
+        backgroundColor: 'white',
+    },
+})

react-native-fast-image-example/src/index.js

+import React from 'react'
+import { YellowBox } from 'react-native'
+import { createBottomTabNavigator } from 'react-navigation'
+import FastImageExamples from './FastImageExamples'
+import FastImageGrid from './FastImageGrid'
+import DefaultImageGrid from './DefaultImageGrid'
+
+YellowBox.ignoreWarnings([
+    'Warning: isMounted(...) is deprecated',
+    'Module RCTImageLoader',
+])
+
+const App = createBottomTabNavigator({
+    fastImageExample: {
+        screen: FastImageExamples,
+    },
+    image: {
+        screen: DefaultImageGrid,
+    },
+    fastImage: {
+        screen: FastImageGrid,
+    },
+})
+
+export default App

react-native-fast-image-example/src/withCacheBust.js

+import React, { Component } from 'react'
+import uuid from 'uuid/v4'
+
+export default BaseComponent => {
+    class WithCacheBust extends Component {
+        state = { bust: '?bust' }
+
+        onPressReload = () => {
+            // Force complete re-render and bust image cache.
+            const key = uuid()
+            const bust = `?bust=${key}`
+            this.setState({ bust })
+        }
+
+        render() {
+            return (
+                <BaseComponent
+                    bust={this.state.bust}
+                    onPressReload={this.onPressReload}
+                />
+            )
+        }
+    }
+
+    WithCacheBust.displayName = `withCacheBust${BaseComponent.displayName}`
+
+    return WithCacheBust
+}