Fix tab navigation

Author: falloutcoder

App.js

@@ -1,24 +1,48 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { TabNavigator } from 'react-navigation';
+import DecksList from './components/DecksList';
+import AddDeck from './components/AddDeck';
+import { getCurrentRouteName } from './utils/helpers';
+
+const DecksNavigator = TabNavigator({
+  AddDeck: {
+    screen: AddDeck,
+    navigationOptions: {
+      tabBarLabel: 'NEW DECK'
+    }
+  },
+  Decks: {
+    screen: DecksList,
+    navigationOptions: {
+      tabBarLabel: 'DECKS'
+    }
+  }
+});
 
 export default class App extends React.Component {
+  state = {};
+
   render() {
     return (
       <View style={styles.container}>
-        <Text>Open up App.js to start working on your app!</Text>
-        <Text>Changes you make will automatically reload.</Text>
-        <Text>Shake your phone to open the developer menu.</Text>
+        <DecksNavigator
+          onNavigationStateChange={(prevState, currentState) => {
+            const currentScreen = getCurrentRouteName(currentState);
+            const prevScreen = getCurrentRouteName(prevState);
+            if (prevScreen !== currentScreen) {
+              this.setState({ DecksNavigator: currentScreen });
+            }
+          }}
+          screenProps={{ currentScreen: this.state.DecksNavigator }}
+        />
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+    flex: 1
+  }
 });

api.js

@@ -4,28 +4,29 @@ const STORAGE_KEY = '@Flashcards:store';
 
 export const getAllDecks = () =>
     AsyncStorage.getItem(STORAGE_KEY)
-        .then(d => d.json())
+        .then(d => JSON.parse(d))
         .catch(err => {
             console.log(err);
-            return null;
+            return [];
         });
 
-export const getDeck = id =>
+export const saveDeckTitle = title =>
     AsyncStorage.getItem(STORAGE_KEY)
-        .then(d => d.json())
-        .then(data => data[id])
+        .then(data => {
+            data = JSON.parse(data);
+            data = data ? data : {};
+            data[title] = { title, questions: [] };
+            return AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+        })
         .catch(err => {
             console.log(err);
             return null;
         });
 
-export const saveDeckTitle = title =>
+export const getDeck = id =>
     AsyncStorage.getItem(STORAGE_KEY)
         .then(d => d.json())
-        .then(data => {
-            data[title] = { title, questions: [] };
-            AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-        })
+        .then(data => data[id])
         .catch(err => {
             console.log(err);
             return null;

components/AddDeck.js

@@ -10,8 +10,10 @@ export default class AddDeck extends React.Component {
     }
 
     onSubmit = () => {
-        saveDeckTitle(this.state.title);
-        this.props.navigation.navigate('DeckList');
+        const title = this.state.title;
+        this.setState({ title: '' }, () =>
+            saveDeckTitle(title).then(() => this.props.navigation.navigate('Decks'))
+        );
     };
 
     render() {
@@ -24,6 +26,7 @@ export default class AddDeck extends React.Component {
                     onChangeText={text => {
                         this.setState({ title: text });
                     }}
+                    value={this.state.title}
                     spellCheck={false}
                     underlineColorAndroid={black}
                 />
@@ -40,23 +43,26 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItem: 'center'
+        alignItems: 'center'
     },
     heading: {
         fontSize: 22,
-        fontWeight: 'bold'
+        fontWeight: 'bold',
+        width: '60%',
+        textAlign: 'center',
+        marginBottom: 20
     },
     submitBtn: {
         backgroundColor: black,
         color: white,
-        fontWeight: 'bold'
+        fontWeight: 'bold',
+        padding: 20
     },
     input: {
-        paddingTop: 10,
-        paddingRight: 10,
-        paddingBottom: 10,
-        paddingLeft: 0,
+        padding: 10,
+        margin: 10,
         backgroundColor: white,
-        color: black
+        color: black,
+        width: '80%'
     }
 });

components/DecksList.js

@@ -3,21 +3,26 @@ import { View, Text, StyleSheet, FlatList } from 'react-native';
 import { gray, black } from '../utils/colors';
 import { getAllDecks } from '../api';
 
-export default class DeckList extends React.Component {
+export default class DecksList extends React.Component {
     constructor(props) {
         super(props);
         this.state = { decks: [] };
     }
 
-    componentDidMount() {
-        getAllDecks().then(data => this.setState({ decks: Object.values(data) }));
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.screenProps.currentScreen === 'Decks') {
+            this.loadDecks();
+        }
     }
 
+    loadDecks = () => getAllDecks().then(data => this.setState({ decks: Object.values(data ? data : []) }));
+
     render() {
         return (
             <FlatList
                 style={styles.container}
                 data={this.state.decks}
+                keyExtractor={(item, index) => index}
                 renderItem={({ item }) => <Deck key={item.title} {...item} />}
             />
         );

utils/helpers.js

@@ -0,0 +1,11 @@
+export function getCurrentRouteName(navigationState) {
+	if (!navigationState) {
+		return null;
+	}
+	const route = navigationState.routes[navigationState.index];
+	// dive into nested navigators
+	if (route.routes) {
+		return getCurrentRouteName(route);
+	}
+	return route.routeName;
+}