💻 implement navigation using react-native-stack

Author: QuickStyles

App.js

@@ -1,10 +1,16 @@
+import 'react-native-gesture-handler'
 import React, {useEffect, useState}  from 'react';
 import { StyleSheet, View } from 'react-native'; // React Native API Reference -> https://facebook.github.io/react-native/docs/activityindicator
-import { Header, ScrollableList } from './components'
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import { Header, ScrollableList, PokemonDetail } from './components'
 
 const POKEMON_API = `https://pokeapi.co/api/v2/`
 const GET_50_POKEMON_PATH = `pokemon?limit=50`
 
+const Stack = createStackNavigator();
+
 export default function App() {
   const [pokemonList, setPokemonList] = useState([])
   // on componentDidMount grab list of pokemon and set the state to the list
@@ -18,10 +24,26 @@ export default function App() {
   }, [])
   console.log(pokemonList)
   return (
-    <View style={styles.container}>
-      <Header/>
-      <ScrollableList list={pokemonList}/>
-    </View>
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Index"
+          component={({navigation}) => { // Stack.Screen will inject a navigation prop to child components
+            return(
+              <View style={styles.container}>
+                <Header/>
+                <ScrollableList list={pokemonList} navigation={navigation}/>
+              </View>
+            )
+          }}
+          options={{title: 'Pokédex'}}
+        />
+        <Stack.Screen 
+          name="Pokemon Detail"
+          component={PokemonDetail}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 

components/PokemonDetail/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export default function PokemonDetail() {
+  return(
+    <View>
+      <Text>Hello</Text>
+    </View>
+  )
+}

components/ScrollableList/index.js

@@ -1,14 +1,14 @@
 import React from 'react'
 
 import { StyleSheet, SafeAreaView, ScrollView, Text, TouchableHighlight } from 'react-native'
-export default function ScrollableList({list}) {
+export default function ScrollableList({list, navigation}) {
   return(
     <SafeAreaView style={styles.container}>
       <ScrollView>
         {
           list.map((pokemon, i) => (
             <TouchableHighlight
-              onPress={() => console.log('pressed')}
+              onPress={() => navigation.navigate('Pokemon Detail', {pokemon})}
               key={i} 
               style={styles.listItem}>
               <Text style={styles.listItemText}>

components/index.js

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