Merge pull request #5 from ck3g/flat-list

How to use ScrollView and FlatList
ck3g · Dec 9, 2018 · 12a7b90 · 12a7b90
2 parents 0023a8a + 6f24360
commit 12a7b90
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/App.js b/App.js
@@ -29,23 +29,23 @@ const AppNavigator = createBottomTabNavigator(
     Home: {
       screen: HomeNavigator,
       navigationOptions: {
-        tabBarIcon: ({tintColor}) =>
-          <Icon name="home" size={25} color={tintColor} />
+        tabBarIcon: ({ horizontal, tintColor }) =>
+          <Icon name="home" size={horizontal ? 20 : 25} color={tintColor} />
       }
     },
     HighScores: {
       screen: HighScoresScreen,
       navigationOptions: {
         tabBarLabel: 'High Scores',
-        tabBarIcon: ({tintColor}) =>
-          <Icon name="chart-bar" size={25} color={tintColor} />
+        tabBarIcon: ({ horizontal, tintColor }) =>
+          <Icon name="chart-bar" size={horizontal ? 20 : 25} color={tintColor} />
       }
     },
     Settings: {
       screen: SettingsScreen,
       navigationOptions: {
-        tabBarIcon: ({tintColor}) =>
-          <Icon name="cogs" size={25} color={tintColor} />
+        tabBarIcon: ({ horizontal, tintColor }) =>
+          <Icon name="cogs" size={horizontal ? 20 : 25} color={tintColor} />
       }
     }
   },

diff --git a/src/components/HighScores.js b/src/components/HighScores.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { FlatList, View, Text, StyleSheet } from 'react-native';
 
 const DEFAULT_TOTAL_NUMBER = 10;
 
@@ -34,19 +34,29 @@ export default HighScores = ({ data, totalNumber }) => {
   return (
     <View style={styles.container}>
       <Text style={styles.header}>High Scores</Text>
-      <TableHeader />
-      {
-        highScores.map((highScore, index) =>
-          <Row highScore={highScore} index={index} key={index} />)
-      }
+      <FlatList
+        data={highScores}
+        renderItem={
+          ({ item, index }) =>
+            <Row highScore={item} index={index} key={index} />
+        }
+        keyExtractor={(item, index) => index.toString()}
+        ListEmptyComponent={() =>
+          <Text style={{ textAlign: 'center' }}>
+            There are no High Scores yet!
+          </Text>
+        }
+        ListHeaderComponent={() => highScores.length > 0 && <TableHeader />}
+      />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     width: 300,
-    marginBottom: 15
+    marginBottom: 15,
+    marginTop: 50
   },
   header: {
     textAlign: 'center',