Fix example margins and add labels to resizeMode example.

Author: DylanVann

ReactNativeFastImageExample/src/Button.js

@@ -12,7 +12,7 @@ const Button = ({ text, onPress }) => (
 const styles = StyleSheet.create({
     button: {
         backgroundColor: 'black',
-        margin: 5,
+        margin: 10,
         height: 44,
         paddingLeft: 10,
         paddingRight: 10,

ReactNativeFastImageExample/src/GifExample.js

@@ -23,7 +23,7 @@ const GifExample = ({ onPressReload, bust }) => (
 const styles = StyleSheet.create({
     image: {
         backgroundColor: '#ddd',
-        margin: 10,
+        margin: 20,
         height: 100,
         width: 100,
         flex: 0,

ReactNativeFastImageExample/src/PreloadExample.js

@@ -57,9 +57,7 @@ class PreloadExample extends Component {
                     ) : (
                         <View style={styles.image} />
                     )}
-                    <View
-                        style={{ flexDirection: 'row', marginHorizontal: 10 }}
-                    >
+                    <View style={styles.buttons}>
                         <View style={{ flex: 1 }}>
                             <Button text="Bust" onPress={this.bustCache} />
                         </View>
@@ -81,9 +79,15 @@ const styles = StyleSheet.create({
         flexDirection: 'column',
         alignItems: 'center',
     },
+    buttons: {
+        flexDirection: 'row',
+        marginHorizontal: 20,
+        marginBottom: 10,
+    },
     image: {
         backgroundColor: '#ddd',
-        margin: 10,
+        margin: 20,
+        marginBottom: 10,
         height: 100,
         width: 100,
     },

ReactNativeFastImageExample/src/PriorityExample.js

@@ -53,6 +53,7 @@ const styles = StyleSheet.create({
         height: 100,
         backgroundColor: '#ddd',
         margin: 10,
+        marginVertical: 20,
     },
 })
 

ReactNativeFastImageExample/src/ResizeModeExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, Text } from 'react-native'
 import withCacheBust from './withCacheBust'
 import SectionFlex from './SectionFlex'
 import FastImage from 'react-native-fast-image'
@@ -8,32 +8,46 @@ import FeatureText from './FeatureText'
 
 const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
 
+const Label = ({ children }) => <Text style={styles.text}>{children}</Text>
+
 const BorderRadiusExample = ({ onPressReload, bust }) => (
     <View>
         <Section>
             <FeatureText text="• resizeMode." />
         </Section>
         <SectionFlex onPress={onPressReload}>
-            <FastImage
-                style={styles.image}
-                resizeMode={FastImage.resizeMode.contain}
-                source={{ uri: IMAGE_URL }}
-            />
-            <FastImage
-                style={styles.image}
-                resizeMode={FastImage.resizeMode.center}
-                source={{ uri: IMAGE_URL }}
-            />
-            <FastImage
-                style={styles.image}
-                resizeMode={FastImage.resizeMode.stretch}
-                source={{ uri: IMAGE_URL }}
-            />
-            <FastImage
-                style={styles.image}
-                resizeMode={FastImage.resizeMode.cover}
-                source={{ uri: IMAGE_URL }}
-            />
+            <View>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.contain}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <Label>contain</Label>
+            </View>
+            <View>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.center}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <Label>center</Label>
+            </View>
+            <View>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.stretch}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <Label>stretch</Label>
+            </View>
+            <View>
+                <FastImage
+                    style={styles.image}
+                    resizeMode={FastImage.resizeMode.cover}
+                    source={{ uri: IMAGE_URL }}
+                />
+                <Label>cover</Label>
+            </View>
         </SectionFlex>
     </View>
 )
@@ -43,9 +57,14 @@ const styles = StyleSheet.create({
         height: 100,
         width: 50,
         backgroundColor: '#ddd',
-        margin: 5,
+        margin: 20,
+        marginBottom: 10,
         flex: 0,
     },
+    text: {
+        textAlign: 'center',
+        marginBottom: 20,
+    },
 })
 
 export default withCacheBust(BorderRadiusExample)