diff --git a/FastImage.js b/FastImage.js index cc8cf58..00e8b14 100644 --- a/FastImage.js +++ b/FastImage.js @@ -50,7 +50,13 @@ class FastImage extends Component { const resolvedSource = resolveAssetSource(source) - if (!children && !borderRadius) { + if (children) { + throw new Error( + 'The component cannot contain children. If you want to render content on top of the image consider using absolute positioning.', + ) + } + + if (!borderRadius) { return ( (this._root = e)} @@ -67,21 +73,18 @@ class FastImage extends Component { } return ( - - - (this._root = e)} - {...props} - style={StyleSheet.absoluteFill} - source={resolvedSource} - onFastImageLoadStart={onLoadStart} - onFastImageProgress={onProgress} - onFastImageLoad={onLoad} - onFastImageError={onError} - onFastImageLoadEnd={onLoadEnd} - /> - - {children} + + (this._root = e)} + {...props} + style={StyleSheet.absoluteFill} + source={resolvedSource} + onFastImageLoadStart={onLoadStart} + onFastImageProgress={onProgress} + onFastImageLoad={onLoad} + onFastImageError={onError} + onFastImageLoadEnd={onLoadEnd} + /> ) } @@ -89,7 +92,6 @@ class FastImage extends Component { const styles = StyleSheet.create({ imageContainer: { - ...StyleSheet.absoluteFillObject, overflow: 'hidden', }, }) diff --git a/example/fastImage/BorderRadiusAndChildrenExample.js b/example/fastImage/BorderRadiusExample.js similarity index 66% rename from example/fastImage/BorderRadiusAndChildrenExample.js rename to example/fastImage/BorderRadiusExample.js index 364287c..0ce155c 100644 --- a/example/fastImage/BorderRadiusAndChildrenExample.js +++ b/example/fastImage/BorderRadiusExample.js @@ -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 }) => (
- +
- - + />
) @@ -46,4 +42,4 @@ const styles = StyleSheet.create({ }, }) -export default withCacheBust(BorderRadiusAndChildrenExample) +export default withCacheBust(BorderRadiusExample) diff --git a/example/fastImage/FastImageExamples.js b/example/fastImage/FastImageExamples.js index d356429..59c10c2 100644 --- a/example/fastImage/FastImageExamples.js +++ b/example/fastImage/FastImageExamples.js @@ -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 = () => ( - +
diff --git a/example/fastImage/PreloadExample.js b/example/fastImage/PreloadExample.js index a460a42..c6f1095 100644 --- a/example/fastImage/PreloadExample.js +++ b/example/fastImage/PreloadExample.js @@ -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'