Added login and signup page

src/Main.js

@@ -20,6 +20,8 @@ import Contact from './page/Contact';
 import Category from './page/Category';
 import Product from './page/Product';
 import ImageGallery from './page/ImageGallery';
+import Login from './page/Login';
+import Signup from './page/Signup';
 
 
 export default class Main extends Component {
@@ -38,6 +40,8 @@ export default class Main extends Component {
             <Scene key="category" component={Category} hideNavBar />
             <Scene key="product" component={Product} hideNavBar />
             <Scene key="imageGallery" component={ImageGallery} modal hideNavBar />
+            <Scene key="login" component={Login} hideNavBar />
+            <Scene key="signup" component={Signup} hideNavBar />
           </Scene>
         </Router>
       </Root>

src/component/SideMenu.js

@@ -277,6 +277,18 @@ var menuItems = [
 
 
 const menusSecondaryItems = [
+  {
+    id: 190,
+    title: 'Login',
+    icon: 'ios-person',
+    key: 'login'
+  },
+  {
+    id: 519,
+    title: 'Signup',
+    icon: 'ios-person-add',
+    key: 'signup'
+  },
   {
     id: 19,
     title: 'Wish List',

src/page/Checkout.js

@@ -0,0 +1,53 @@
+/**
+* This is the Checkout Page
+**/
+
+// React native and others libraries imports
+import React, { Component } from 'react';
+import { Container, Content, Left, Right, Button, Icon } from 'native-base';
+import { Actions } from 'react-native-router-flux';
+
+// Our custom files and classes import
+import Colors from '../Colors';
+import Text from '../component/Text';
+import Navbar from '../component/Navbar';
+
+export default class Checkout extends Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+      };
+  }
+
+
+  render() {
+    var left = (
+      <Left style={{flex:1}}>
+        <Button onPress={() => Actions.pop()} transparent>
+          <Icon name='ios-arrow-back' />
+        </Button>
+      </Left>
+    );
+    var right = (
+      <Right style={{flex:1}}>
+        <Button onPress={() => Actions.search()} transparent>
+          <Icon name='ios-search-outline' />
+        </Button>
+      </Right>
+    );
+    return(
+      <Container style={{backgroundColor: '#fdfdfd'}}>
+        <Navbar left={left} right={right} title="CHECKOUT" />
+        <Content>
+          <Text>Checkout</Text>
+        </Content>
+      </Container>
+    );
+  }
+
+  signup() {
+    alert("Checkout"):
+  }
+
+
+}

src/page/Login.js

@@ -0,0 +1,84 @@
+/**
+* This is the Login Page
+**/
+
+// React native and others libraries imports
+import React, { Component } from 'react';
+import { Image } from 'react-native';
+import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base';
+import { Actions } from 'react-native-router-flux';
+
+// Our custom files and classes import
+import Colors from '../Colors';
+import Text from '../component/Text';
+import Navbar from '../component/Navbar';
+
+export default class Login extends Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+        username: '',
+        password: '',
+        hasError: false,
+        errorText: ''
+      };
+  }
+
+
+  render() {
+    var left = (
+      <Left style={{flex:1}}>
+        <Button onPress={() => Actions.pop()} transparent>
+          <Icon name='ios-arrow-back' />
+        </Button>
+      </Left>
+    );
+    var right = (
+      <Right style={{flex:1}}>
+        <Button onPress={() => Actions.search()} transparent>
+          <Icon name='ios-search-outline' />
+        </Button>
+        <Button onPress={() => Actions.cart()} transparent>
+          <Icon name='ios-cart' />
+        </Button>
+      </Right>
+    );
+    return(
+      <Container style={{backgroundColor: '#fdfdfd'}}>
+        <Navbar left={left} right={right} title="LOGIN" />
+        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingLeft: 50, paddingRight: 50}}>
+          <View style={{marginBottom: 35, width: '100%'}}>
+            <Image source={require('../component/logo.png')} style={{width: 40, height: 40, marginBottom: 7}}/>
+            <Text style={{fontSize: 24, fontWeight: 'bold', textAlign: 'left', width: '100%', color: Colors.navbarBackgroundColor}}>Welcome back, </Text>
+            <Text style={{fontSize: 18, textAlign: 'left', width: '100%', color: '#687373'}}>Login to continue </Text>
+          </View>
+          <Item>
+              <Icon active name='ios-person' style={{color: "#687373"}}  />
+              <Input placeholder='Username' onChangeText={(text) => this.setState({username: text})} placeholderTextColor="#687373" />
+          </Item>
+          <Item>
+              <Icon active name='ios-lock' style={{color: "#687373"}} />
+              <Input placeholder='Password' onChangeText={(text) => this.setState({password: text})} secureTextEntry={true} placeholderTextColor="#687373" />
+          </Item>
+          {this.state.hasError?<Text style={{color: "#c0392b", textAlign: 'center', marginTop: 10}}>{this.state.errorText}</Text>:null}
+          <View style={{alignItems: 'center'}}>
+            <Button onPress={() => this.login()} style={{backgroundColor: Colors.navbarBackgroundColor, marginTop: 20}}>
+              <Text style={{color: '#fdfdfd'}}>Login</Text>
+            </Button>
+          </View>
+        </View>
+      </Container>
+    );
+  }
+
+  login() {
+    /*
+      Remove this code and replace it with your service
+      Username: this.state.username
+      Password: this.state.password
+    */
+    this.setState({hasError: true, errorText: 'Invalid username or password !'});
+  }
+
+
+}

