Setup cocoapods example.

.gitignore

@@ -37,4 +37,5 @@ lib/android/src/main/gen
 example/android/app/src/main/gen
 
 # build
+ios/build
 react-native-fast-image-*.tgz

.npmignore

 ios/FastImage/Libraries/SDWebImage/.git*
 ios/FastImage/Libraries/SDWebImage/Examples
 ios/FastImage/Libraries/SDWebImage/Tests
+ios/build
 example
 server

ReactNativeFastImageCocoaPodsExample/.gitignore

@@ -51,3 +51,5 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
+
+ios/Pods

ReactNativeFastImageCocoaPodsExample/App.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @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,
-  },
-});

ReactNativeFastImageCocoaPodsExample/FastImage/App.js

+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

ReactNativeFastImageCocoaPodsExample/FastImage/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)

ReactNativeFastImageCocoaPodsExample/FastImage/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: 5,
+    height: 44,
+    paddingLeft: 10,
+    paddingRight: 10,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'white',
+  },
+})
+
+export default Button

ReactNativeFastImageCocoaPodsExample/FastImage/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-outline" focusedName="ios-image" {...props} />
+  ),
+}
+
+export default DefaultImageGrid

ReactNativeFastImageCocoaPodsExample/FastImage/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 StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
+
+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 />
+      </View>
+    </ScrollView>
+    <StatusBarUnderlay />
+  </View>
+)
+
+FastImageExample.navigationOptions = {
+  tabBarLabel: 'FastImage Example',
+  tabBarIcon: props => (
+    <Icon
+      name="ios-information-circle-outline"
+      focusedName="ios-information-circle"
+      {...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

ReactNativeFastImageCocoaPodsExample/FastImage/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-outline" focusedName="ios-photos" {...props} />
+  ),
+}
+
+export default FastImageGrid

ReactNativeFastImageCocoaPodsExample/FastImage/FeatureText.js

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

ReactNativeFastImageCocoaPodsExample/FastImage/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: 10,
+    height: 100,
+    width: 100,
+    flex: 0,
+  },
+})
+
+export default withCacheBust(GifExample)

ReactNativeFastImageCocoaPodsExample/FastImage/Icons/Icon.js

+import React from 'react'
+import Base from 'react-native-vector-icons/Ionicons'
+
+const Icon = ({ size, name, focusedName, focused, tintColor }) => (
+    <Base
+        name={focused ? focusedName : name}
+        size={size}
+        style={{ width: size, height: size }}
+        color={tintColor}
+    />
+)
+
+Icon.defaultProps = {
+    size: 26,
+}
+
+export default Icon
\ No newline at end of file

ReactNativeFastImageCocoaPodsExample/FastImage/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: 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 (
+      <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',
+  },
+  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

ReactNativeFastImageCocoaPodsExample/FastImage/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={{ flexDirection: 'row', marginHorizontal: 10 }}>
+            <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',
+  },
+  image: {
+    backgroundColor: '#ddd',
+    margin: 10,
+    height: 100,
+    width: 100,
+  },
+})
+
+export default PreloadExample

ReactNativeFastImageCocoaPodsExample/FastImage/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,
+  },
+})
+
+export default withCacheBust(PriorityExample)

ReactNativeFastImageCocoaPodsExample/FastImage/ProgressExample.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 getTestProgressCallbacks = label => ({
+  onLoadStart: () => console.log(`${label} - onLoadStart`),
+  onProgress: e =>
+    console.log(
+      `${label} - onProgress - ${e.nativeEvent.loaded / e.nativeEvent.total}`,
+    ),
+  onLoad: e => console.log(`${label} - onLoad`, e.nativeEvent),
+  onError: () => console.log(`${label} - onError`),
+  onLoadEnd: () => console.log(`${label} - onLoadEnd`),
+})
+
+const ProgressExample = ({ onPressReload, bust }) => (
+  <View>
+    <Section>
+      <FeatureText text="• Progress callbacks." />
+    </Section>
+    <SectionFlex onPress={onPressReload}>
+      <FastImage
+        style={styles.image}
+        source={{
+          uri: IMAGE_URL + bust,
+        }}
+        {...getTestProgressCallbacks('ProgressExample')}
+      />
+    </SectionFlex>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  image: {
+    height: 100,
+    backgroundColor: '#ddd',
+    margin: 20,
+    width: 100,
+    flex: 0,
+  },
+})
+
+export default withCacheBust(ProgressExample)

ReactNativeFastImageCocoaPodsExample/FastImage/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,
+  },
+})

ReactNativeFastImageCocoaPodsExample/FastImage/SectionFlex.js

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

