Updated collection screen to allow scrolling & add shadows to species…

… grid

components/YourCollection.js

@@ -3,6 +3,7 @@
 import React, { Component } from "react";
 import {
   FlatList,
+  ScrollView,
   Alert,
   Image,
   TouchableOpacity,
@@ -61,105 +62,107 @@ class YourCollection extends Component {
 
     return (
       <View style={styles.container}>
-        <View style={styles.badges}>
-          <View style={styles.header}>
-            <Text style={styles.headerText}>Recent Badges</Text>
-            <TouchableOpacity
-              style={styles.button}
-              onPress={() => navigation.navigate( "Badges" )}
-            >
-              <Text style={styles.text}>
-                View All
-              </Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.taxonGrid}>
-            <FlatList
-              data={ badges }
-              keyExtractor={ badge => badge.name }
-              scrollEnabled={false}
-              numColumns={ 3 }
-              renderItem={ ( { item } ) => {
-                let badgeIcon;
-                let msg = item.infoText;
-                if ( item.earned ) {
-                  msg = `${msg} You earned this badge.`;
-                  badgeIcon = badgeImages[item.earnedIconName];
-                } else {
-                  badgeIcon = badgeImages[item.unearnedIconName];
+        <ScrollView>
+          <View style={styles.badges}>
+            <View style={styles.header}>
+              <Text style={styles.headerText}>Recent Badges</Text>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={() => navigation.navigate( "Badges" )}
+              >
+                <Text style={styles.text}>
+                  View All
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.taxonGrid}>
+              <FlatList
+                data={ badges }
+                scrollEnabled={false}
+                keyExtractor={ badge => badge.name }
+                numColumns={ 3 }
+                renderItem={ ( { item } ) => {
+                  let badgeIcon;
+                  let msg = item.infoText;
+                  if ( item.earned ) {
+                    msg = `${msg} You earned this badge.`;
+                    badgeIcon = badgeImages[item.earnedIconName];
+                  } else {
+                    badgeIcon = badgeImages[item.unearnedIconName];
+                  }
+                  return (
+                    <View style={ styles.gridCell }>
+                      <TouchableOpacity
+                        onPress={ () => Alert.alert(
+                          item.name,
+                          msg,
+                          [
+                            {
+                              text: "Got it!"
+                            }
+                          ],
+                          { cancelable: false }
+                        )}
+                      >
+                        <View style={ styles.badgeCellContents }>
+                          <Image
+                            source={badgeIcon}
+                            style={styles.badgeIcon}
+                          />
+                          <View style={ styles.badgeTitle }>
+                            <Text style={ styles.cellTitleText }>
+                              {item.name}
+                            </Text>
+                          </View>
+                        </View>
+                      </TouchableOpacity>
+                    </View>
+                  );
                 }
-                return (
+              }
+              />
+            </View>
+          </View>
+          <View style={styles.species}>
+            <Text style={styles.headerText}>Species You&#39;ve Seen ({observations.length})</Text>
+            <View style={styles.taxonGrid}>
+              <FlatList
+                data={ observations }
+                scrollEnabled={false}
+                keyExtractor={ t => t.taxon.id }
+                numColumns={ 3 }
+                renderItem={ ( { item } ) => (
                   <View style={ styles.gridCell }>
                     <TouchableOpacity
-                      onPress={ () => Alert.alert(
-                        item.name,
-                        msg,
-                        [
-                          {
-                            text: "Got it!"
-                          }
-                        ],
-                        { cancelable: false }
-                      )}
+                      onPress={ () => navigation.navigate( "Species", {
+                        id: item.taxon.id,
+                        latitude: item.latitude,
+                        longitude: item.longitude,
+                        location: item.placeName,
+                        seen: true
+                      } )}
                     >
                       <View style={ styles.gridCellContents }>
                         <Image
-                          source={badgeIcon}
-                          style={styles.badgeIcon}
+                          style={ {
+                            width: "100%",
+                            aspectRatio: 1.1
+                          } }
+                          source={ { uri: item.taxon.defaultPhoto.mediumUrl } }
                         />
-                        <View style={ styles.badgeTitle }>
-                          <Text style={ styles.cellTitleText }>
-                            {item.name}
+                        <View style={ styles.cellTitle }>
+                          <Text style={ styles.cellTitleText } numberOfLines={2}>
+                            { item.taxon.preferredCommonName || item.taxon.name }
                           </Text>
                         </View>
                       </View>
                     </TouchableOpacity>
                   </View>
-                );
-              }
-            }
-            />
-          </View>
-        </View>
-        <View style={styles.species}>
-          <Text style={styles.headerText}>Species You&#39;ve Seen ({observations.length})</Text>
-          <View style={styles.taxonGrid}>
-            <FlatList
-              data={ observations }
-              scrollEnabled={false}
-              keyExtractor={ t => t.taxon.id }
-              numColumns={ 3 }
-              renderItem={ ( { item } ) => (
-                <View style={ styles.gridCell }>
-                  <TouchableOpacity
-                    onPress={ () => navigation.navigate( "Species", {
-                      id: item.taxon.id,
-                      latitude: item.latitude,
-                      longitude: item.longitude,
-                      location: item.placeName,
-                      seen: true
-                    } )}
-                  >
-                    <View style={ styles.gridCellContents }>
-                      <Image
-                        style={ {
-                          width: "100%",
-                          aspectRatio: 1.1
-                        } }
-                        source={ { uri: item.taxon.defaultPhoto.mediumUrl } }
-                      />
-                      <View style={ styles.cellTitle }>
-                        <Text style={ styles.cellTitleText }>
-                          { item.taxon.preferredCommonName || item.taxon.name }
-                        </Text>
-                      </View>
-                    </View>
-                  </TouchableOpacity>
-                </View>
-              ) }
-            />
+                ) }
+              />
+            </View>
           </View>
-        </View>
+        </ScrollView>
       </View>
     );
   }

