dynamic tabs support

app/app.js

@@ -1,59 +1,44 @@
 import React, {Component} from "react";
-import {TabNavigator, StackNavigator} from 'react-navigation';
-import {
-    ACTIVE_BACKGROUND_COLOR,
-    INACTIVE_BACKGROUND_COLOR,
-    ACTIVE_TINT_COLOR,
-    INACTIVE_TINT_COLOR
-} from '@theme/light';
-import MainScreen from '@scene/mainScreen';
-import AboutScreen from '@scene/about';
+import {StackNavigator} from 'react-navigation';
+
 import PostScreen from '@scene/postPage';
 import WebScreen from '@scene/webScreen';
+import {observer} from 'mobx-react/native';
+import CategoryStore from '@store/category';
 
-const tabOptions = {
-    scrollEnabled: true,
-    lazy: true,
-    activeBackgroundColor: ACTIVE_BACKGROUND_COLOR,
-    inactiveBackgroundColor: INACTIVE_BACKGROUND_COLOR,
-    inactiveTintColor: INACTIVE_TINT_COLOR,
-    activeTintColor: ACTIVE_TINT_COLOR,
-    labelStyle: {
-        fontSize: 12,
-        fontFamily: 'SFBold'
-    },
-    tabStyle: {
-        width: 120,
-        height: 40
-    },
-    style: {
-        backgroundColor: ACTIVE_BACKGROUND_COLOR
-    },
-    indicatorStyle: {
-        backgroundColor: ACTIVE_TINT_COLOR
+import {
+    ActivityIndicator,
+    StyleSheet
+} from "react-native";
+
+@observer
+class App extends Component {
+
+    componentWillMount() {
+        let self = this;
+        CategoryStore.navigation = this.props.navigation;
     }
-};
 
-const App = TabNavigator({
-    Tech: {
-        screen: ({navigation}) => <MainScreen navigation={navigation} screenProps={{ category: 'tech'}}/>,
-    },
-    Games: {
-        screen: ({navigation}) => <MainScreen navigation={navigation} screenProps={{ category: 'games'}}/>,
-    },
-    Books: {
-        screen: ({navigation}) => <MainScreen navigation={navigation} screenProps={{ category: 'books'}}/>,
-    },
-    About: {
-        screen: AboutScreen,
+    render() {
+        if (!CategoryStore.isLoading) {
+            return <CategoryStore.tabs />;
+        } else {
+            return (
+                <ActivityIndicator
+                    animating={true}
+                    style={[styles.centering]}
+                    color="black"
+                    size="large"
+                />
+            )
+        }
     }
-}, {
-    tabBarOptions: tabOptions
-});
+
+}
 
 const Stack = StackNavigator({
     Home: {
-        screen: App,
+        screen: ({navigation}) => <App navigation={navigation}/>
     },
     Post: {
         path: 'post/:id',
@@ -69,4 +54,12 @@ const Stack = StackNavigator({
     }
 });
 
+const styles = StyleSheet.create({
+    centering: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+
 export default Stack;

app/scenes/settings.js

@@ -0,0 +1,71 @@
+import React, {Component} from 'react';
+import {
+    View,
+    Text,
+    StyleSheet
+} from 'react-native';
+import analytics from '@store/analytics';
+import SelectMultiple from 'react-native-select-multiple'
+
+import {observer} from 'mobx-react/native';
+import  {toJS} from 'mobx';
+import CategoryStore from '@store/category';
+
+const categories = ['tech', 'games', 'books'];
+
+@observer
+class Screen extends Component {
+
+    static navigationOptions = {
+        tabBarLabel: 'Settings'
+    };
+
+    componentDidMount() {
+        analytics.logEvent("View Settings Page");
+    }
+
+    onSelectionsChange = (selected) => {
+        let categories = [];
+        selected.forEach(function (category) {
+            categories.push(category.value);
+        });
+        CategoryStore.update(categories);
+    }
+
+    render() {
+        let selected = [].concat(toJS(CategoryStore.categories));
+        return (
+            <View style={styles.mainContainer}>
+                <Text style={styles.title}>Add Topics</Text>
+                <SelectMultiple
+                    items={categories}
+                    selectedItems={selected}
+                    labelStyle={styles.button_text}
+                    onSelectionsChange={this.onSelectionsChange}/>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        flex: 1,
+        padding: 15,
+        borderTopWidth: 1,
+        borderTopColor: '#e3e3e3',
+        backgroundColor: "white"
+    },
+    button_text: {
+        marginLeft: 10,
+        color: '#3F51B5',
+        fontSize: 15,
+        fontFamily: "SFRegular"
+    },
+    title: {
+        fontSize: 30,
+        color: "#1a1a1a",
+        fontFamily: "SFBold"
+    }
+});
+
+export default Screen

app/stores/category.js

@@ -0,0 +1,94 @@
+import React, {Component} from "react";
+import {observable} from "mobx";
+import {TabNavigator} from 'react-navigation';
+import {
+    AsyncStorage
+} from "react-native";
+
+import {
+    ACTIVE_BACKGROUND_COLOR,
+    INACTIVE_BACKGROUND_COLOR,
+    ACTIVE_TINT_COLOR,
+    INACTIVE_TINT_COLOR
+} from '@theme/light';
+import MainScreen from '@scene/mainScreen';
+import AboutScreen from '@scene/about';
+import ManageScreen from '@scene/settings';
+
+const tabOptions = {
+    scrollEnabled: true,
+    lazy: true,
+    activeBackgroundColor: ACTIVE_BACKGROUND_COLOR,
+    inactiveBackgroundColor: INACTIVE_BACKGROUND_COLOR,
+    inactiveTintColor: INACTIVE_TINT_COLOR,
+    activeTintColor: ACTIVE_TINT_COLOR,
+    labelStyle: {
+        fontSize: 12,
+        fontFamily: 'SFBold'
+    },
+    tabStyle: {
+        width: 120,
+        height: 40
+    },
+    style: {
+        backgroundColor: ACTIVE_BACKGROUND_COLOR
+    },
+    indicatorStyle: {
+        backgroundColor: ACTIVE_TINT_COLOR
+    }
+};
+
+class Store {
+
+    navigation = {};
+    @observable isLoading = true;
+    @observable categories = [];
+    @observable tabs = {};
+
+    constructor() {
+        let self = this;
+        const screens = {};
+
+        AsyncStorage
+            .getItem('categories')
+            .then((categories) => {
+                if (categories) {
+                    self.categories = JSON.parse(categories);
+                } else {
+                    self.categories = ['tech', 'games'];
+                }
+                self.categories.forEach((category, i) => {
+                    screens[self.categories[i]] = {
+                        screen: () => <MainScreen navigation={self.navigation} screenProps={{category: category}}/>
+                    };
+                });
+                screens['settings'] = {screen: ManageScreen};
+                screens['about'] = {screen: AboutScreen};
+                self.tabs = TabNavigator(screens, {tabBarOptions: tabOptions});
+                self.isLoading = false;
+            });
+    }
+
+    update(categories) {
+        let self = this;
+        this.isLoading = true;
+        this.categories = categories;
+        const screens = {};
+        this.categories.forEach((category, i) => {
+            screens[this.categories[i]] = {
+                screen: () => <MainScreen screenProps={{category: category}}/>
+            };
+        });
+        screens['settings'] = {screen: ManageScreen};
+        screens['about'] = {screen: AboutScreen};
+        this.tabs = TabNavigator(screens, {tabBarOptions: tabOptions});
+        AsyncStorage
+            .setItem('categories', JSON.stringify(categories))
+            .then(() => {
+                self.isLoading = false;
+            })
+    }
+
+}
+
+export default store = new Store

package.json

@@ -17,6 +17,7 @@
     "react-native-fabric": "^0.4.1",
     "react-native-fast-image": "^0.0.10",
     "react-native-parsed-text": "^0.0.18",
+    "react-native-select-multiple": "^1.0.4",
     "react-native-vector-icons": "^4.2.0",
     "react-navigation": "^1.0.0-beta.11"
   },

yarn.lock

@@ -3006,6 +3006,10 @@ react-native-parsed-text@^0.0.18:
   version "0.0.18"
   resolved "https://registry.yarnpkg.com/react-native-parsed-text/-/react-native-parsed-text-0.0.18.tgz#b528eb6f1410f552d2e3fd8d80da7ff0a7890c71"
 
+react-native-select-multiple@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-native-select-multiple/-/react-native-select-multiple-1.0.4.tgz#05510e152631fd6dc1930b8605f66340f7c9c5b1"
+
 react-native-tab-view@^0.0.65:
   version "0.0.65"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.65.tgz#b685ea3081ff7c96486cd997361026c407302c59"