Add deck detail navigation screen

Author: falloutcoder

App.js

@@ -1,22 +1,54 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { TabNavigator } from 'react-navigation';
+import { StyleSheet, Text, View, Platform } from 'react-native';
+import { TabNavigator, StackNavigator } from 'react-navigation';
 import DecksList from './components/DecksList';
+import DeckDetail from './components/DeckDetail';
 import AddDeck from './components/AddDeck';
 import { getCurrentRouteName } from './utils/helpers';
+import { black, white } from './utils/colors';
 
-const DecksNavigator = TabNavigator({
-  AddDeck: {
-    screen: AddDeck,
-    navigationOptions: {
-      tabBarLabel: 'NEW DECK'
+const DecksNavigator = TabNavigator(
+  {
+    DecksList: {
+      screen: DecksList,
+      navigationOptions: {
+        tabBarLabel: 'DECKS'
+      }
+    },
+    AddDeck: {
+      screen: AddDeck,
+      navigationOptions: {
+        tabBarLabel: 'NEW DECK'
+      }
     }
   },
-  Decks: {
-    screen: DecksList,
+  {
+    tabBarOptions: {
+      activeTintColor: Platform.OS === 'ios' ? black : white,
+      style: {
+        height: 56,
+        backgroundColor: Platform.OS === 'ios' ? white : black,
+        shadowColor: 'rgba(0, 0, 0, 0.24)',
+        shadowOffset: {
+          width: 0,
+          height: 3
+        },
+        shadowRadius: 6,
+        shadowOpacity: 1
+      }
+    }
+  }
+);
+
+const MainNavigator = StackNavigator({
+  DeckTabs: {
+    screen: DecksNavigator,
     navigationOptions: {
-      tabBarLabel: 'DECKS'
+      header: null
     }
+  },
+  DeckDetail: {
+    screen: DeckDetail
   }
 });
 
@@ -26,7 +58,7 @@ export default class App extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <DecksNavigator
+        <MainNavigator
           onNavigationStateChange={(prevState, currentState) => {
             const currentScreen = getCurrentRouteName(currentState);
             const prevScreen = getCurrentRouteName(prevState);

components/AddDeck.js

@@ -12,7 +12,7 @@ export default class AddDeck extends React.Component {
     onSubmit = () => {
         const title = this.state.title;
         this.setState({ title: '' }, () =>
-            saveDeckTitle(title).then(() => this.props.navigation.navigate('Decks'))
+            saveDeckTitle(title).then(() => this.props.navigation.navigate('DecksList'))
         );
     };
 
@@ -43,7 +43,8 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        backgroundColor: white
     },
     heading: {
         fontSize: 22,

components/DeckDetail.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { black, white } from '../utils/colors';
+
+export default class DeckDetail extends React.Component {
+    static navigationOptions = ({ navigation }) => ({
+        headerTintColor: white,
+        headerStyle: {
+            backgroundColor: black
+        },
+        title: navigation.state.params.deckId
+    });
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.deckTitle}>Details - {this.props.navigation.state.params.deckId}</Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    deckTitle: {
+        fontSize: 20
+    }
+});

components/DecksList.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { View, Text, StyleSheet, FlatList } from 'react-native';
-import { gray, black } from '../utils/colors';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
+import { gray, black, white } from '../utils/colors';
 import { getAllDecks } from '../api';
 
 export default class DecksList extends React.Component {
@@ -9,8 +9,12 @@ export default class DecksList extends React.Component {
         this.state = { decks: [] };
     }
 
+    componentDidMount() {
+        this.loadDecks();
+    }
+
     componentWillReceiveProps(nextProps) {
-        if (nextProps.screenProps.currentScreen === 'Decks') {
+        if (nextProps.screenProps.currentScreen === 'DecksList') {
             this.loadDecks();
         }
     }
@@ -23,17 +27,20 @@ export default class DecksList extends React.Component {
                 style={styles.container}
                 data={this.state.decks}
                 keyExtractor={(item, index) => index}
-                renderItem={({ item }) => <Deck key={item.title} {...item} />}
+                renderItem={({ item }) => <Deck key={item.title} {...item} screenProps={{ ...this.props }} />}
             />
         );
     }
 }
 
 const Deck = props => (
-    <View style={styles.deck}>
+    <TouchableOpacity
+        style={styles.deck}
+        onPress={() => props.screenProps.navigation.navigate('DeckDetail', { deckId: props.title })}
+    >
         <Text style={styles.deckTitle}>{props.title}</Text>
         <Text style={styles.deckCards}>{props.questions.length} Cards</Text>
-    </View>
+    </TouchableOpacity>
 );
 
 const styles = StyleSheet.create({
@@ -44,8 +51,9 @@ const styles = StyleSheet.create({
         height: 100,
         justifyContent: 'center',
         alignItems: 'center',
-        borderBottomWidth: 2,
-        borderBottomColor: black
+        borderBottomWidth: 1,
+        borderBottomColor: gray,
+        backgroundColor: white
     },
     deckTitle: {
         fontSize: 20