Add navigation and drawer

package.json

@@ -14,6 +14,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@expo/vector-icons": "^6.3.1",
     "axios": "^0.16.2",
     "ex-react-native-i18n": "0.0.4",
     "expo": "^26.0.0",
@@ -22,6 +23,7 @@
     "ramda": "^0.25.0",
     "react": "16.3.0-alpha.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
+    "react-navigation": "^2.0.0",
     "react-redux": "^5.0.6",
     "recompose": "^0.26.0",
     "redux": "^3.7.2",

src/components/DrawerButton/DrawerButton.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import T from 'prop-types';
+import { Text } from 'react-native';
+
+const DrawerButton = props => (
+  <Text style={{ width: 100, height: 50 }} onPress={props.onPress}>
+    Drawer
+  </Text>
+);
+
+DrawerButton.propTypes = {
+  onPress: T.func,
+};
+
+export default DrawerButton;

src/components/DrawerItem/DrawerItem.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import T from 'prop-types';
+import { Text, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { DrawerActions } from 'react-navigation';
+import { Touchable, Separator } from '../';
+import s from './styles';
+import { colors } from '../../styles';
+
+const DrawerItem = ({
+  item,
+  activeItemKey,
+  navigation,
+}) => {
+  if (item.separator) {
+    return <Separator />;
+  }
+
+  const isActive = item.key === activeItemKey;
+
+  const onPress = () => {
+    if (typeof item.onPress === 'function') {
+      item.onPress();
+    } else {
+      navigation.navigate(item.key);
+    }
+
+    // we don't have a navigation.closeDrawer action
+    // but we still are able to dispatch that action manually
+    navigation.dispatch(DrawerActions.closeDrawer());
+  };
+
+  return (
+    <Touchable onPress={onPress}>
+      <View style={[s.container, isActive && s.activeContainer]}>
+        <View style={s.icon}>
+          <Ionicons
+            color={isActive
+              ? colors.drawerItem.activeIcon
+              : colors.drawerItem.icon
+            }
+            size={28}
+            name={item.iconName}
+          />
+        </View>
+        <Text style={[s.title, isActive && s.activeTitle]}>
+          {item.label}
+        </Text>
+      </View>
+    </Touchable>
+  );
+};
+
+DrawerItem.propTypes = {
+  item: T.shape({
+    label: T.string,
+    key: T.string,
+    iconName: T.string,
+    onPress: T.func,
+    separator: T.bool,
+  }),
+  activeItemKey: T.string,
+  navigation: T.object,
+};
+
+export default DrawerItem;

src/components/DrawerItem/styles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../styles';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: 58,
+    backgroundColor: colors.drawerItem.background,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  activeContainer: {
+    backgroundColor: colors.drawerItem.activeBackground,
+  },
+  icon: {
+    width: 32,
+    height: 32,
+    marginRight: 16,
+    marginLeft: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: colors.drawerItem.text,
+  },
+  activeTitle: {
+    color: colors.drawerItem.activeText,
+  },
+  borderTop: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.drawerItem.border,
+  },
+});
+
+export default styles;

src/components/Logo/Logo.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import T from 'prop-types';
+import { View, Image } from 'react-native';
+import s from './styles';
+import logo from '../../../assets/images/logo.png';
+
+const Logo = ({
+  borderBottom,
+  borderTop,
+}) => (
+  <View style={[
+    s.container,
+    borderBottom && s.borderBottom,
+    borderTop && s.borderTop,
+  ]}
+  >
+    <Image
+      source={logo}
+      style={s.image}
+    />
+  </View>
+);
+
+
+Logo.propTypes = {
+  borderBottom: T.bool,
+  borderTop: T.bool,
+};
+
+export default Logo;

src/components/Logo/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../styles';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: 158,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 34,
+  },
+  image: {
+    resizeMode: 'contain',
+    width: '100%',
+  },
+  borderTop: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.separator,
+  },
+  borderBottom: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.separator,
+  },
+});
+
+export default styles;

src/components/Separator/Separator.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import T from 'prop-types'; // eslint-disable-line
+import { View } from 'react-native';
+import s from './styles';
+
+const Separator = () => (
+  <View style={s.separator} />
+);
+
+
+Separator.propTypes = {
+
+};
+
+export default Separator;

src/components/Separator/styles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../styles';
+
+const styles = StyleSheet.create({
+  separator: {
+    flex: 1,
+    height: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.separator,
+  },
+});
+
+export default styles;

src/components/index.js

@@ -1 +1,5 @@
 export { default as Touchable } from './Touchable/Touchable';
+export { default as DrawerButton } from './DrawerButton/DrawerButton';
+export { default as DrawerItem } from './DrawerItem/DrawerItem';
+export { default as Separator } from './Separator/Separator';
+export { default as Logo } from './Logo/Logo';

src/index.js

@@ -13,7 +13,7 @@ import store from './store';
 import { globalStyles } from './styles';
 import { appOperations } from './modules/app';
 import { loadAssets, loadFonts } from './utils';
-import WelcomeScreen from './screens/WelcomeScreen';
+import RootNavigator from './navigation/RootNavigator';
 
 const isAndroid = Platform.OS === 'android';
 