src/page/Product.js

@@ -13,8 +13,6 @@ import Carousel, { Pagination } from 'react-native-snap-carousel';
 import Colors from '../Colors';
 import Text from '../component/Text';
 import Navbar from '../component/Navbar';
-import SideMenu from '../component/SideMenu';
-import SideMenuDrawer from '../component/SideMenuDrawer';
 import {default as ProductComponent} from '../component/Product';
 
 export default class Product extends Component {

src/page/Signup.js

@@ -0,0 +1,121 @@
+/**
+* This is the Signup Page
+**/
+
+// React native and others libraries imports
+import React, { Component } from 'react';
+import { ScrollView } from 'react-native';
+import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base';
+import { Actions } from 'react-native-router-flux';
+
+// Our custom files and classes import
+import Colors from '../Colors';
+import Text from '../component/Text';
+import Navbar from '../component/Navbar';
+
+export default class Signup extends Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+        email: '',
+        name: '',
+        username: '',
+        password: '',
+        rePassword: '',
+        hasError: false,
+        errorText: ''
+      };
+  }
+
+
+  render() {
+    var left = (
+      <Left style={{flex:1}}>
+        <Button onPress={() => Actions.pop()} transparent>
+          <Icon name='ios-arrow-back' />
+        </Button>
+      </Left>
+    );
+    var right = (
+      <Right style={{flex:1}}>
+        <Button onPress={() => Actions.search()} transparent>
+          <Icon name='ios-search-outline' />
+        </Button>
+        <Button onPress={() => Actions.cart()} transparent>
+          <Icon name='ios-cart' />
+        </Button>
+      </Right>
+    );
+    return(
+      <Container style={{backgroundColor: '#fdfdfd'}}>
+        <Navbar left={left} right={right} title="SIGN UP" />
+        <ScrollView contentContainerStyle={{flexGrow: 1}}>
+          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingLeft: 50, paddingRight: 50}}>
+            <View style={{marginBottom: 35, width: '100%'}}>
+              <Text style={{fontSize: 24, fontWeight: 'bold', textAlign: 'left', width: '100%', color: Colors.navbarBackgroundColor}}>Create your account, </Text>
+              <Text style={{fontSize: 18, textAlign: 'left', width: '100%', color: '#687373'}}>Signup to continue </Text>
+            </View>
+            <Item>
+                <Icon active name='ios-mail' style={{color: '#687373'}} />
+                <Input placeholder='Email' onChangeText={(text) => this.setState({email: text})} keyboardType="email-address" placeholderTextColor="#687373" />
+            </Item>
+            <Item>
+                <Icon active name='ios-man' style={{color: '#687373'}} />
+                <Input placeholder='Name' onChangeText={(text) => this.setState({name: text})} placeholderTextColor="#687373" />
+            </Item>
+            <Item>
+                <Icon active name='ios-person' style={{color: '#687373'}} />
+                <Input placeholder='Username' onChangeText={(text) => this.setState({username: text})} placeholderTextColor="#687373" />
+            </Item>
+            <Item>
+                <Icon active name='ios-lock' style={{color: '#687373'}} />
+                <Input placeholder='Password' onChangeText={(text) => this.setState({password: text})} secureTextEntry={true} placeholderTextColor="#687373" />
+            </Item>
+            <Item>
+                <Icon active name='ios-lock' style={{color: '#687373'}} />
+                <Input placeholder='Repeat your password' onChangeText={(text) => this.setState({rePassword: text})} secureTextEntry={true} placeholderTextColor="#687373" />
+            </Item>
+            {this.state.hasError?<Text style={{color: "#c0392b", textAlign: 'center', marginTop: 10}}>{this.state.errorText}</Text>:null}
+            <View style={{alignItems: 'center'}}>
+              <Button onPress={() => this.signup()} style={{backgroundColor: Colors.navbarBackgroundColor, marginTop: 20}}>
+                <Text style={{color: '#fdfdfd'}}>Signup</Text>
+              </Button>
+            </View>
+          </View>
+        </ScrollView>
+      </Container>
+    );
+  }
+
+  signup() {
+    if(this.state.email===""||this.state.name===""||this.state.username===""||this.state.password===""||this.state.rePassword==="") {
+      this.setState({hasError: true, errorText: 'Please fill all fields !'});
+      return;
+    }
+    if(!this.verifyEmail(this.state.email)) {
+      this.setState({hasError: true, errorText: 'Please enter a valid email address !'});
+      return;
+    }
+    if(this.state.username.length < 3) {
+      this.setState({hasError: true, errorText: 'Passwords must contains at least 3 characters !'});
+      return;
+    }
+    if(this.state.password.length < 6) {
+      this.setState({hasError: true, errorText: 'Passwords must contains at least 6 characters !'});
+      return;
+    }
+    if(this.state.password !== this.state.rePassword) {
+      this.setState({hasError: true, errorText: 'Passwords does not match !'});
+      return;
+    }
+    this.setState({hasError: false});
+    Actions.home();
+  }
+
+  verifyEmail(email) {
+    var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return reg.test(email);
+  }
+
+
+}