9 files changed, 1330 insertions, 0 deletions
diff --git a/frontend/app/config/analytics.js b/frontend/app/config/analytics.js
new file mode 100644
index 0000000..6e48218
--- /dev/null
+++ b/frontend/app/config/analytics.js
@@ -0,0 +1,7 @@
+import { Analytics, PageHit } from 'expo-analytics';
+
+const analytics = new Analytics('UA-112172761-2');
+
+const track = screen => analytics.hit(new PageHit(screen));
+
+export default track;
diff --git a/frontend/app/config/appConstants.js b/frontend/app/config/appConstants.js
new file mode 100644
index 0000000..a120915
--- /dev/null
+++ b/frontend/app/config/appConstants.js
@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+
+export class UIConstants {
+  static AppbarHeight = Platform.OS === 'ios' ? 44 : 56;
+  static StatusbarHeight = Platform.OS === 'ios' ? 20 : 0;
+  static HeaderHeight = UIConstants.AppbarHeight + UIConstants.StatusbarHeight;
+}
diff --git a/frontend/app/config/bootstrap.js b/frontend/app/config/bootstrap.js
new file mode 100644
index 0000000..58fe84f
--- /dev/null
+++ b/frontend/app/config/bootstrap.js
@@ -0,0 +1,492 @@
+import {
+  StatusBar,
+  StyleSheet,
+} from 'react-native';
+import { RkTheme } from 'react-native-ui-kitten';
+import { KittenTheme } from './theme';
+import { AvatarTypes } from '../components/avatar/types';
+import { GradientButtonTypes } from '../components/gradientButton/types';
+import { SwitchTypes } from '../components/switch/types';
+import { SocialBarTypes } from '../components/socialBar/types';
+import { scale, scaleVertical } from '../utils/scale';
+
+export const bootstrap = () => {
+  RkTheme.setTheme(KittenTheme, null);
+
+  /*
+   RkText types
+   */
+
+  RkTheme.setType('RkText', 'basic', {
+    fontFamily: theme => theme.fonts.family.bold,
+    backgroundColor: 'transparent',
+  });
+
+  RkTheme.setType('RkText', 'regular', {
+    fontFamily: theme => theme.fonts.family.regular,
+  });
+
+  RkTheme.setType('RkText', 'light', {
+    fontFamily: theme => theme.fonts.family.light,
+  });
+
+  RkTheme.setType('RkText', 'logo', {
+    fontFamily: theme => theme.fonts.family.logo,
+  });
+
+  RkTheme.setType('RkText', 'moon', {
+    fontFamily: 'icomoon',
+  });
+
+  RkTheme.setType('RkText', 'awesome', {
+    fontFamily: 'fontawesome',
+  });
+
+  RkTheme.setType('RkText', 'hero', {
+    fontSize: scale(33),
+  });
+
+  RkTheme.setType('RkText', 'menuIcon', {
+    fontSize: 44,
+  });
+
+  // all font sizes
+  Object.keys(RkTheme.current.fonts.sizes).forEach(key => {
+    RkTheme.setType('RkText', key, {
+      fontSize: theme => theme.fonts.sizes[key],
+    });
+  });
+
+  // all text colors
+  Object.keys(RkTheme.current.colors.text).forEach(key => {
+    RkTheme.setType('RkText', `${key}Color`, {
+      color: theme => theme.colors.text[key],
+    });
+  });
+
+  // all text line heights
+  Object.keys(RkTheme.current.fonts.lineHeights).forEach(key => {
+    RkTheme.setType('RkText', `${key}Line`, {
+      text: { lineHeight: theme => theme.fonts.lineHeights[key] },
+    });
+  });
+
+  // theme text styles
+  RkTheme.setType('RkText', 'header1', {
+    fontSize: theme => theme.fonts.sizes.h1,
+    fontFamily: theme => theme.fonts.family.bold,
+  });
+  RkTheme.setType('RkText', 'header2', {
+    fontSize: theme => theme.fonts.sizes.h2,
+    fontFamily: theme => theme.fonts.family.bold,
+  });
+  RkTheme.setType('RkText', 'header3', {
+    fontSize: theme => theme.fonts.sizes.h3,
+    fontFamily: theme => theme.fonts.family.bold,
+  });
+  RkTheme.setType('RkText', 'header4', {
+    fontSize: theme => theme.fonts.sizes.h4,
+    fontFamily: theme => theme.fonts.family.bold,
+  });
+  RkTheme.setType('RkText', 'header5', {
+    fontSize: theme => theme.fonts.sizes.h5,
+    fontFamily: theme => theme.fonts.family.bold,
+  });
+  RkTheme.setType('RkText', 'header6', {
+    fontSize: theme => theme.fonts.sizes.h6,
+    fontFamily: theme => theme.fonts.family.bold,
+  });
+  RkTheme.setType('RkText', 'secondary1', {
+    fontSize: theme => theme.fonts.sizes.s1,
+    fontFamily: theme => theme.fonts.family.light,
+  });
+  RkTheme.setType('RkText', 'secondary2', {
+    fontSize: theme => theme.fonts.sizes.s2,
+    fontFamily: theme => theme.fonts.family.light,
+  });
+  RkTheme.setType('RkText', 'secondary3', {
+    fontSize: theme => theme.fonts.sizes.s3,
+    fontFamily: theme => theme.fonts.family.regular,
+  });
+  RkTheme.setType('RkText', 'secondary4', {
+    fontSize: theme => theme.fonts.sizes.s4,
+    fontFamily: theme => theme.fonts.family.regular,
+  });
+  RkTheme.setType('RkText', 'secondary5', {
+    fontSize: theme => theme.fonts.sizes.s5,
+    fontFamily: theme => theme.fonts.family.light,
+  });
+  RkTheme.setType('RkText', 'secondary6', {
+    fontSize: theme => theme.fonts.sizes.s6,
+    fontFamily: theme => theme.fonts.family.light,
+  });
+  RkTheme.setType('RkText', 'secondary7', {
+    fontSize: theme => theme.fonts.sizes.s7,
+    fontFamily: theme => theme.fonts.family.regular,
+  });
+  RkTheme.setType('RkText', 'primary1', {
+    fontSize: theme => theme.fonts.sizes.p1,
+    fontFamily: theme => theme.fonts.family.light,
+  });
+  RkTheme.setType('RkText', 'primary2', {
+    fontSize: theme => theme.fonts.sizes.p2,
+    fontFamily: theme => theme.fonts.family.regular,
+  });
+  RkTheme.setType('RkText', 'primary3', {
+    fontSize: theme => theme.fonts.sizes.p3,
+    fontFamily: theme => theme.fonts.family.light,
+  });
+  RkTheme.setType('RkText', 'primary4', {
+    fontSize: theme => theme.fonts.sizes.p4,
+    fontFamily: theme => theme.fonts.family.regular,
+  });
+
+  RkTheme.setType('RkText', 'center', {
+    text: {
+      textAlign: 'center',
+    },
+  });
+
+  RkTheme.setType('RkText', 'chat', {
+    color: theme => theme.colors.chat.text,
+  });
+  /*
+   RkButton types
+   */
+
+  RkTheme.setType('RkButton', 'basic', {
+    container: {
+      alignSelf: 'auto',
+    },
+  });
+
+  RkTheme.setType('RkButton', 'square', {
+    borderRadius: 3,
+    backgroundColor: theme => theme.colors.button.back,
+    container: {
+      flexDirection: 'column',
+      margin: 8,
+    },
+  });
+
+  RkTheme.setType('RkButton', 'tile', {
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    borderWidth: 0.5,
+    borderColor: theme => theme.colors.border.base,
+    container: {
+      flexDirection: 'column',
+    },
+  });
+
+  RkTheme.setType('RkButton', 'link', {
+    color: theme => theme.colors.primary,
+  });
+
+  RkTheme.setType('RkButton', 'contrast', {
+    color: theme => theme.colors.text.base,
+  });
+
+  RkTheme.setType('RkButton', 'icon', {
+    height: scale(56),
+    width: scale(56),
+    borderColor: theme => theme.colors.border.base,
+    backgroundColor: theme => theme.colors.control.background,
+    borderWidth: 1,
+  });
+
+  RkTheme.setType('RkButton', 'highlight', {
+    backgroundColor: theme => theme.colors.button.highlight,
+  });
+
+  RkTheme.setType('RkButton', 'social', {
+    height: scale(62),
+    width: scale(62),
+    borderRadius: scale(31),
+    borderColor: theme => theme.colors.border.accent,
+    borderWidth: 1,
+    backgroundColor: theme => theme.colors.control.background,
+  });
+  /*
+   RkModalImg types
+   */
+
+  RkTheme.setType('RkModalImg', 'basic', {
+    img: {
+      margin: 1.5,
+    },
+    modal: {
+      backgroundColor: theme => theme.colors.screen.base,
+    },
+    footer: {
+      backgroundColor: theme => theme.colors.screen.base,
+      height: 50,
+    },
+    header: {
+      backgroundColor: theme => theme.colors.screen.base,
+      paddingBottom: 6,
+    },
+  });
+
+  /*
+   RkTextInput
+   */
+
+  RkTheme.setType('RkTextInput', 'basic', {
+    input: {
+      fontFamily: theme => theme.fonts.family.bold,
+    },
+    color: theme => theme.colors.text.base,
+    backgroundColor: theme => theme.colors.control.background,
+    labelColor: theme => theme.colors.input.label,
+    placeholderTextColor: theme => theme.colors.input.placeholder,
+  });
+
+  RkTheme.setType('RkTextInput', 'rounded', {
+    fontSize: theme => theme.fonts.sizes.h6,
+    borderWidth: 1,
+    underlineWidth: 1,
+    placeholderTextColor: theme => theme.colors.input.text,
+    input: {
+      marginVertical: {
+        ios: scaleVertical(15),
+        android: scaleVertical(4),
+      },
+    },
+  });
+
+
+  RkTheme.setType('RkTextInput', 'right', {
+    input: {
+      textAlign: 'right',
+      marginTop: {
+        ios: scaleVertical(18),
+        android: scaleVertical(11),
+      },
+    },
+    label: {
+      fontFamily: theme => theme.fonts.family.light,
+    },
+    container: {
+      marginVertical: 4,
+    },
+    backgroundColor: 'transparent',
+    labelFontSize: theme => theme.fonts.sizes.small,
+  });
+
+  RkTheme.setType('RkTextInput', 'row', {
+    input: {
+      marginVertical: 0,
+      marginHorizontal: 0,
+      marginTop: 0,
+      paddingTop: {
+        ios: 2,
+        android: 0,
+      },
+      paddingBottom: 0,
+      textAlignVertical: 'center',
+      includeFontPadding: false,
+      fontFamily: theme => theme.fonts.family.light,
+      fontSize: theme => theme.fonts.sizes.small,
+    },
+    container: {
+      flex: 1,
+      backgroundColor: theme => theme.colors.input.background,
+      marginVertical: 0,
+      borderRadius: 20,
+      paddingHorizontal: 16,
+    },
+
+  });
+
+  RkTheme.setType('RkTextInput', 'iconRight', {
+    label: {
+      position: 'absolute',
+      right: 0,
+    },
+    input: {
+      marginRight: scale(46),
+    },
+  });
+
+  RkTheme.setType('RkTextInput', 'sticker', {
+    input: {
+      marginHorizontal: 14,
+    },
+    container: {
+      justifyContent: 'center',
+      paddingHorizontal: 0,
+    },
+    label: {
+      position: 'absolute',
+      right: 0,
+    },
+  });
+
+  /*
+   RkCard types
+   */
+
+  RkTheme.setType('RkCard', 'basic', {
+    container: {
+      borderRadius: 3,
+      backgroundColor: theme => theme.colors.control.background,
+    },
+    header: {
+      justifyContent: 'flex-start',
+      paddingVertical: 14,
+    },
+    content: {
+      padding: 16,
+    },
+    footer: {
+      paddingBottom: 20,
+      paddingTop: 7.5,
+      paddingHorizontal: 0,
+    },
+  });
+
+  RkTheme.setType('RkCard', 'backImg', {
+    container: {
+      borderWidth: 0,
+      borderRadius: 0,
+    },
+    img: {
+      height: 225,
+    },
+    imgOverlay: {
+      height: 225,
+      backgroundColor: 'transparent',
+    },
+    content: {
+      paddingHorizontal: 14,
+    },
+    footer: {
+      paddingTop: 15,
+      paddingBottom: 0,
+      paddingVertical: 7.5,
+      paddingHorizontal: 0,
+    },
+  });
+
+
+  RkTheme.setType('RkCard', 'imgBlock', {
+    img: {
+      height: 235,
+    },
+    header: {
+      padding: 0,
+      paddingVertical: 13,
+      paddingHorizontal: 16,
+    },
+    imgOverlay: {
+      height: -1,
+    },
+    footer: {
+      paddingTop: 18,
+      paddingBottom: 15,
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+    },
+  });
+
+  RkTheme.setType('RkCard', 'horizontal', {
+    container: {
+      flexDirection: 'row',
+      height: 110,
+    },
+    content: {
+      flex: 1,
+    },
+    img: {
+      height: null,
+      flex: -1,
+      width: 120,
+    },
+  });
+
+  RkTheme.setType('RkCard', 'blog', {
+    header: {
+      paddingHorizontal: 16,
+      paddingVertical: 0,
+      paddingTop: 16,
+    },
+    content: {
+      padding: 0,
+      paddingVertical: 0,
+      paddingTop: 12,
+    },
+    footer: {
+      paddingHorizontal: 16,
+      paddingTop: 15,
+      paddingBottom: 16,
+      alignItems: 'center',
+    },
+  });
+
+  RkTheme.setType('RkCard', 'article', {
+    container: {
+      borderWidth: 0,
+      backgroundColor: 'transparent',
+    },
+    header: {
+      paddingVertical: 0,
+      paddingTop: 20,
+      paddingBottom: 16,
+      justifyContent: 'space-between',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderColor: theme => theme.colors.border.base,
+    },
+    content: {
+      padding: 16,
+      borderBottomWidth: 1,
+      borderColor: theme => theme.colors.border.base,
+    },
+    footer: {
+      paddingHorizontal: 14,
+      paddingTop: 15,
+      paddingBottom: 16,
+      alignItems: 'center',
+    },
+  });
+
+  RkTheme.setType('RkCard', 'credit', {
+    container: {
+      borderWidth: 0,
+      borderRadius: 7,
+    },
+    header: {
+      justifyContent: 'space-between',
+      paddingHorizontal: 14,
+      alignItems: 'center',
+      paddingBottom: scaleVertical(46),
+    },
+    content: {
+      alignItems: 'center',
+      paddingVertical: 0,
+    },
+    footer: {
+      paddingBottom: scaleVertical(14),
+      paddingTop: scaleVertical(16),
+      paddingHorizontal: 14,
+      alignItems: 'flex-end',
+    },
+  });
+
+  RkTheme.setType('RkPicker', 'highlight', {
+    highlightBorderTopColor: theme => theme.colors.border.highlight,
+    highlightBorderBottomColor: theme => theme.colors.border.highlight,
+    windowBorderColor: theme => theme.colors.border.highlight,
+  });
+
+  /*
+   Register components
+   */
+
+  RkTheme.registerComponent('Avatar', AvatarTypes);
+  RkTheme.registerComponent('GradientButton', GradientButtonTypes);
+  RkTheme.registerComponent('RkSwitch', SwitchTypes);
+  RkTheme.registerComponent('SocialBar', SocialBarTypes);
+
+  StatusBar.setBarStyle('dark-content', true);
+};
diff --git a/frontend/app/config/darkTheme.js b/frontend/app/config/darkTheme.js
new file mode 100644
index 0000000..4461dcb
--- /dev/null
+++ b/frontend/app/config/darkTheme.js
@@ -0,0 +1,209 @@
+const Colors = {
+  accent: '#ffffff',
+  primary: '#ffffff',
+  success: '#3bd555',
+  disabled: '#686894',
+  danger: '#f53d56',
+
+  foreground: '#ffffff',
+  alterForeground: '#acacd2',
+  inverseForeground: '#ffffff',
+  secondaryForeground: '#bcbcbc',
+  hintForeground: '#969696',
+  fadedForeground: '#ffffffdd',
+
+  boldBackground: '#090f3f',
+  background: '#0a1142',
+  alterBackground: '#12194d',
+  overlayBackground: '#00000057',
+  neutralBackground: '#2f396b',
+  fadedBackground: '#28305a',
+  brandBackground: '#6b35e4',
+
+  border: '#080e36',
+
+  twitter: '#ffffff',
+  google: '#ffffff',
+  facebook: '#ffffff',
+
+  gradientBaseBegin: '#6b35e4',
+  gradientBaseEnd: '#6b35e4',
+  gradientVisaBegin: '#63e2ff',
+  gradientVisaEnd: '#712ec3',
+  gradientMasterBegin: '#febb5b',
+  gradientMasterEnd: '#f24645',
+  gradientAxpBegin: '#42e695',
+  gradientAxpEnd: '#3bb2bb',
+  highlight: '#acacd2',
+
+  faded: '#e5e5e5',
+  icon: '#c2c2c2',
+  neutral: '#f2f2f2',
+
+  info: '#2942ff',
+  warning: '#feb401',
+
+  doughnutFirst: '#d500f9',
+  doughnutSecond: '#7c4dff',
+  doughnutThird: '#40c4ff',
+  doughnutFourth: '#2962ff',
+
+  followersProgress: '#d500f9',
+
+  followersFirst: '#2942ff',
+  followersSecond: '#1b2ba6',
+  followersThird: '#081c6e',
+  followersFourth: '#09103f',
+
+  chartsAreaStroke: '#2942ff',
+  chartsAreaFill: '#0d1238',
+};
+
+const Fonts = {
+  light: 'Roboto-Light',
+  regular: 'Roboto-Regular',
+  bold: 'Roboto-Medium',
+  logo: 'Righteous-Regular',
+};
+
+const FontBaseValue = 18;
+
+export const DarkKittenTheme = {
+  name: 'dark',
+  colors: {
+    accent: Colors.accent,
+    primary: Colors.primary,
+    disabled: Colors.disabled,
+    twitter: Colors.twitter,
+    google: Colors.google,
+    facebook: Colors.facebook,
+    brand: Colors.brandBackground,
+    info: Colors.info,
+    infoActive: Colors.info,
+    text: {
+      base: Colors.foreground,
+      secondary: Colors.foreground,
+      accent: Colors.accent,
+      inverse: Colors.inverseForeground,
+      hint: Colors.alterForeground,
+    },
+    screen: {
+      base: Colors.background,
+      alter: Colors.alterBackground,
+      scroll: Colors.background,
+      bold: Colors.boldBackground,
+      overlay: Colors.overlayBackground,
+    },
+    button: {
+      back: Colors.alterBackground,
+      underlay: Colors.neutralBackground,
+      highlight: Colors.brandBackground,
+    },
+    input: {
+      text: Colors.alterForeground,
+      background: Colors.alterBackground,
+      label: Colors.alterForeground,
+      placeholder: Colors.alterForeground,
+    },
+    border: {
+      base: Colors.border,
+      accent: Colors.alterBackground,
+      secondary: Colors.secondaryForeground,
+      highlight: Colors.highlight,
+    },
+    control: {
+      background: Colors.alterBackground,
+    },
+    badge: {
+      likeBackground: Colors.foreground,
+      likeForeground: Colors.danger,
+      plusBackground: Colors.foreground,
+      plusForeground: Colors.success,
+    },
+    chat: {
+      messageInBackground: Colors.fadedBackground,
+      messageOutBackground: Colors.neutralBackground,
+      text: Colors.fadedForeground,
+    },
+    gradients: {
+      base: [
+        Colors.gradientBaseBegin,
+        Colors.gradientBaseEnd,
+      ],
+      visa: [
+        Colors.gradientVisaBegin,
+        Colors.gradientVisaEnd,
+      ],
+      mastercard: [
+        Colors.gradientMasterBegin,
+        Colors.gradientMasterEnd,
+      ],
+      axp: [
+        Colors.gradientAxpBegin,
+        Colors.gradientAxpEnd,
+      ],
+    },
+    dashboard: {
+      stars: Colors.alterBackground,
+      tweets: Colors.alterBackground,
+      likes: Colors.alterBackground,
+    },
+    charts: {
+      followersProgress: Colors.followersProgress,
+      doughnut: [
+        Colors.doughnutFirst,
+        Colors.doughnutSecond,
+        Colors.doughnutThird,
+        Colors.doughnutFourth,
+      ],
+      followersArea: [
+        Colors.followersFirst,
+        Colors.followersSecond,
+        Colors.followersThird,
+        Colors.followersFourth,
+      ],
+      area: {
+        stroke: Colors.chartsAreaStroke,
+        fill: Colors.chartsAreaFill,
+      },
+    },
+  },
+  fonts: {
+    sizes: {
+      h0: 32,
+      h1: 26,
+      h2: 24,
+      h3: 20,
+      h4: 18,
+      h5: 16,
+      h6: 15,
+      p1: 16,
+      p2: 15,
+      p3: 15,
+      p4: 13,
+      s1: 15,
+      s2: 14,
+      s3: 14,
+      s4: 12,
+      s5: 12,
+      s6: 13,
+      s7: 10,
+      base: FontBaseValue,
+      small: FontBaseValue * 0.8,
+      medium: FontBaseValue,
+      large: FontBaseValue * 1.2,
+      xlarge: FontBaseValue / 0.75,
+      xxlarge: FontBaseValue * 1.6,
+    },
+    lineHeights: {
+      medium: 18,
+      big: 24,
+    },
+    family: {
+      regular: Fonts.regular,
+      light: Fonts.light,
+      bold: Fonts.bold,
+      logo: Fonts.logo,
+    },
+  },
+};
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;
diff --git a/frontend/app/config/theme.js b/frontend/app/config/theme.js
new file mode 100644
index 0000000..b3f4225
--- /dev/null
+++ b/frontend/app/config/theme.js
@@ -0,0 +1,210 @@
+import { scale } from '../utils/scale';
+
+const Colors = {
+  accent: '#5c9b3a',
+  primary: '#f64e59',
+  success: '#3bd555',
+  disabled: '#cacaca',
+
+  foreground: '#212121',
+  alterForeground: '#707070',
+  inverseForeground: '#ffffff',
+  secondaryForeground: '#bcbcbc',
+  hintForeground: '#969696',
+  highlight: '#bcbcbc',
+
+  background: '#ffffff',
+  alterBackground: '#f2f2f2',
+  overlayBackground: '#00000057',
+  neutralBackground: '#f2f2f2',
+  fadedBackground: '#e5e5e5',
+
+  border: '#f2f2f2',
+
+  twitter: '#41abe1',
+  google: '#e94335',
+  facebook: '#3b5998',
+
+  gradientBaseBegin: '#69b338',
+  gradientBaseEnd: '#0d712a',
+  gradientVisaBegin: '#63e2ff',
+  gradientVisaEnd: '#712ec3',
+  gradientMasterBegin: '#febb5b',
+  gradientMasterEnd: '#f24645',
+  gradientAxpBegin: '#42e695',
+  gradientAxpEnd: '#3bb2bb',
+
+  faded: '#e5e5e5',
+  icon: '#c2c2c2',
+  neutral: '#f2f2f2',
+
+  info: '#19bfe5',
+  warning: '#feb401',
+  danger: '#ed1c4d',
+
+  starsStat: '#2ab5fa',
+  tweetsStat: '#ffc61c',
+  likesStat: '#5468ff',
+
+  doughnutFirst: '#8a98ff',
+  doughnutSecond: '#ffd146',
+  doughnutThird: '#c2d521',
+  doughnutFourth: '#ff6b5c',
+
+  followersProgress: '#c2d521',
+
+  followersFirst: '#b3e5fc',
+  followersSecond: '#81d4fa',
+  followersThird: '#4fc3f7',
+  followersFourth: '#42a5f5',
+
+  chartsAreaStroke: '#097fe5',
+  chartsAreaFill: '#d6ecff',
+};
+
+const Fonts = {
+  light: 'Roboto-Light',
+  regular: 'Roboto-Regular',
+  bold: 'Roboto-Medium',
+  logo: 'Righteous-Regular',
+};
+
+const FontBaseValue = scale(18);
+
+export const KittenTheme = {
+  name: 'light',
+  colors: {
+    accent: Colors.accent,
+    primary: Colors.primary,
+    disabled: Colors.disabled,
+    twitter: Colors.twitter,
+    google: Colors.google,
+    facebook: Colors.facebook,
+    brand: Colors.accent,
+    text: {
+      base: Colors.foreground,
+      secondary: Colors.secondaryForeground,
+      accent: Colors.accent,
+      inverse: Colors.inverseForeground,
+      hint: Colors.alterForeground,
+    },
+    input: {
+      text: Colors.alterForeground,
+      background: Colors.background,
+      label: Colors.secondaryForeground,
+      placeholder: Colors.secondaryForeground,
+    },
+    screen: {
+      base: Colors.background,
+      alter: Colors.alterBackground,
+      scroll: Colors.alterBackground,
+      bold: Colors.alterBackground,
+      overlay: Colors.overlayBackground,
+    },
+    button: {
+      back: Colors.background,
+      underlay: Colors.neutralBackground,
+      highlight: Colors.primary,
+    },
+    border: {
+      base: Colors.border,
+      accent: Colors.accent,
+      secondary: Colors.secondaryForeground,
+      highlight: Colors.highlight,
+    },
+    control: {
+      background: Colors.background,
+    },
+    badge: {
+      likeBackground: Colors.primary,
+      likeForeground: Colors.inverseForeground,
+      plusBackground: Colors.success,
+      plusForeground: Colors.inverseForeground,
+    },
+    chat: {
+      messageInBackground: Colors.neutralBackground,
+      messageOutBackground: Colors.fadedBackground,
+      text: Colors.foreground,
+    },
+    gradients: {
+      base: [
+        Colors.gradientBaseBegin,
+        Colors.gradientBaseEnd,
+      ],
+      visa: [
+        Colors.gradientVisaBegin,
+        Colors.gradientVisaEnd,
+      ],
+      mastercard: [
+        Colors.gradientMasterBegin,
+        Colors.gradientMasterEnd,
+      ],
+      axp: [
+        Colors.gradientAxpBegin,
+        Colors.gradientAxpEnd,
+      ],
+    },
+    dashboard: {
+      stars: Colors.starsStat,
+      tweets: Colors.tweetsStat,
+      likes: Colors.likesStat,
+    },
+    charts: {
+      followersProgress: Colors.followersProgress,
+      doughnut: [
+        Colors.doughnutFirst,
+        Colors.doughnutSecond,
+        Colors.doughnutThird,
+        Colors.doughnutFourth,
+      ],
+      followersArea: [
+        Colors.followersFirst,
+        Colors.followersSecond,
+        Colors.followersThird,
+        Colors.followersFourth,
+      ],
+      area: {
+        stroke: Colors.chartsAreaStroke,
+        fill: Colors.chartsAreaFill,
+      },
+    },
+  },
+  fonts: {
+    sizes: {
+      h0: scale(32),
+      h1: scale(26),
+      h2: scale(24),
+      h3: scale(20),
+      h4: scale(18),
+      h5: scale(16),
+      h6: scale(15),
+      p1: scale(16),
+      p2: scale(15),
+      p3: scale(15),
+      p4: scale(13),
+      s1: scale(15),
+      s2: scale(13),
+      s3: scale(13),
+      s4: scale(12),
+      s5: scale(12),
+      s6: scale(13),
+      s7: scale(10),
+      base: FontBaseValue,
+      small: FontBaseValue * 0.8,
+      medium: FontBaseValue,
+      large: FontBaseValue * 1.2,
+      xlarge: FontBaseValue / 0.75,
+      xxlarge: FontBaseValue * 1.6,
+    },
+    lineHeights: {
+      medium: 18,
+      big: 24,
+    },
+    family: {
+      regular: Fonts.regular,
+      light: Fonts.light,
+      bold: Fonts.bold,
+      logo: Fonts.logo,
+    },
+  },
+};