created tagArea

src/components/editorElements/index.js

@@ -0,0 +1,4 @@
+import TitleArea from './titleArea/view/titleAreaView';
+import TagArea from './tagArea/view/tagAreaView';
+
+export { TitleArea, TagArea };

src/components/editorElements/tagArea/view/tagAreaStyles.js

@@ -0,0 +1,21 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  textInput: {
+    color: '$white',
+    fontSize: 10,
+    backgroundColor: '#c1c5c7',
+    borderRadius: 50,
+    maxHeight: 18,
+    padding: 5,
+    paddingHorizontal: 10,
+    marginRight: 8,
+  },
+  tagWrapper: {
+    flexDirection: 'row',
+    marginTop: 14,
+  },
+  firstTag: {
+    backgroundColor: '$primaryBlue',
+  },
+});

src/components/editorElements/tagArea/view/tagAreaView.js

@@ -0,0 +1,71 @@
+import React, { Component, Fragment } from 'react';
+import { TextInput, View } from 'react-native';
+// Constants
+
+// Components
+
+// Styles
+import styles from './tagAreaStyles';
+
+export default class TagAreaView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: '',
+      isFirstTag: false,
+    };
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _handleOnChange = (text) => {
+    this.setState({ text });
+    console.log(text);
+
+    if (text.indexOf(' ') > 0) {
+      this.setState({ isFirstTag: true });
+    } else if (!text) {
+      this.setState({ isFirstTag: false });
+    }
+  };
+
+  render() {
+    const { onChange, value } = this.props;
+    const { isFirstTag, text } = this.state;
+
+    return (
+      <Fragment>
+        <View style={styles.tagWrapper}>
+          <TextInput
+            style={[styles.textInput, isFirstTag && styles.firstTag]}
+            placeholderTextColor="#fff"
+            editable
+            maxLength={250}
+            placeholder="tags"
+            multiline={false}
+            onChangeText={text => this._handleOnChange(text)}
+            value={value}
+            autoCapitalize="none"
+          />
+          <TextInput
+            style={styles.textInput}
+            placeholderTextColor="#fff"
+            editable
+            maxLength={250}
+            placeholder="tags"
+            multiline={false}
+            onChangeText={text => this._handleOnChange(text)}
+            value={value}
+            autoCapitalize="none"
+          />
+        </View>
+      </Fragment>
+    );
+  }
+}

src/components/editorElements/titleArea/view/titleAreaStyles.js

@@ -0,0 +1,9 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  textInput: {
+    color: '$primaryBlack',
+    fontWeight: 'bold',
+    fontSize: 24,
+  },
+});

src/components/editorElements/titleArea/view/titleAreaView.js

@@ -0,0 +1,44 @@
+import React, { Component, Fragment } from 'react';
+import { TextInput } from 'react-native';
+// Constants
+
+// Components
+
+// Styles
+import styles from './titleAreaStyles';
+
+export default class TitleAreaView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    const { onChange, value } = this.props;
+
+    return (
+      <Fragment>
+        <TextInput
+          style={styles.textInput}
+          placeholderTextColor="c1c5c7"
+          editable
+          maxLength={250}
+          placeholder="Title"
+          multiline
+          numberOfLines={4}
+          onChangeText={text => onChange && onChange(text)}
+          value={value}
+        />
+      </Fragment>
+    );
+  }
+}

src/components/editorHeader/view/editorHeaderView.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { View, SafeAreaView } from 'react-native';
 import { TextButton } from '../..';
 import { IconButton } from '../../iconButton';
 // Constants
@@ -28,27 +28,33 @@ class EditorHeaderView extends Component {
     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>
+      <SafeAreaView>
+        <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>
+      </SafeAreaView>
     );
   }
 }

src/config/routes.js

@@ -13,7 +13,7 @@ import { SideMenu } from '../components';
 const mainNavigation = DrawerNavigator(
   {
     [ROUTES.SCREENS.HOME]: {
-      screen: BaseNavigator,
+      screen: Editor,
       navigationOptions: {
         header: () => null,
       },

src/globalStyles.js

@@ -1,10 +1,9 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  container: {
+  containerHorizontal16: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    paddingHorizontal: 16,
   },
   title: {},
   text: {

src/screens/editor/screen/editorScreen.js

@@ -1,9 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { View } from 'react-native';
-import { EditorHeader } from '../../../components/editorHeader';
+
 // Constants
 
 // Components
+import { EditorHeader } from '../../../components/editorHeader';
+import { TitleArea, TagArea } from '../../../components/editorElements';
+
+// Styles
+import globalStyles from '../../../globalStyles';
 
 export class EditorScreen extends Component {
   /* Props
@@ -23,9 +28,13 @@ export class EditorScreen extends Component {
   render() {
     // eslint-disable-next-line
     return (
-      <View>
+      <Fragment>
         <EditorHeader />
-      </View>
+        <View style={globalStyles.containerHorizontal16}>
+          <TitleArea />
+          <TagArea />
+        </View>
+      </Fragment>
     );
   }
 }