Add card screen

Author: falloutcoder

App.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
 import { TabNavigator, StackNavigator } from 'react-navigation';
+import { Constants } from 'expo';
 import DecksList from './components/DecksList';
 import DeckDetail from './components/DeckDetail';
+import AddCard from './components/AddCard';
 import AddDeck from './components/AddDeck';
 import { getCurrentRouteName } from './utils/helpers';
 import { black, white } from './utils/colors';
@@ -49,6 +51,9 @@ const MainNavigator = StackNavigator({
   },
   DeckDetail: {
     screen: DeckDetail
+  },
+  AddCard: {
+    screen: AddCard
   }
 });
 
@@ -75,6 +80,7 @@ export default class App extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    paddingTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight
   }
 });

components/AddCard.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 AddCard extends React.Component {
+    static navigationOptions = ({ navigation }) => ({
+        headerTintColor: white,
+        headerStyle: {
+            backgroundColor: black
+        },
+        title: `Add Card for ${navigation.state.params.deckId}`
+    });
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.deckTitle}>Add Card {this.props.navigation.state.params.deckId}</Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    deckTitle: {
+        fontSize: 20
+    }
+});

components/DeckDetail.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { black, white } from '../utils/colors';
 
 export default class DeckDetail extends React.Component {
@@ -12,9 +12,15 @@ export default class DeckDetail extends React.Component {
     });
 
     render() {
+        const id = this.props.navigation.state.params.deckId;
         return (
             <View style={styles.container}>
-                <Text style={styles.deckTitle}>Details - {this.props.navigation.state.params.deckId}</Text>
+                <TouchableOpacity
+                    onPress={() => this.props.navigation.navigate('AddCard', { deckId: id })}
+                >
+                    <Text style={styles.addCardBtn}>Add Card</Text>
+                </TouchableOpacity>
+                <Text style={styles.deckTitle}>Details - {id}</Text>
             </View>
         );
     }
@@ -28,5 +34,11 @@ const styles = StyleSheet.create({
     },
     deckTitle: {
         fontSize: 20
+    },
+    addCardBtn: {
+        backgroundColor: black,
+        color: white,
+        fontWeight: 'bold',
+        padding: 20
     }
 });