styles/collection.js

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import {
   colors,
   fonts,
@@ -7,8 +7,6 @@ import {
   padding
 } from "./global";
 
-const { width } = Dimensions.get( "screen" );
-
 export default StyleSheet.create( {
   container: {
     flex: 1
@@ -25,41 +23,54 @@ export default StyleSheet.create( {
     fontSize: fontSize.buttonText,
     fontFamily: fonts.book,
     alignItems: "flex-start",
-    marginLeft: margins.medium
+    marginLeft: margins.medium,
+    marginTop: margins.medium
   },
   button: {
+    marginTop: margins.medium,
     position: "absolute",
     right: 0,
     paddingRight: padding.large
   },
   text: {
-    fontSize: fontSize.text
+    fontSize: fontSize.text,
+    fontFamily: fonts.default
   },
   species: {
     flex: 3,
-    backgroundColor: colors.white
+    backgroundColor: colors.white,
+    paddingBottom: padding.medium
   },
   taxonGrid: {
-    flex: 4,
+    flex: 1,
     alignItems: "center",
-    justifyContent: "center",
-    marginBottom: margins.medium
+    justifyContent: "center"
   },
   badgeIcon: {
     width: 70,
     height: 70,
     alignSelf: "center"
   },
+  badgeCellContents: {
+    borderRadius: 5,
+    overflow: "hidden"
+  },
   gridCell: {
-    width: width / 3 - 3,
-    height: width / 3 - 3,
+    width: 105,
+    height: 138,
     paddingHorizontal: padding.medium,
-    marginTop: margins.medium,
-    marginBottom: margins.small
+    marginTop: margins.medium
   },
   gridCellContents: {
     borderRadius: 5,
-    overflow: "hidden"
+    elevation: 2,
+    shadowOpacity: 0.3,
+    shadowColor: colors.darkGray,
+    shadowRadius: 3,
+    shadowOffset: {
+      height: 2,
+      width: 0
+    }
   },
   badgeTitle: {
     height: 45,