4 files changed, 405 insertions, 0 deletions
diff --git a/frontend/app/config/navigation/propTypes.js b/frontend/app/config/navigation/propTypes.js
new file mode 100644
index 0000000..a7c6ffc
--- /dev/null
+++ b/frontend/app/config/navigation/propTypes.js
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const shape = (propShape) => PropTypes.shape(propShape);
+
+const functionTypes = {
+  goBack: PropTypes.func,
+  navigate: PropTypes.func,
+};
+
+const NavigationType = shape({
+  goBack: functionTypes.goBack.isRequired,
+  navigate: functionTypes.navigate.isRequired,
+});
+
+export default NavigationType;
diff --git a/frontend/app/config/navigation/routes.js b/frontend/app/config/navigation/routes.js
new file mode 100644
index 0000000..6a75312
--- /dev/null
+++ b/frontend/app/config/navigation/routes.js
@@ -0,0 +1,269 @@
+import _ from 'lodash';
+import {FontIcons} from '../../assets/icons';
+import * as Screens from '../../screens/index';
+
+export const MainRoutes = [
+    {
+        id: 'LoginMenu',
+        title: 'Auth',
+        icon: FontIcons.login,
+        screen: Screens.LoginMenu,
+        children: [
+            {
+                id: 'Login1',
+                title: 'Login V1',
+                screen: Screens.LoginV1,
+                children: [],
+            },
+            {
+                id: 'Login2',
+                title: 'Login V2',
+                screen: Screens.LoginV2,
+                children: [],
+            },
+            {
+                id: 'SignUp',
+                title: 'Sign Up',
+                screen: Screens.SignUp,
+                children: [],
+            },
+            {
+                id: 'password',
+                title: 'Password Recovery',
+                screen: Screens.PasswordRecovery,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: 'SocialMenu',
+        title: 'Social',
+        icon: FontIcons.profile,
+        screen: Screens.SocialMenu,
+        children: [
+            {
+                id: 'ProfileV1',
+                title: 'User Profile V1',
+                screen: Screens.ProfileV1,
+                children: [],
+            },
+            {
+                id: 'ProfileV2',
+                title: 'User Profile V2',
+                screen: Screens.ProfileV2,
+                children: [],
+            },
+            {
+                id: 'ProfileV3',
+                title: 'User Profile V3',
+                screen: Screens.ProfileV3,
+                children: [],
+            },
+            {
+                id: 'ProfileSettings',
+                title: 'Profile Settings',
+                screen: Screens.ProfileSettings,
+                children: [],
+            },
+            {
+                id: 'Notifications',
+                title: 'Notifications',
+                screen: Screens.Notifications,
+                children: [],
+            },
+            {
+                id: 'Contacts',
+                title: 'Contacts',
+                screen: Screens.Contacts,
+                children: [],
+            },
+            {
+                id: 'Feed',
+                title: 'Feed',
+                screen: Screens.Feed,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: 'ArticlesMenu',
+        title: 'Articles',
+        icon: FontIcons.article,
+        screen: Screens.ArticleMenu,
+        children: [
+            {
+                id: 'Articles1',
+                title: 'Article List V1',
+                screen: Screens.Articles1,
+                children: [],
+            },
+            {
+                id: 'Articles2',
+                title: 'Article List V2',
+                screen: Screens.Articles2,
+                children: [],
+            },
+            {
+                id: 'Articles3',
+                title: 'Article List V3',
+                screen: Screens.Articles3,
+                children: [],
+            },
+            {
+                id: 'Articles4',
+                title: 'Article List V4',
+                screen: Screens.Articles4,
+                children: [],
+            },
+            {
+                id: 'Blogposts',
+                title: 'Blogposts',
+                screen: Screens.Blogposts,
+                children: [],
+            },
+            {
+                id: 'Article',
+                title: 'Article View',
+                screen: Screens.Article,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: 'MessagingMenu',
+        title: 'Messaging',
+        icon: FontIcons.mail,
+        screen: Screens.MessagingMenu,
+        children: [
+            {
+                id: 'Chat',
+                title: 'Chat',
+                screen: Screens.Chat,
+                children: [],
+            },
+            {
+                id: 'ChatList',
+                title: 'Chat List',
+                screen: Screens.ChatList,
+                children: [],
+            },
+            {
+                id: 'Comments',
+                title: 'Comments',
+                screen: Screens.Comments,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: 'DashboardsMenu',
+        title: 'Dashboards',
+        icon: FontIcons.dashboard,
+        screen: Screens.DashboardMenu,
+        children: [{
+            id: 'Dashboard',
+            title: 'Dashboard',
+            screen: Screens.Dashboard,
+            children: [],
+        }],
+    },
+    {
+        id: 'WalkthroughMenu',
+        title: 'Walkthroughs',
+        icon: FontIcons.mobile,
+        screen: Screens.WalkthroughMenu,
+        children: [{
+            id: 'Walkthrough',
+            title: 'Walkthrough',
+            screen: Screens.WalkthroughScreen,
+            children: [],
+        }],
+    },
+    {
+        id: 'EcommerceMenu',
+        title: 'Ecommerce',
+        icon: FontIcons.card,
+        screen: Screens.EcommerceMenu,
+        children: [
+            {
+                id: 'Cards',
+                title: 'Cards',
+                icon: FontIcons.card,
+                screen: Screens.Cards,
+                children: [],
+            },
+            {
+                id: 'AddProblem',
+                title: 'Add Card Form',
+                icon: FontIcons.addToCardForm,
+                screen: Screens.AddToCardForm,
+                children: [],
+            },
+
+        ],
+    },
+    {
+        id: 'NavigationMenu',
+        icon: FontIcons.navigation,
+        title: 'Navigation',
+        screen: Screens.NavigationMenu,
+        children: [
+            {
+                id: 'GridV1',
+                title: 'Grid Menu V1',
+                screen: Screens.GridV1,
+                children: [],
+            },
+            {
+                id: 'GridV2',
+                title: 'Grid Menu V2',
+                screen: Screens.GridV2,
+                children: [],
+            },
+            {
+                id: 'List',
+                title: 'List Menu',
+                screen: Screens.ListMenu,
+                children: [],
+            },
+            {
+                id: 'Side',
+                title: 'Side Menu',
+                action: 'DrawerOpen',
+                screen: Screens.SideMenu,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: 'OtherMenu',
+        title: 'Other',
+        icon: FontIcons.other,
+        screen: Screens.OtherMenu,
+        children: [
+            {
+                id: 'Settings',
+                title: 'Settings',
+                screen: Screens.Settings,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: 'Themes',
+        title: 'Themes',
+        icon: FontIcons.theme,
+        screen: Screens.Themes,
+        children: [],
+    },
+];
+
+const menuRoutes = _.cloneDeep(MainRoutes);
+menuRoutes.unshift({
+    id: 'Walkthrough',
+    title: 'Walkthrough',
+    screen: Screens.WalkthroughScreen,
+    children: [],
+});
+
+export const MenuRoutes = menuRoutes;
diff --git a/frontend/app/config/navigation/routesBuilder.js b/frontend/app/config/navigation/routesBuilder.js
new file mode 100644
index 0000000..157a958
--- /dev/null
+++ b/frontend/app/config/navigation/routesBuilder.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import _ from 'lodash';
+import { createStackNavigator } from 'react-navigation';
+import { withRkTheme } from 'react-native-ui-kitten';
+import { NavBar } from '../../components/index';
+import transition from './transitions';
+import {
+  MainRoutes,
+  MenuRoutes,
+} from './routes';
+
+const main = {};
+const flatRoutes = {};
+
+const routeMapping = (route) => ({
+  screen: withRkTheme(route.screen),
+  title: route.title,
+});
+
+(MenuRoutes).forEach(route => {
+  flatRoutes[route.id] = routeMapping(route);
+  main[route.id] = routeMapping(route);
+  route.children.forEach(nestedRoute => {
+    flatRoutes[nestedRoute.id] = routeMapping(nestedRoute);
+  });
+});
+
+const renderHeader = (navigation, props) => {
+  const ThemedNavigationBar = withRkTheme(NavBar);
+  return (
+    <ThemedNavigationBar navigation={navigation} headerProps={props} />
+  );
+};
+
+const DrawerRoutes = Object.keys(main).reduce((routes, name) => {
+  const rawRoutes = routes;
+  rawRoutes[name] = {
+    name,
+    screen: createStackNavigator(flatRoutes, {
+      initialRouteName: name,
+      headerMode: 'screen',
+      cardStyle: { backgroundColor: 'transparent' },
+      transitionConfig: transition,
+      navigationOptions: ({ navigation }) => ({
+        gesturesEnabled: false,
+        header: (props) => renderHeader(navigation, props),
+      }),
+    }),
+  };
+  return rawRoutes;
+}, {});
+
+export const AppRoutes = DrawerRoutes;
+export const LoginRoutes = _.find(MainRoutes, { id: 'LoginMenu' }).children;
+export const NavigationRoutes = _.find(MainRoutes, { id: 'NavigationMenu' }).children;
+export const SocialRoutes = _.find(MainRoutes, { id: 'SocialMenu' }).children;
+export const ArticleRoutes = _.find(MainRoutes, { id: 'ArticlesMenu' }).children;
+export const MessagingRoutes = _.find(MainRoutes, { id: 'MessagingMenu' }).children;
+export const DashboardRoutes = _.find(MainRoutes, { id: 'DashboardsMenu' }).children;
+export const WalkthroughRoutes = _.find(MainRoutes, { id: 'WalkthroughMenu' }).children;
+export const EcommerceRoutes = _.find(MainRoutes, { id: 'EcommerceMenu' }).children;
+export const OtherRoutes = _.find(MainRoutes, { id: 'OtherMenu' }).children;
diff --git a/frontend/app/config/navigation/transitions.js b/frontend/app/config/navigation/transitions.js
new file mode 100644
index 0000000..ff3d2fa
--- /dev/null
+++ b/frontend/app/config/navigation/transitions.js
@@ -0,0 +1,59 @@
+import {
+  Dimensions,
+  Platform,
+} from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+const IosTransition = (index, position) => {
+  const inputRange = [index - 1, index, index + 0.99, index + 1];
+  const outputRange = [width, 0, -10, -10];
+
+  const translateY = 0;
+  const translateX = position.interpolate({
+    inputRange,
+    outputRange,
+  });
+
+  const opacity = position.interpolate({
+    inputRange,
+    outputRange: [0, 1, 1, 0],
+  });
+  return {
+    opacity,
+    transform: [{ translateX }, { translateY }],
+  };
+};
+
+const DroidTransition = (index, position) => {
+  const inputRange = [index - 1, index, index + 0.99, index + 1];
+
+  const opacity = position.interpolate({
+    inputRange,
+    outputRange: [0, 1, 1, 0],
+  });
+
+  const translateX = 0;
+  const translateY = position.interpolate({
+    inputRange,
+    outputRange: [50, 0, 0, 0],
+  });
+
+  return {
+    opacity,
+    transform: [{ translateX }, { translateY }],
+  };
+};
+
+function transition() {
+  return {
+    screenInterpolator: (sceneProps) => {
+      const { position, scene } = sceneProps;
+      const { index } = scene;
+      if (Platform.OS === 'ios') { return IosTransition(index, position); }
+      return DroidTransition(index, position);
+    },
+  };
+}
+
+export default transition;