created editorScreen && editorHeader && some enhancemnt with other component

src/components/buttons/views/iconButtonStyles.js

@@ -1,14 +1,14 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   circleButton: {
-    alignItems: "center",
+    alignItems: 'center',
-    backgroundColor: "$white",
+    backgroundColor: '$white',
     height: 60,
     width: 60,
     borderRadius: 60 / 2,
-    justifyContent: "center",
+    justifyContent: 'center',
-    borderColor: "$primaryBlue",
+    borderColor: '$primaryBlue',
     borderWidth: 1,
   },
 });

src/components/buttons/views/textButtonView.js

@@ -3,14 +3,13 @@ import { TouchableWithoutFeedback, Text, View } from 'react-native';
 
 import styles from './textButtonStyles';
 
-const TextButtonView = ({ text, onPress, style }) => (
+const TextButtonView = ({
+  text, onPress, style, textStyle,
+}) => (
   <Fragment>
-    <TouchableWithoutFeedback
+    <TouchableWithoutFeedback style={[styles.button]} onPress={() => onPress && onPress()}>
-      style={[styles.button, style]}
+      <View style={style}>
-      onPress={() => onPress && onPress()}
+        <Text style={[styles.buttonText, textStyle]}>{text}</Text>
-    >
-      <View>
-        <Text style={styles.buttonText}>{text}</Text>
       </View>
     </TouchableWithoutFeedback>
   </Fragment>

src/components/editorHeader/container/editorHeaderContainer.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { withNavigation } from 'react-navigation';
+
+// Constants
+import { default as ROUTES } from '../../../constants/routeNames';
+
+// Components
+import { EditorHeaderView } from '..';
+
+class EditorHeaderContainer extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _handleOnPressBackButton = () => {
+    const { navigation } = this.props;
+
+    navigation.navigate(ROUTES.SCREENS.HOME);
+  };
+
+  render() {
+    return (
+      <EditorHeaderView handleOnPressBackButton={this._handleOnPressBackButton} {...this.props} />
+    );
+  }
+}
+
+export default withNavigation(EditorHeaderContainer);

src/components/editorHeader/index.js

@@ -0,0 +1,5 @@
+import EditorHeaderView from './view/editorHeaderView';
+import EditorHeader from './container/editorHeaderContainer';
+
+export { EditorHeaderView, EditorHeader };
+export default EditorHeader;

src/components/editorHeader/view/editorHeaderStyles.js

@@ -0,0 +1,34 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    // flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+    width: '$deviceWidth',
+    backgroundColor: '$white',
+  },
+  backIcon: {
+    fontSize: 24,
+    color: '$iconColor',
+  },
+  backIconButton: {
+    flexGrow: 1,
+  },
+  rightIcon: {
+    color: '$iconColor',
+  },
+  iconButton: {
+    marginRight: 24,
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  textButton: {
+    color: '$iconColor',
+    fontSize: 16,
+  },
+  textButtonWrapper: {
+    justifyContent: 'center',
+  },
+});

src/components/editorHeader/view/editorHeaderView.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { TextButton } from '../..';
+import { IconButton } from '../../iconButton';
+// Constants
+
+// Components
+
+// Styles
+import styles from './editorHeaderStyles';
+
+class EditorHeaderView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    const { handleOnPressBackButton } = this.props;
+
+    return (
+      <View style={styles.container}>
+        <IconButton
+          style={styles.backIconButton}
+          iconStyle={styles.backIcon}
+          name="md-arrow-back"
+          onPress={() => handleOnPressBackButton()}
+        />
+        <IconButton
+          style={styles.iconButton}
+          iconStyle={styles.rightIcon}
+          size={20}
+          name="ios-timer"
+        />
+        <IconButton
+          style={styles.iconButton}
+          size={25}
+          iconStyle={styles.rightIcon}
+          name="ios-eye"
+        />
+        <TextButton textStyle={styles.textButton} style={styles.textButtonWrapper} text="Publish" />
+      </View>
+    );
+  }
+}
+
+export default EditorHeaderView;

src/components/iconButton/view/iconButtonStyles.js

@@ -1,13 +1,12 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   iconButton: {
     width: 30,
     height: 30,
     borderRadius: 30 / 2,
-    justifyContent: "center",
+    justifyContent: 'center',
-  },
+    alignItems: 'center',
-  icon: {
-    textAlign: "center",
   },
+  icon: {},
 });

src/components/iconButton/view/iconButtonView.js