@@ -41,7 +41,7 @@ const App = ({
   return (
     <Provider store={store}>
       <View style={globalStyles.fillAll}>
-        <WelcomeScreen />
+        <RootNavigator />
       </View>
     </Provider>
   );

src/navigation/AboutUsNavigator.js

@@ -0,0 +1,7 @@
+import { createStackNavigator } from 'react-navigation';
+import { screens } from './';
+import AboutUsScreen from '../screens/AboutUsScreen';
+
+export default createStackNavigator({
+  [screens.AboutUs]: { screen: AboutUsScreen },
+});

src/navigation/AuthNavigator.js

@@ -0,0 +1,11 @@
+import { createStackNavigator } from 'react-navigation';
+import { screens } from './';
+import SignUpScreen from '../screens/SignUpScreen';
+import SignInScreen from '../screens/SignInScreen';
+import RestorePasswordScreen from '../screens/RestorePasswordScreen';
+
+export default createStackNavigator({
+  [screens.SignUp]: { screen: SignUpScreen },
+  [screens.SignIn]: { screen: SignInScreen },
+  [screens.RestorePassword]: { screen: RestorePasswordScreen },
+});

src/navigation/AuthorizedApplicationNavigator.js

@@ -0,0 +1,35 @@
+import { createDrawerNavigator } from 'react-navigation';
+import { screens } from './';
+import HomeNavigator from './HomeNavigator';
+import SearchNavigator from './SearchNavigator';
+import CreateQuestionNavigator from './CreateQuestionNavigator';
+import ProfileNavigator from './ProfileNavigator';
+import AboutUsNavigator from './AboutUsNavigator';
+import { Drawer } from './components';
+
+export default createDrawerNavigator({
+  [screens.Home]: {
+    screen: HomeNavigator,
+    drawerLabel: 'Home',
+  },
+  [screens.Search]: {
+    screen: SearchNavigator,
+    drawerLabel: 'Search',
+  },
+  [screens.CreateQuestion]: {
+    screen: CreateQuestionNavigator,
+    drawerLabel: 'CreateQuestion',
+  },
+  [screens.Profile]: {
+    screen: ProfileNavigator,
+    drawerLabel: 'Profile',
+  },
+  [screens.AboutUs]: {
+    screen: AboutUsNavigator,
+    drawerLabel: 'About Us',
+  },
+}, {
+  drawerWidth: 300,
+  drawerPosition: 'left',
+  contentComponent: Drawer,
+});

src/navigation/CreateQuestionNavigator.js

@@ -0,0 +1,7 @@
+import { createStackNavigator } from 'react-navigation';
+import { screens } from './';
+import CreateQuestionScreen from '../screens/CreateQuestionScreen';
+
+export default createStackNavigator({
+  [screens.CreateQuestion]: { screen: CreateQuestionScreen },
+});

src/navigation/HomeNavigator.js

@@ -0,0 +1,11 @@
+import { createStackNavigator } from 'react-navigation';
+import { screens } from './';
+import UserQuestionsScreen from '../screens/UserQuestionsScreen';
+import QuestionScreen from '../screens/QuestionScreen';
+
+export default createStackNavigator({
+  [screens.UserQuestions]: { screen: UserQuestionsScreen },
+  [screens.Question]: { screen: QuestionScreen },
+}, {
+  headerTransitionPreset: 'uikit',
+});

src/navigation/ProfileNavigator.js

@@ -0,0 +1,7 @@
+import { createStackNavigator } from 'react-navigation';
+import { screens } from './';
+import ProfileScreen from '../screens/ProfileScreen';
+
+export default createStackNavigator({
+  [screens.Profile]: { screen: ProfileScreen },
+});

src/navigation/RootNavigator.js

@@ -0,0 +1,9 @@
+import { createSwitchNavigator } from 'react-navigation';
+import { screens } from './';
+import AuthorizedApplicationNavigator from './AuthorizedApplicationNavigator';
+import UnauthorizedApplicationNavigator from './UnauthorizedApplicationNavigator';
+
+export default createSwitchNavigator({
+  [screens.AuthorizedApplication]: { screen: AuthorizedApplicationNavigator },
+  [screens.UnauthorizedApplication]: { screen: UnauthorizedApplicationNavigator },
+}, { initialRouteName: screens.UnauthorizedApplication });

src/navigation/SearchNavigator.js

@@ -0,0 +1,7 @@
+import { createStackNavigator } from 'react-navigation';
+import { screens } from './';
+import SearchScreen from '../screens/SearchScreen';
+
+export default createStackNavigator({
+  [screens.Search]: { screen: SearchScreen },
+});

src/navigation/UnauthorizedApplicationNavigator.js

@@ -0,0 +1,26 @@
+import { createDrawerNavigator } from 'react-navigation';
+import { screens } from './';
+import HomeNavigator from './HomeNavigator';
+import AboutUsNavigator from './AboutUsNavigator';
+import AuthNavigator from './AuthNavigator';
+import { UnauthorizedDrawer } from './components';
+
+export default createDrawerNavigator({
+  [screens.Home]: {
+    screen: HomeNavigator,
+    drawerLabel: 'Home',
+  },
+  [screens.AboutUs]: {
+    screen: AboutUsNavigator,
+    drawerLabel: 'About Us',
+  },
+  [screens.Auth]: {
+    screen: AuthNavigator,
+    drawerLabel: 'Sign Up',
+  },
+}, {
+  initialRouteName: screens.Home,
+  drawerWidth: 300,
+  drawerPosition: 'left',
+  contentComponent: UnauthorizedDrawer,
+});