Remove children support.
Keeping the API similar to Image.
This commit is contained in:
parent
6731991d14
commit
2df16ca038
36
FastImage.js
36
FastImage.js
|
@ -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',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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)
|
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
Loading…
Reference in New Issue