💻 render list of pokemon

Author: QuickStyles

App.js

@@ -1,11 +1,30 @@
-import React from 'react';
+import React, {useEffect, useState}  from 'react';
 import { StyleSheet, Text, View } from 'react-native'; // React Native API Reference -> https://facebook.github.io/react-native/docs/activityindicator
 import { Header } from './components'
 
+const POKEMON_API = `https://pokeapi.co/api/v2/`
+const GET_50_POKEMON_PATH = `pokemon?limit=50`
+
 export default function App() {
+  const [pokemonList, setPokemonList] = useState([])
+  // on componentDidMount grab list of pokemon and set the state to the list
+  useEffect(() => {
+    fetch(`${POKEMON_API}${GET_50_POKEMON_PATH}`)
+      .then(res => res.json())
+      .then(payload => {
+        setPokemonList(payload.results)
+      })
+      .catch(e => console.log(e))
+  }, [])
+  console.log(pokemonList)
   return (
     <View style={styles.container}>
       <Header/>
+      <View style={styles.pokemonList}>
+        {
+          pokemonList.map(pokemon => <View style={styles.listItem}><Text style={styles.listItemText}>{pokemon.name}</Text></View>)
+        }
+      </View>
     </View>
   );
 }
@@ -16,6 +35,21 @@ const styles = StyleSheet.create({
     backgroundColor: '#f0f0f0',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    flexDirection: 'row'
+    flexDirection: 'column'
+  },
+  pokemonList: {
+    flex: 1,
+    flexDirection: 'column',
+    width: '100%',
+  },
+  listItem: {
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'black',
   },
+  listItemText: {
+    fontSize: 20,
+  }
 });

components/Header/index.js

@@ -7,7 +7,7 @@ export default function Header() {
 
 const styles = StyleSheet.create({
   header: {
-    flex: 1,
+    width: '100%',
     backgroundColor: '#ee1515',
     alignItems: 'center',
     justifyContent: 'center',