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)
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 (
<FastImageView
ref={e => (this._root = e)}
@ -67,21 +73,18 @@ class FastImage extends Component {
}
return (
<View style={style} borderRadius={borderRadius}>
<View style={styles.imageContainer} borderRadius={borderRadius}>
<FastImageView
ref={e => (this._root = e)}
{...props}
style={StyleSheet.absoluteFill}
source={resolvedSource}
onFastImageLoadStart={onLoadStart}
onFastImageProgress={onProgress}
onFastImageLoad={onLoad}
onFastImageError={onError}
onFastImageLoadEnd={onLoadEnd}
/>
</View>
{children}
<View style={[style, styles.imageContainer]} borderRadius={borderRadius}>
<FastImageView
ref={e => (this._root = e)}
{...props}
style={StyleSheet.absoluteFill}
source={resolvedSource}
onFastImageLoadStart={onLoadStart}
onFastImageProgress={onProgress}
onFastImageLoad={onLoad}
onFastImageError={onError}
onFastImageLoadEnd={onLoadEnd}
/>
</View>
)
}
@ -89,7 +92,6 @@ class FastImage extends Component {
const styles = StyleSheet.create({
imageContainer: {
...StyleSheet.absoluteFillObject,
overflow: 'hidden',
},
})

View File

@ -7,24 +7,20 @@ import Section from './Section'
import FeatureText from './FeatureText'
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>
<Section>
<FeatureText text="• Border radius + children." />
<FeatureText text="• Border radius." />
</Section>
<SectionFlex onPress={onPressReload}>
<FastImage
style={styles.image}
borderRadius={100}
borderRadius={50}
source={{
uri: IMAGE_URL + bust,
}}
>
<FastImage style={styles.plus} source={{ uri: PLUS_IMAGE_URL }} />
</FastImage>
/>
</SectionFlex>
</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 PriorityExample from './PriorityExample'
import GifExample from './GifExample'
import BorderRadiusAndChildrenExample from './BorderRadiusAndChildrenExample'
import BorderRadiusExample from './BorderRadiusExample'
import FeatureText from './FeatureText'
import ProgressExample from './ProgressExample'
import PreloadExample from './PreloadExample'
@ -27,7 +27,7 @@ const FastImageExample = () => (
</Section>
<PriorityExample />
<GifExample />
<BorderRadiusAndChildrenExample />
<BorderRadiusExample />
<ProgressExample />
<PreloadExample />
</View>

View File

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