FEATURE: Navigating to DeckDetails

Action to navigate to deck details screen is working
dblsilverio · Jan 23, 2018 · fb9c039 · fb9c039
1 parent 789f6e6
commit fb9c039
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/components/flashcards/DeckDetails.js b/components/flashcards/DeckDetails.js
@@ -1,12 +1,22 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
+
 export default class DeckDetails extends Component {
 
+    static navigationOptions = ({ navigation }) => {
+        const { deckKey } = navigation.state.params;
+
+        return {
+            title: `'${deckKey}' Details`,
+        }
+    }
+
     render() {
+
         return (
             <View>
-                <Text>DeckDetails</Text>
+                <Text>DeckDetails: {this.props.navigation.state.params.deckKey}</Text>
             </View>
         );
     }

diff --git a/components/flashcards/DeckList.js b/components/flashcards/DeckList.js
@@ -37,8 +37,6 @@ class DeckList extends Component {
             routeName
         });
 
-        console.log(navigation);
-
         this.props.navigation.dispatch(navigation);
     }
 
@@ -64,7 +62,7 @@ class DeckList extends Component {
             return (
                 <ScrollView style={styles.container}>
                     {this.props.decks.map((deck) => (
-                        <TouchableOpacity key={deck.name}>
+                        <TouchableOpacity key={deck.name} onPress={() => this.props.screenProps.rootNavigation.navigate('DeckDetails', { deckKey: deck.name })}>
                             <DeckItem deck={deck} />
                         </TouchableOpacity>
                     ))}

diff --git a/components/navigators/FlashTabNavigator.js b/components/navigators/FlashTabNavigator.js
@@ -14,7 +14,7 @@ export default class FlashTabNavigator extends Component {
     }
 
     render() {
-
+        
         const tabBarOptions = {
             inactiveTintColor: COLOR_B_1,
             activeTintColor: COLOR_A_1,
@@ -39,7 +39,7 @@ export default class FlashTabNavigator extends Component {
             });
 
         return (
-            <FlashTab />
+            <FlashTab screenProps={{rootNavigation: this.props.navigation}}  />
         );
     }