diff --git a/.gitignore b/.gitignore index c8eaf843a..b84803dbe 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,5 @@ lib/android/src/main/gen example/android/app/src/main/gen # build +ios/build react-native-fast-image-*.tgz diff --git a/.npmignore b/.npmignore index 68ea6e30d..6c9766e7d 100644 --- a/.npmignore +++ b/.npmignore @@ -1,5 +1,6 @@ ios/FastImage/Libraries/SDWebImage/.git* ios/FastImage/Libraries/SDWebImage/Examples ios/FastImage/Libraries/SDWebImage/Tests +ios/build example server diff --git a/ReactNativeFastImageCocoaPodsExample/.gitignore b/ReactNativeFastImageCocoaPodsExample/.gitignore index 0826423b7..6c510b081 100644 --- a/ReactNativeFastImageCocoaPodsExample/.gitignore +++ b/ReactNativeFastImageCocoaPodsExample/.gitignore @@ -51,3 +51,5 @@ buck-out/ */fastlane/report.xml */fastlane/Preview.html */fastlane/screenshots + +ios/Pods diff --git a/ReactNativeFastImageCocoaPodsExample/App.js b/ReactNativeFastImageCocoaPodsExample/App.js deleted file mode 100644 index dd1d45ab3..000000000 --- a/ReactNativeFastImageCocoaPodsExample/App.js +++ /dev/null @@ -1,58 +0,0 @@ -/** - * 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 { - render() { - return ( - - - Welcome to React Native! - - - To get started, edit App.js - - - {instructions} - - - ); - } -} - -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, - }, -}); diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/App.js b/ReactNativeFastImageCocoaPodsExample/FastImage/App.js new file mode 100644 index 000000000..41b745c74 --- /dev/null +++ b/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 diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/BorderRadiusExample.js b/ReactNativeFastImageCocoaPodsExample/FastImage/BorderRadiusExample.js new file mode 100644 index 000000000..eedd35bab --- /dev/null +++ b/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 }) => ( + +
+ +
+ + + + +
+) + +const styles = StyleSheet.create({ + imageSquare: { + borderRadius: 50, + height: 100, + backgroundColor: '#ddd', + margin: 20, + width: 100, + flex: 0, + }, + imageRectangular: { + borderRadius: 50, + borderTopLeftRadius: 10, + borderBottomRightRadius: 10, + height: 100, + backgroundColor: '#ddd', + margin: 20, + flex: 1, + }, + plus: { + width: 30, + height: 30, + position: 'absolute', + bottom: 0, + right: 0, + }, +}) + +export default withCacheBust(BorderRadiusExample) diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/Button.js b/ReactNativeFastImageCocoaPodsExample/FastImage/Button.js new file mode 100644 index 000000000..3583eb8cb --- /dev/null +++ b/ReactNativeFastImageCocoaPodsExample/FastImage/Button.js @@ -0,0 +1,28 @@ +import React from 'react' +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' + +const Button = ({ text, onPress }) => ( + + + {text} + + +) + +const styles = StyleSheet.create({ + button: { + backgroundColor: 'black', + margin: 5, + height: 44, + paddingLeft: 10, + paddingRight: 10, + borderRadius: 10, + alignItems: 'center', + justifyContent: 'center', + }, + text: { + color: 'white', + }, +}) + +export default Button diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/DefaultImageGrid.js b/ReactNativeFastImageCocoaPodsExample/FastImage/DefaultImageGrid.js new file mode 100644 index 000000000..1a37bb187 --- /dev/null +++ b/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 = () => + +DefaultImageGrid.navigationOptions = { + tabBarLabel: 'Image Grid', + tabBarIcon: props => ( + + ), +} + +export default DefaultImageGrid diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/FastImageExamples.js b/ReactNativeFastImageCocoaPodsExample/FastImage/FastImageExamples.js new file mode 100644 index 000000000..5741ba041 --- /dev/null +++ b/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 = () => ( + + + + +
+ 🚩 FastImage + +
+ + + + + +
+
+ +
+) + +FastImageExample.navigationOptions = { + tabBarLabel: 'FastImage Example', + tabBarIcon: props => ( + + ), +} + +const styles = StyleSheet.create({ + titleText: { + fontWeight: '900', + marginBottom: 20, + color: '#222', + }, + contentContainer: { + marginTop: 20, + marginBottom: 20, + }, + image: { + flex: 1, + height: 100, + backgroundColor: '#ddd', + margin: 10, + }, + container: { + flex: 1, + alignItems: 'stretch', + backgroundColor: '#fff', + }, + scrollContainer: { + marginTop: STATUS_BAR_HEIGHT, + }, + scrollContentContainer: { + alignItems: 'stretch', + flex: 0, + }, +}) + +export default FastImageExample diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/FastImageGrid.js b/ReactNativeFastImageCocoaPodsExample/FastImage/FastImageGrid.js new file mode 100644 index 000000000..907c09ee7 --- /dev/null +++ b/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 = () => + +FastImageGrid.navigationOptions = { + tabBarLabel: 'FastImage Grid', + tabBarIcon: props => ( + + ), +} + +export default FastImageGrid diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/FeatureText.js b/ReactNativeFastImageCocoaPodsExample/FastImage/FeatureText.js new file mode 100644 index 000000000..66e468ffc --- /dev/null +++ b/ReactNativeFastImageCocoaPodsExample/FastImage/FeatureText.js @@ -0,0 +1,10 @@ +import React from 'react' +import { StyleSheet, Text } from 'react-native' + +export default ({ text }) => {text} + +const styles = StyleSheet.create({ + style: { + color: '#222', + }, +}) diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/GifExample.js b/ReactNativeFastImageCocoaPodsExample/FastImage/GifExample.js new file mode 100644 index 000000000..d5a407734 --- /dev/null +++ b/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 }) => ( + +
+ +
+ + + +
+) + +const styles = StyleSheet.create({ + image: { + backgroundColor: '#ddd', + margin: 10, + height: 100, + width: 100, + flex: 0, + }, +}) + +export default withCacheBust(GifExample) diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/Icons/Icon.js b/ReactNativeFastImageCocoaPodsExample/FastImage/Icons/Icon.js new file mode 100644 index 000000000..d4909fb6f --- /dev/null +++ b/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 }) => ( + +) + +Icon.defaultProps = { + size: 26, +} + +export default Icon \ No newline at end of file diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/ImageGrid.js b/ReactNativeFastImageCocoaPodsExample/FastImage/ImageGrid.js new file mode 100644 index 000000000..98bc5c8de --- /dev/null +++ b/ReactNativeFastImageCocoaPodsExample/FastImage/ImageGrid.js @@ -0,0 +1,125 @@ +import React, { Component } from 'react' +import { FlatList, StyleSheet, Text, View } from 'react-native' +import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay' + +const getImageUrl = (id, width, height) => + `https://unsplash.it/${width}/${height}?image=${id}` + +class ImageGrid extends Component { + constructor(props: Object) { + super(props) + + fetch('https://unsplash.it/list') + .then(res => res.json()) + .then(this._onFetchImagesSuccess) + .catch(this._onFetchImagesError) + } + + state = { + images: [], + itemHeight: 0, + } + + _onLayout = e => { + const width = e.nativeEvent.layout.width + this.setState({ + itemHeight: width / 4, + }) + } + + _onFetchImagesError = () => { + this.setState({ + error: true, + }) + } + + _onFetchImagesSuccess = images => { + this.setState({ + images, + }) + } + + _getItemLayout = (data, index) => { + const { itemHeight } = this.state + return { length: itemHeight, offset: itemHeight * index, index } + } + + _renderItem = ({ item }) => { + const ImageComponent = this.props.ImageComponent + const uri = getImageUrl(item.id, 100, 100) + return ( + + + + ) + } + + _extractKey = item => { + return item.id + } + + render() { + if (this.state.error) { + return ( + + Error fetching images. + + ) + } + return ( + + + + + ) + } +} + +const MARGIN = 2 + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'stretch', + justifyContent: 'center', + }, + text: { + textAlign: 'center', + }, + list: { + marginTop: STATUS_BAR_HEIGHT, + flex: 1, + }, + columnWrapper: { + flex: 1, + flexDirection: 'row', + marginLeft: -MARGIN, + marginRight: -MARGIN, + }, + image: { + flex: 1, + width: null, + height: null, + margin: MARGIN, + backgroundColor: '#eee', + }, + imageContainer: { + flex: 1, + alignItems: 'stretch', + }, +}) + +export default ImageGrid diff --git a/ReactNativeFastImageCocoaPodsExample/FastImage/PreloadExample.js b/ReactNativeFastImageCocoaPodsExample/FastImage/PreloadExample.js new file mode 100644 index 000000000..4e9733915 --- /dev/null +++ b/ReactNativeFastImageCocoaPodsExample/FastImage/PreloadExample.js @@ -0,0 +1,84 @@ +import React, { Component } from 'react' +import { StyleSheet, View } from 'react-native' +import SectionFlex from './SectionFlex' +import FastImage from 'react-native-fast-image' +import Section from './Section' +import FeatureText from './FeatureText' +import uuid from 'uuid/v4' +import Button from './Button' +import { createImageProgress } from 'react-native-image-progress' + +const IMAGE_URL = + 'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif' + +const Image = createImageProgress(FastImage) + +class PreloadExample extends Component { + state = { + show: false, + url: IMAGE_URL, + } + + bustCache = () => { + const key = uuid() + const bust = `?bust=${key}` + // Preload images. This can be called anywhere. + const url = IMAGE_URL + bust + this.setState({ + url, + show: false, + }) + } + + preload = () => { + FastImage.preload([{ uri: this.state.url }]) + } + + showImage = () => { + this.setState({ show: true }) + } + + render() { + return ( + +
+ + +
+ + {this.state.show ? ( + + ) : ( + + )} + + +