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

@@ -1,5 +1,6 @@
 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/FastImage/App.js

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,16 @@
+// @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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,17 @@
+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