@@ -1,32 +1,35 @@
-import React from "react";
+import React, { Fragment } from 'react';
-import { View, TouchableHighlight } from "react-native";
+import { TouchableHighlight } from 'react-native';
-import Ionicons from "react-native-vector-icons/Ionicons";
+import Ionicons from 'react-native-vector-icons/Ionicons';
 
-import styles from "./iconButtonStyles";
+import styles from './iconButtonStyles';
 
 /* Props
 * ------------------------------------------------
 *   @prop { type }    name                - Description....
 */
 
-const IconButton = ({ name, color, size, onPress, backgroundColor, style }) => (
+const IconButton = ({
-  <View>
+  name, color, size, onPress, backgroundColor, style, iconStyle,
+}) => (
+  <Fragment>
     <TouchableHighlight
-      style={[styles.iconButton, style && style]}
+      style={[!style && styles.iconButton, style && style]}
       onPress={() => onPress && onPress()}
-      underlayColor={backgroundColor}
+      underlayColor={backgroundColor || 'white'}
     >
       <Ionicons
         style={[
+          color && { color },
+          backgroundColor && { backgroundColor },
           styles.icon,
-          color && { color: color },
+          iconStyle && iconStyle,
-          backgroundColor && { backgroundColor: backgroundColor },
         ]}
         name={name}
         size={size}
       />
     </TouchableHighlight>
-  </View>
+  </Fragment>
 );
 
 export default IconButton;

src/components/numericKeyboard/views/numericKeyboardView.js

@@ -1,15 +1,13 @@
-import React, { Fragment, Component } from "react";
+import React, { Component } from 'react';
-import { View } from "react-native";
+import { View } from 'react-native';
 
-import { CircularButton, IconButton } from "../../";
+import { CircularButton, IconButton } from '../..';
 
-import styles from "./numericKeyboardStyles";
+import styles from './numericKeyboardStyles';
 
 class NumericKeyboard extends Component {
   /* Props
-    *
     *   @prop { func }    onPress            - Function will trigger when any button clicked.
-    * 
     */
   constructor(props) {
     super(props);
@@ -20,7 +18,7 @@ class NumericKeyboard extends Component {
 
   // Component Functions
 
-  _handleOnPress = value => {
+  _handleOnPress = (value) => {
     alert(value);
   };
 
@@ -98,7 +96,7 @@ class NumericKeyboard extends Component {
           />
 
           <IconButton
-            handleOnPress={() => onPress && onPress("clear")}
+            handleOnPress={() => onPress && onPress('clear')}
             isCircle
             style={styles.iconButton}
             name="close"

src/components/postButton/container/postButtonContainer.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { withNavigation } from 'react-navigation';
+
+// Components
+import { PostButtonView } from '..';
+
+class PostButtonContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycle Functions
+
+  // Component Functions
+
+  _handleSubButtonPress = (route) => {
+    const { navigation } = this.props;
+
+    navigation.navigate(route);
+  };
+
+  render() {
+    return <PostButtonView handleSubButtonPress={this._handleSubButtonPress} {...this.props} />;
+  }
+}
+
+export default withNavigation(PostButtonContainer);

src/components/postButton/index.js

@@ -1,4 +1,5 @@
-import PostButton from './view/postButtonView';
+import PostButtonView from './view/postButtonView';
+import PostButton from './container/postButtonContainer';
 
-export { PostButton };
+export { PostButtonView, PostButton };
 export default PostButton;

src/components/postButton/view/postButtonView.js

@@ -81,15 +81,7 @@ class PostButtonView extends Component {
       outputRange: ['0deg', '45deg'],
     });
 
-    // const bluring = this.mode.interpolate({
+    const { handleSubButtonPress } = this.props;
-    //   inputRange: [0, 1],
-    //   outputRange: [10, 5],
-    // });
-
-    // const blurin2 = this.mode.interpolate({
-    //   inputRange: [0, 1],
-    //   outputRange: [0, -20],
-    // });
 
     return (
       <View style={styles.postButtonWrapper}>
@@ -108,6 +100,7 @@ class PostButtonView extends Component {
             top: secondY,
           }}
           icon="pencil"
+          onPress={() => handleSubButtonPress('EditorScreen')}
         />
         <SubPostButton
           size={SIZE}

src/components/sideMenu/container/sideMenuContainer.js

@@ -29,7 +29,7 @@ class SideMenuContainer extends Component {
 
   // Component Functions
 
-  _navigateToRoute = (route) => {
+  _navigateToRoute = (route = null) => {
     const { navigation } = this.props;
     navigation.navigate(route);
   };

src/components/sideMenu/view/sideMenuView.js

@@ -28,6 +28,7 @@ class SideMenuView extends Component {
 
   render() {
     const { isLoggedIn, userAvatar, navigateToRoute } = this.props;
+
     return (
       <View style={styles.container}>
         <View style={styles.headerView}>

src/config/routes.js

@@ -3,7 +3,9 @@ import { BaseNavigator } from '../navigation';
 import { default as ROUTES } from '../constants/routeNames';
 
 // Screens
-import { Splash, Login, PinCode } from '../screens';
+import {
+  Editor, Login, PinCode, Splash,
+} from '../screens';
 
 // Components
 import { SideMenu } from '../components';
@@ -23,8 +25,9 @@ const mainNavigation = DrawerNavigator(
 );
 
 export default SwitchNavigator({
-  [ROUTES.SCREENS.SPLASH]: { screen: Splash },
+  [ROUTES.DRAWER.MAIN]: mainNavigation,
+  [ROUTES.SCREENS.EDITOR]: { screen: Editor },
   [ROUTES.SCREENS.LOGIN]: { screen: Login },
   [ROUTES.SCREENS.PINCODE]: { screen: PinCode },
-  [ROUTES.DRAWER.MAIN]: mainNavigation,
+  [ROUTES.SCREENS.SPLASH]: { screen: Splash },
 });

src/constants/routeNames.js

@@ -3,10 +3,11 @@ const DRAWER_SUFFIX = 'Drawer';
 
 export default {
   SCREENS: {
-    SPLASH: `Splash${SCREEN_SUFFIX}`,
+    EDITOR: `Editor${SCREEN_SUFFIX}`,
+    HOME: `Home${SCREEN_SUFFIX}`,
     LOGIN: `Login${SCREEN_SUFFIX}`,
     PINCODE: `PinCode${SCREEN_SUFFIX}`,
-    HOME: `Home${SCREEN_SUFFIX}`,
+    SPLASH: `Splash${SCREEN_SUFFIX}`,
   },
   DRAWER: {
     MAIN: `Main${DRAWER_SUFFIX}`,

src/constants/sideMenuItems.js

@@ -39,7 +39,7 @@ const authMenuItems = [
 const noAuthMenuItems = [
   {
     name: 'Login',
-    route: 'Login',
+    route: 'LoginScreen',
     icon: 'user-o',
   },
 ];

src/screens/_editor/editor.js

@@ -106,7 +106,7 @@ class EditorPage extends React.Component {
 
     render() {
       return (
-        <Container style={{ flex: 1 }}>
+        <Container >
           <View style={{ flex: 1, flexDirection: 'column' }}>
             <TextInput
               placeholder="Title"

src/screens/editor/container/editorContainer.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+// Services and Actions
+
+// Middleware
+
+// Constants
+
+// Utilities
+
+// Component
+import { EditorScreen } from '../screen/editorScreen';
+
+/*
+  *            Props Name        Description                                     Value
+  *@props -->  props name here   description here                                Value Type Here
+  *
+  */
+
+class ExampleContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycle Functions
+
+  // Component Functions
+
+  render() {
+    return <EditorScreen />;
+  }
+}
+
+export default ExampleContainer;

src/screens/editor/index.js

@@ -0,0 +1,4 @@
+import Editor from './container/editorContainer';
+
+export { Editor };
+export default Editor;

src/screens/editor/screen/editorScreen.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { EditorHeader } from '../../../components/editorHeader';
+// Constants
+
+// Components
+
+export class EditorScreen extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    // eslint-disable-next-line
+    return (
+      <View>
+        <EditorHeader />
+      </View>
+    );
+  }
+}

src/screens/index.js

@@ -1,9 +1,10 @@
 import PinCode from './pinCode';
 import Splash from './splash';
+import { Editor } from './editor';
 import { Home } from './home';
 import { Login } from './login';
-import { Profile } from './profile';
 import { Notification } from './notification';
+import { Profile } from './profile';
 
 // import Author from './authorProfile';
 // import SideMenu from './sideMenuScreen';
@@ -18,12 +19,13 @@ import { Notification } from './notification';
 // import { Notification } from './notification';
 
 export {
+  Editor,
   Home,
   Login,
-  PinCode,
-  Splash,
-  Profile,
   Notification,
+  PinCode,
+  Profile,
+  Splash,
   // Author,
   // SideMenu,
   // Hot,