💻 refactor pokemon list

Author: QuickStyles

App.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState}  from 'react';
-import { StyleSheet, Text, View, ScrollView, SafeAreaView } from 'react-native'; // React Native API Reference -> https://facebook.github.io/react-native/docs/activityindicator
-import { Header } from './components'
+import { StyleSheet, View } from 'react-native'; // React Native API Reference -> https://facebook.github.io/react-native/docs/activityindicator
+import { Header, ScrollableList } from './components'
 
 const POKEMON_API = `https://pokeapi.co/api/v2/`
 const GET_50_POKEMON_PATH = `pokemon?limit=50`
@@ -20,13 +20,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Header/>
-      <SafeAreaView style={styles.pokemonList}>
-        <ScrollView>
-          {
-            pokemonList.map(pokemon => <View style={styles.listItem}><Text style={styles.listItemText}>{pokemon.name}</Text></View>)
-          }
-        </ScrollView>
-      </SafeAreaView>
+      <ScrollableList list={pokemonList}/>
     </View>
   );
 }
@@ -38,20 +32,5 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'center',
     flexDirection: 'column'
-  },
-  pokemonList: {
-    flex: 1,
-    flexDirection: 'column',
-    width: '100%',
-  },
-  listItem: {
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: 'black',
-  },
-  listItemText: {
-    fontSize: 20,
   }
 });

components/ScrollableList/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { StyleSheet, SafeAreaView, ScrollView, Text, View } from 'react-native'
+export default function ScrollableList({list}) {
+  return(
+    <SafeAreaView style={styles.container}>
+      <ScrollView>
+        {
+          list.map((pokemon, i) => <View key={i} style={styles.listItem}><Text style={styles.listItemText}>{pokemon.name}</Text></View>)
+        }
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    width: '100%',
+  },
+  listItem: {
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'black',
+  },
+  listItemText: {
+    fontSize: 20,
+  }
+})

components/index.js

@@ -1,4 +1,7 @@
 import Header from './Header'
+import ScrollableList from './ScrollableList'
+
 export {
-  Header
+  Header,
+  ScrollableList
 }