ReactNativeFastImageCocoaPodsExample/FastImage/StatusBarUnderlay.js

+import React from 'react'
+import { Platform, StatusBar, StyleSheet, View } from 'react-native'
+
+export const STATUS_BAR_HEIGHT =
+  Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
+
+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',
+  },
+})

ReactNativeFastImageCocoaPodsExample/FastImage/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
+}

ReactNativeFastImageCocoaPodsExample/index.js

-import { AppRegistry } from 'react-native';
-import App from './App';
+import { AppRegistry } from 'react-native'
+import App from './FastImage/App'
 
-AppRegistry.registerComponent('ReactNativeFastImageCocoaPodsExample', () => App);
+AppRegistry.registerComponent('ReactNativeFastImageCocoaPodsExample', () => App)

ReactNativeFastImageCocoaPodsExample/ios/Podfile

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

ReactNativeFastImageCocoaPodsExample/ios/Podfile.lock

+PODS:
+  - boost-for-react-native (1.63.0)
+  - DoubleConversion (1.1.5)
+  - FLAnimatedImage (1.0.12)
+  - Folly (2016.09.26.00):
+    - boost-for-react-native
+    - DoubleConversion
+    - glog
+  - glog (0.3.4)
+  - React (0.54.2):
+    - React/Core (= 0.54.2)
+  - react-native-fast-image (3.0.2):
+    - FLAnimatedImage
+    - React
+    - SDWebImage/Core
+    - SDWebImage/GIF
+  - React/Core (0.54.2):
+    - yoga (= 0.54.2.React)
+  - React/CxxBridge (0.54.2):
+    - Folly (= 2016.09.26.00)
+    - React/Core
+    - React/cxxreact
+  - React/cxxreact (0.54.2):
+    - boost-for-react-native (= 1.63.0)
+    - Folly (= 2016.09.26.00)
+    - React/jschelpers
+    - React/jsinspector
+  - React/DevSupport (0.54.2):
+    - React/Core
+    - React/RCTWebSocket
+  - React/fishhook (0.54.2)
+  - React/jschelpers (0.54.2):
+    - Folly (= 2016.09.26.00)
+    - React/PrivateDatabase
+  - React/jsinspector (0.54.2)
+  - React/PrivateDatabase (0.54.2)
+  - React/RCTBlob (0.54.2):
+    - React/Core
+  - React/RCTImage (0.54.2):
+    - React/Core
+    - React/RCTNetwork
+  - React/RCTNetwork (0.54.2):
+    - React/Core
+  - React/RCTText (0.54.2):
+    - React/Core
+  - React/RCTWebSocket (0.54.2):
+    - React/Core
+    - React/fishhook
+    - React/RCTBlob
+  - RNVectorIcons (4.5.0):
+    - React
+  - SDWebImage/Core (4.3.3)
+  - SDWebImage/GIF (4.3.3):
+    - FLAnimatedImage (~> 1.0)
+    - SDWebImage/Core
+  - yoga (0.54.2.React)
+
+DEPENDENCIES:
+  - react-native-fast-image (from `../node_modules/react-native-fast-image`)
+  - React/Core (from `../node_modules/react-native`)
+  - React/CxxBridge (from `../node_modules/react-native`)
+  - React/DevSupport (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`)
+
+EXTERNAL SOURCES:
+  React:
+    :path: ../node_modules/react-native
+  react-native-fast-image:
+    :path: ../node_modules/react-native-fast-image
+  RNVectorIcons:
+    :path: ../node_modules/react-native-vector-icons
+  yoga:
+    :path: ../node_modules/react-native/ReactCommon/yoga
+
+SPEC CHECKSUMS:
+  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
+  DoubleConversion: e22e0762848812a87afd67ffda3998d9ef29170c
+  FLAnimatedImage: 4a0b56255d9b05f18b6dd7ee06871be5d3b89e31
+  Folly: 211775e49d8da0ca658aebc8eab89d642935755c
+  glog: 1de0bb937dccdc981596d3b5825ebfb765017ded
+  React: c237e42de9c70e5cac6eeb52b4cfd3a0910c1f00
+  react-native-fast-image: cba3d9bf9c2cf8ddb643d887a686c53a5dd90a2c
+  RNVectorIcons: c0dbfbf6068fefa240c37b0f71bd03b45dddac44
+  SDWebImage: de4d90b5bff3571eae7bd16202b1f43135409fa5
+  yoga: 55da126afc384965b96bff46652464373b330add
+
+PODFILE CHECKSUM: ee9eca64053ac06cb269faee8f128dfd0a4c1de4
+
+COCOAPODS: 1.4.0

ReactNativeFastImageCocoaPodsExample/ios/ReactNativeFastImageCocoaPodsExample.xcworkspace/contents.xcworkspacedata

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

ReactNativeFastImageCocoaPodsExample/ios/ReactNativeFastImageCocoaPodsExample/Info.plist

@@ -24,6 +24,33 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<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>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.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>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -38,19 +65,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>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
 </dict>
 </plist>

ReactNativeFastImageCocoaPodsExample/package.json

@@ -8,7 +8,13 @@
   },
   "dependencies": {
     "react": "^16.3.0-alpha.1",
-    "react-native": "0.54.2"
+    "react-native": "0.54.2",
+    "react-native-fast-image": "../react-native-fast-image-3.0.2.tgz",
+    "react-native-image-progress": "^1.1.0",
+    "react-native-vector-icons": "^4.5.0",
+    "react-navigation": "^1.5.7",
+    "react-timeout": "^1.1.1",
+    "uuid": "^3.2.1"
   },
   "devDependencies": {
     "babel-jest": "23.0.0-alpha.0",
@@ -19,4 +25,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
\ No newline at end of file
+}

ReactNativeFastImageCocoaPodsExample/yarn.lock

@@ -1457,6 +1457,10 @@ ci-info@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -1633,7 +1637,7 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-create-react-class@^15.6.3:
+create-react-class@^15.5.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   dependencies:
@@ -2462,6 +2466,10 @@ hoek@4.x.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
+hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -3404,7 +3412,7 @@ lodash@^3.5.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -4027,6 +4035,12 @@ path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -4135,7 +4149,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -4198,6 +4212,58 @@ react-devtools-core@3.1.0:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
+react-lifecycles-compat@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
+
+react-native-dismiss-keyboard@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
+
+react-native-drawer-layout-polyfill@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz#192c84d7a5a6b8a6d2be2c7daa5e4164518d0cc7"
+  dependencies:
+    react-native-drawer-layout "1.3.2"
+
+react-native-drawer-layout@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz#b9740d7663a1dc4f88a61b9c6d93d2d948ea426e"
+  dependencies:
+    react-native-dismiss-keyboard "1.0.0"
+
+react-native-fast-image@../react-native-fast-image-3.0.2.tgz:
+  version "3.0.2"
+  resolved "../react-native-fast-image-3.0.2.tgz#a8b40da6e3d196127c86f198994ae705508b35f7"
+  dependencies:
+    prop-types "^15.5.10"
+
+react-native-image-progress@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-image-progress/-/react-native-image-progress-1.1.0.tgz#737140d699fb3fb107ec70615736dfdc2eef7b35"
+  dependencies:
+    prop-types "^15.5.10"
+
+react-native-safe-area-view@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
+react-native-tab-view@^0.0.74:
+  version "0.0.74"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.74.tgz#62c0c882d9232b461ce181d440d683b4f99d1bd8"
+  dependencies:
+    prop-types "^15.6.0"
+
+react-native-vector-icons@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.5.0.tgz#6b95619e64f62f05f579f74a01fe5640df95158b"
+  dependencies:
+    lodash "^4.0.0"
+    prop-types "^15.5.10"
+    yargs "^8.0.2"
+
 react-native@0.54.2:
   version "0.54.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.54.2.tgz#73786e7bf3f80b0b060ca0bfe5b192f9c2f253da"
@@ -4261,6 +4327,19 @@ react-native@0.54.2:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
+react-navigation@^1.5.7:
+  version "1.5.7"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.5.7.tgz#157556922f9900a6afc2129abf4853bbd8332a57"
+  dependencies:
+    clamp "^1.0.1"
+    hoist-non-react-statics "^2.2.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^1.0.2"
+    react-native-drawer-layout-polyfill "^1.3.2"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "^0.0.74"
+
 react-proxy@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
@@ -4276,6 +4355,14 @@ react-test-renderer@^16.3.0-alpha.1:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-timeout@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-timeout/-/react-timeout-1.1.1.tgz#50e49d8c861e4b5745ce230182bdd279b82400ba"
+  dependencies:
+    create-react-class "^15.5.2"
+    hoist-non-react-statics "^2.3.1"
+    object-assign "^4.0.1"
+
 react-timer-mixin@^0.13.2:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz#0da8b9f807ec07dc3e854d082c737c65605b3d22"
@@ -5179,7 +5266,7 @@ uuid@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
-uuid@^3.0.0, uuid@^3.1.0:
+uuid@^3.0.0, uuid@^3.1.0, uuid@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
 
@@ -5418,6 +5505,24 @@ yargs@^10.0.3:
     y18n "^3.2.1"
     yargs-parser "^8.1.0"
 
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
 yargs@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"

ReactNativeFastImageExample/yarn.lock

@@ -4234,7 +4234,7 @@ react-native-drawer-layout@1.3.2:
 
 react-native-fast-image@../react-native-fast-image-3.0.2.tgz:
   version "3.0.2"
-  resolved "../react-native-fast-image-3.0.2.tgz#60d77feda1f52d527f7712e53dbc7f587ed503c2"
+  resolved "../react-native-fast-image-3.0.2.tgz#a8b40da6e3d196127c86f198994ae705508b35f7"
   dependencies:
     prop-types "^15.5.10"
 

ios/FastImage.xcodeproj/project.pbxproj

@@ -401,10 +401,11 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				HEADER_SEARCH_PATHS = (
-					"$(SRCROOT)/../../react-native/React/**",
-					"$(SRCROOT)/../../../ios/Pods/Headers/Public/**",
 					"${SYMROOT}",
 					"$(BUILT_PRODUCTS_DIR)",
+					"$(SRCROOT)/../../react-native/React/**",
+					"$(SRCROOT)/../../react-native/Libraries/Image",
+					"$(SRCROOT)/../../../ios/Pods/Headers/Public/**",
 					"$(SRCROOT)/Vendor/SDWebImage",
 					"$(SRCROOT)/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage",
 				);
@@ -418,10 +419,11 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				HEADER_SEARCH_PATHS = (
-					"$(SRCROOT)/../../react-native/React/**",
-					"$(SRCROOT)/../../../ios/Pods/Headers/Public/**",
 					"${SYMROOT}",
 					"$(BUILT_PRODUCTS_DIR)",
+					"$(SRCROOT)/../../react-native/React/**",
+					"$(SRCROOT)/../../react-native/Libraries/Image",
+					"$(SRCROOT)/../../../ios/Pods/Headers/Public/**",
 					"$(SRCROOT)/Vendor/SDWebImage",
 					"$(SRCROOT)/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage",
 				);

package.json

@@ -16,7 +16,9 @@
   "license": "MIT",
   "author": "Dylan Vann <dylanvann@gmail.com> (http://dylanvann.com)",
   "files": [
-    "ios",
+    "ios/FastImage",
+    "ios/Vendor",
+    "ios/FastImage.xcodeproj",
     "android",
     "index.js",
     "index.d.ts",
@@ -31,11 +33,11 @@
     "url": "git+https://github.com/DylanVann/react-native-fast-image.git"
   },
   "scripts": {
-    "format": "prettier --write --no-semi --single-quote --trailing-comma all ./index.js ./react-native-fast-image-example/*.js ./react-native-fast-image-example/fastImage/*.js ./react-native-fast-image-server/*.js",
+    "format": "prettier --write --no-semi --single-quote --trailing-comma all ./index.js ./ReactNativeFastImageExample/FastImage/*.js ./react-native-fast-image-server/*.js",
     "prepare": "git submodule update --init --recursive",
     "test": "yarn run test:pretty && yarn run test:jest",
     "test:jest": "jest *.js",
-    "test:pretty": "prettier-check --write --no-semi --single-quote --trailing-comma all ./index.js ./react-native-fast-image-example/*.js ./react-native-fast-image-example/fastImage/*.js ./react-native-fast-image-server/*.js"
+    "test:pretty": "prettier-check --write --no-semi --single-quote --trailing-comma all ./index.js ./ReactNativeFastImageExample/FastImage/*.js ./react-native-fast-image-server/*.js"
   },
   "dependencies": {
     "prop-types": "^15.5.10"
@@ -53,8 +55,9 @@
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "example",
-      "server"
+      "ReactNativeFastImageExample",
+      "ReactNativeFastImageCocoaPodsExample",
+      "react-native-fast-image-server"
     ]
   }
 }

react-native-fast-image.podspec

@@ -10,13 +10,17 @@ Pod::Spec.new do |s|
   s.authors = { "Dylan Vann" => "dylan@dylanvann.com" }
   s.homepage = "https://github.com/DylanVann/react-native-fast-image#readme"
   s.license = "MIT"
+
   s.platform = :ios, "8.0"
+  s.framework    = 'UIKit'
+  s.requires_arc = true
 
   s.source = { :git => "https://github.com/DylanVann/react-native-fast-image.git" }
   s.source_files = "ios/**/*.{h,m}"
   s.exclude_files = "ios/Vendor/**/*.{h,m}"
 
   s.dependency 'React'
-  s.dependency 'SDWebImage'
+  s.dependency 'SDWebImage/Core'
+  s.dependency 'SDWebImage/GIF'
   s.dependency 'FLAnimatedImage'
 end
\ No newline at end of file