🔘 Add border radius support to android and refactor and update examples.

Author: DylanVann

FastImage.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {
+  View,
   Image,
   NativeModules,
   requireNativeComponent,
   ViewPropTypes,
+  StyleSheet,
 } from 'react-native'
 
 const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource')
@@ -24,6 +26,9 @@ class FastImage extends Component {
       onLoad,
       onError,
       onLoadEnd,
+      style,
+      children,
+      borderRadius,
       ...props
     } = this.props
 
@@ -44,21 +49,51 @@ class FastImage extends Component {
     }
 
     const resolvedSource = resolveAssetSource(source)
+
+    if (!children && !borderRadius) {
+      return (
+        <FastImageView
+          ref={e => (this._root = e)}
+          {...props}
+          style={style}
+          source={resolvedSource}
+          onFastImageLoadStart={onLoadStart}
+          onFastImageProgress={onProgress}
+          onFastImageLoad={onLoad}
+          onFastImageError={onError}
+          onFastImageLoadEnd={onLoadEnd}
+        />
+      )
+    }
+
     return (
-      <FastImageView
-        ref={e => (this._root = e)}
-        {...props}
-        source={resolvedSource}
-        onFastImageLoadStart={onLoadStart}
-        onFastImageProgress={onProgress}
-        onFastImageLoad={onLoad}
-        onFastImageError={onError}
-        onFastImageLoadEnd={onLoadEnd}
-      />
+      <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>
     )
   }
 }
 
+const styles = StyleSheet.create({
+  imageContainer: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+})
+
 FastImage.resizeMode = {
   contain: 'contain',
   cover: 'cover',

example/App.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { TabNavigator, TabBarBottom } from 'react-navigation'
-import FastImageExample from './fastImage/FastImageExample'
+import FastImageExamples from './fastImage/FastImageExamples'
 import FastImageGrid from './fastImage/FastImageGrid'
 import DefaultImageGrid from './fastImage/DefaultImageGrid'
 
 const App = TabNavigator(
   {
     fastImageExample: {
-      screen: FastImageExample,
+      screen: FastImageExamples,
     },
     image: {
       screen: DefaultImageGrid,

example/fastImage/BorderRadiusAndChildrenExample.js

@@ -0,0 +1,49 @@
+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 PLUS_IMAGE_URL =
+  'https://cdn3.iconfinder.com/data/icons/block/32/add-512.png'
+
+const BorderRadiusAndChildrenExample = ({ onPressReload, bust }) => (
+  <View>
+    <Section>
+      <FeatureText text="• Border radius + children." />
+    </Section>
+    <SectionFlex onPress={onPressReload}>
+      <FastImage
+        style={styles.image}
+        borderRadius={100}
+        source={{
+          uri: IMAGE_URL + bust,
+        }}
+      >
+        <FastImage style={styles.plus} source={{ uri: PLUS_IMAGE_URL }} />
+      </FastImage>
+    </SectionFlex>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  image: {
+    height: 100,
+    backgroundColor: '#ddd',
+    margin: 20,
+    width: 100,
+    flex: 0,
+  },
+  plus: {
+    width: 30,
+    height: 30,
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
+})
+
+export default withCacheBust(BorderRadiusAndChildrenExample)

example/fastImage/Button.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Text, TouchableOpacity, StyleSheet } from 'react-native'
+
+const Button = ({ text, onPress }) => (
+  <TouchableOpacity onPress={onPress}>
+    <Text style={styles.button}>{text}</Text>
+  </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'black',
+    color: 'white',
+    margin: 5,
+    padding: 5,
+    paddingLeft: 10,
+    paddingRight: 10,
+    borderRadius: 2,
+  },
+})
+
+export default Button