Remove children support.

Keeping the API similar to Image.
This commit is contained in:
Dylan Vann 2018-01-30 20:13:30 -05:00
parent 6731991d14
commit 2df16ca038
4 changed files with 27 additions and 29 deletions

View File

@ -50,7 +50,13 @@ class FastImage extends Component {
const resolvedSource = resolveAssetSource(source) const resolvedSource = resolveAssetSource(source)
if (!children && !borderRadius) { if (children) {
throw new Error(
'The <FastImage> component cannot contain children. If you want to render content on top of the image consider using absolute positioning.',
)
}
if (!borderRadius) {
return ( return (
<FastImageView <FastImageView
ref={e => (this._root = e)} ref={e => (this._root = e)}
@ -67,21 +73,18 @@ class FastImage extends Component {
} }
return ( return (
<View style={style} borderRadius={borderRadius}> <View style={[style, styles.imageContainer]} borderRadius={borderRadius}>
<View style={styles.imageContainer} borderRadius={borderRadius}> <FastImageView
<FastImageView ref={e => (this._root = e)}
ref={e => (this._root = e)} {...props}
{...props} style={StyleSheet.absoluteFill}
style={StyleSheet.absoluteFill} source={resolvedSource}
source={resolvedSource} onFastImageLoadStart={onLoadStart}
onFastImageLoadStart={onLoadStart} onFastImageProgress={onProgress}
onFastImageProgress={onProgress} onFastImageLoad={onLoad}
onFastImageLoad={onLoad} onFastImageError={onError}
onFastImageError={onError} onFastImageLoadEnd={onLoadEnd}
onFastImageLoadEnd={onLoadEnd} />
/>
</View>
{children}
</View> </View>
) )
} }
@ -89,7 +92,6 @@ class FastImage extends Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
imageContainer: { imageContainer: {
...StyleSheet.absoluteFillObject,
overflow: 'hidden', overflow: 'hidden',
}, },
}) })

View File

@ -7,24 +7,20 @@ import Section from './Section'
import FeatureText from './FeatureText' import FeatureText from './FeatureText'
const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif' const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
const PLUS_IMAGE_URL =
'https://cdn3.iconfinder.com/data/icons/block/32/add-512.png'
const BorderRadiusAndChildrenExample = ({ onPressReload, bust }) => ( const BorderRadiusExample = ({ onPressReload, bust }) => (
<View> <View>
<Section> <Section>
<FeatureText text="• Border radius + children." /> <FeatureText text="• Border radius." />
</Section> </Section>
<SectionFlex onPress={onPressReload}> <SectionFlex onPress={onPressReload}>
<FastImage <FastImage
style={styles.image} style={styles.image}
borderRadius={100} borderRadius={50}
source={{ source={{
uri: IMAGE_URL + bust, uri: IMAGE_URL + bust,
}} }}
> />
<FastImage style={styles.plus} source={{ uri: PLUS_IMAGE_URL }} />
</FastImage>
</SectionFlex> </SectionFlex>
</View> </View>
) )
@ -46,4 +42,4 @@ const styles = StyleSheet.create({
}, },
}) })
export default withCacheBust(BorderRadiusAndChildrenExample) export default withCacheBust(BorderRadiusExample)

View File

@ -4,7 +4,7 @@ import Icon from 'react-native-vector-icons/Ionicons'
import Section from './Section' import Section from './Section'
import PriorityExample from './PriorityExample' import PriorityExample from './PriorityExample'
import GifExample from './GifExample' import GifExample from './GifExample'
import BorderRadiusAndChildrenExample from './BorderRadiusAndChildrenExample' import BorderRadiusExample from './BorderRadiusExample'
import FeatureText from './FeatureText' import FeatureText from './FeatureText'
import ProgressExample from './ProgressExample' import ProgressExample from './ProgressExample'
import PreloadExample from './PreloadExample' import PreloadExample from './PreloadExample'
@ -27,7 +27,7 @@ const FastImageExample = () => (
</Section> </Section>
<PriorityExample /> <PriorityExample />
<GifExample /> <GifExample />
<BorderRadiusAndChildrenExample /> <BorderRadiusExample />
<ProgressExample /> <ProgressExample />
<PreloadExample /> <PreloadExample />
</View> </View>

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native' import { View, StyleSheet } from 'react-native'
import SectionFlex from './SectionFlex' import SectionFlex from './SectionFlex'
import FastImage from 'react-native-fast-image' import FastImage from 'react-native-fast-image'
import Section from './Section' import Section from './Section'