185 changed files with 65120 additions and 26725 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.envrc
+++ b/.envrc
@ -1,12 +0,0 @@
-#!/usr/bin/env bash
-# ^ added for shellcheck and file-type detection
-
-# Watch & reload direnv on change
-watch_file devshell.toml
-
-if [[ $(type -t use_flake) != function ]]; then
-  echo "ERROR: use_flake function missing."
-  echo "Please update direnv to v2.30.0 or later."
-  exit 1
-fi
-use flake
--- a/.expo/README.md
+++ b/.expo/README.md
@ -1,15 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
--- a/.expo/settings.json
+++ b/.expo/settings.json
@ -1,8 +0,0 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false
-}
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,2 @@
 .log/
 node_modules
-.DS_Store
--- a/api-gateway/src/app.controller.ts
+++ b/api-gateway/src/app.controller.ts
@ -1,8 +1,8 @@
-import { Controller, Get, Post, Put, Body, Param, Delete } from '@nestjs/common';
+import { Controller, Get, Post, Body, Param, Delete } from '@nestjs/common';
 import { AppService } from './app.service';
@Controller()
 export class AppController {
-  constructor(private readonly appService: AppService) { }
+  constructor(private readonly appService: AppService) {}
  // #==== API Users
  @Post('user/createAdminSystem')
  createAdminSystem(
@ -11,12 +11,22 @@ export class AppController {
    @Body('last_name') last_name: string,
    @Body('email') email: string,
    @Body('phone') phone: number,
+    @Body('password') password: string,
    @Body('user_type') user_type: string,
    @Body('status') status: string,
    @Body('date_entry') date_entry: Date,
  ) {
-    return this.appService.createAdminSystem(dni, name, last_name, email, phone,
-      user_type, status, date_entry);
+    return this.appService.createAdminSystem(
+      dni,
+      name,
+      last_name,
+      email,
+      phone,
+      password,
+      user_type,
+      status,
+      date_entry,
+    );
  }

  @Post('user/createGuard')
@ -27,30 +37,24 @@ export class AppController {
    @Body('last_name') last_name: string,
    @Body('email') email: string,
    @Body('phone') phone: number,
+    @Body('password') password: string,
    @Body('user_type') user_type: string,
    @Body('status') status: string,
    @Body('date_entry') date_entry: Date,
    @Body('community_id') community_id: string,
  ) {
-    return this.appService.createGuard(dni, name, last_name, email, phone,
-      user_type, status, date_entry, community_id);
-  }
-
-  @Post('user/createAdminCommunity')
-  createAdminCommunity(
-    //Nombre, Apellidos, Correo electrónico, Cédula, Teléfono, Contraseña
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-    @Body('user_type') user_type: string,
-    @Body('status') status: string,
-    @Body('date_entry') date_entry: Date,
-    @Body('community_id') community_id: string
-  ) {
-    return this.appService.createAdminCommunity(dni, name, last_name, email, phone,
-      user_type, status, date_entry, community_id);
+    return this.appService.createGuard(
+      dni,
+      name,
+      last_name,
+      email,
+      phone,
+      password,
+      user_type,
+      status,
+      date_entry,
+      community_id,
+    );
  }

  @Post('user/createUser')
@ -65,7 +69,6 @@ export class AppController {
    @Body('status') status: string,
    @Body('date_entry') date_entry: Date,
    @Body('community_id') community_id: string,
-    @Body('number_house') number_house: string,
  ) {
    return this.appService.createUser(
      dni,
@ -78,96 +81,6 @@ export class AppController {
      status,
      date_entry,
      community_id,
-      number_house,
-    );
-  }
-
-
-  @Post('user/createTenant')
-  createTenant(
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-    @Body('user_type') user_type: string,
-    @Body('status') status: string,
-    @Body('date_entry') date_entry: Date,
-    @Body('community_id') community_id: string,
-    @Body('number_house') number_house: string,
-  ) {
-    return this.appService.createTenant(
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      user_type,
-      status,
-      date_entry,
-      community_id,
-      number_house,
-    );
-  }
-
-
-  @Put('user/updateGuard/:id')
-  updateGuard(
-    @Param('id') id: string,
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-    @Body('password') password: string,
-    @Body('user_type') user_type: string,
-    @Body('status') status: string,
-    @Body('date_entry') date_entry: Date,
-    @Body('community_id') community_id: string,
-  ) {
-    return this.appService.updateGuard(
-      id,
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      password,
-      user_type,
-      status,
-      date_entry,
-      community_id,
-    );
-  }
-
-  @Put('user/updateUser/:id')
-  updateUser(
-    @Param('id') id: string,
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-    @Body('password') password: string,
-    @Body('user_type') user_type: string,
-    @Body('status') status: string,
-    @Body('date_entry') date_entry: Date,
-    @Body('community_id') community_id: string,
-    @Body('number_house') number_house: string,
-  ) {
-    return this.appService.updateUser(
-      id,
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      password,
-      user_type,
-      status,
-      date_entry,
-      community_id,
-      number_house,
    );
  }

@ -193,118 +106,21 @@ export class AppController {
  allUsersAdminComunidad() {
    return this.appService.allUsersAdminComunidad();
  }
-
  @Get('user/findGuards/:community')
  findGuardsCommunity(@Param('community_id') community_id: string) {
    return this.appService.findGuardsCommunity(community_id);
  }

-  @Get('user/findTenants/:community_id')
-  allUsersTenants(@Param('community_id') paramCommunity_id: string) {
-    return this.appService.findTenantsCommunity(paramCommunity_id);
-  }
-
  @Get('user/find/:dni')
  findUser(@Param('dni') paramUserDNI: string) {
    return this.appService.findUser(paramUserDNI);
  }

-  @Get('user/findUserById/:id')
-  findUserById(@Param('id') id: string) {
-    return this.appService.findUserById(id);
-  }
-
  @Delete('user/deleteAdminSystem/:id')
  deleteAdminSystem(@Param('id') id: string) {
    return this.appService.deleteAdminSystem(id);
  }

-  @Delete('user/deleteAdminCommunity/:id')
-  deleteAdminCommunity(@Param('id') id: string) {
-    return this.appService.deleteAdminCommunity(id);
-  }
-
-  @Put('user/deleteTenant/:id')
-  deleteTenant(
-    @Param('id') id: string,
-    @Body('community_id') community_id: string,
-    @Body('number_house') number_house: string
-  ) {
-    return this.appService.deleteTenant(id, community_id, number_house);
-  }
-
-  @Put('user/resetUserPassword/:id')
-  resetUserPassword(@Param('id') id: string,
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-    @Body('password') password: string,
-    @Body('user_type') user_type: string,
-    @Body('status') status: string,
-    @Body('date_entry') date_entry: Date,
-    @Body('community_id') community_id: string,
-    @Body('number_house') number_house: string,
-  ) {
-    return this.appService.updateUser(
-      id,
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      password,
-      user_type,
-      status,
-      date_entry,
-      community_id,
-      number_house,
-    );
-  }
-
-  @Post('user/changeStatus')
-  changeStatusUser(
-    @Body('id') pId: string,
-    @Body('status') pStatus: string,
-  ) {
-    return this.appService.changeStatusUser(pId, pStatus);
-  }
-
-  @Put('user/updateAdminCommunity/:id')
-  updateAdminCommunity(
-    @Param('id') id: string,
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-    @Body('community_id') community_id: string,
-  ) {
-    return this.appService.updateAdminCommunity(
-      id,
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      community_id,
-    );
-  }
-
-  @Post('user/updateAdminSystem')
-  updateAdminSystem(
-    //Nombre, Apellidos, Correo electrónico, Cédula, Teléfono
-    @Body('_id') _id: string,
-    @Body('dni') dni: string,
-    @Body('name') name: string,
-    @Body('last_name') last_name: string,
-    @Body('email') email: string,
-    @Body('phone') phone: number,
-  ) {
-    return this.appService.updateAdminSystem(_id, dni, name, last_name, email, phone);
-  }
-
  // #==== API Communities
  @Post('community/createCommunity')
  createCommunity(
@ -350,34 +166,7 @@ export class AppController {
  findCommunityAdmin(@Body('community_id') community_id: string) {
    return this.appService.findCommunityAdmin(community_id);
  }
-  @Post('community/changeStatus')
-  changeStatusCommunity(
-    @Body('id') pId: string,
-    @Body('status') pStatus: string,
-  ) {
-    return this.appService.changeStatusCommunity(pId, pStatus);
-  }

-  @Get('community/findHousesCommunity/:id')
-  findHousesCommunity(
-    @Param('id') community_id: string,
-  ) {
-    return this.appService.findHousesCommunity(community_id);
-  }
-
-  @Post('community/saveTenant')
-  saveTenant(
-    @Body('community_id') community_id: string,
-    @Body('number_house') number_house: string,
-    @Body('tenant_id') tenant_id: string,
-  ) {
-    return this.appService.saveTenant(community_id, number_house, tenant_id);
-  }
-
-  @Delete('community/deleteCommunity/:id')
-  deleteCommunity(@Param('id') paramCommunityId: string) {
-    return this.appService.deleteCommunity(paramCommunityId);
-  }
  // #==== API Common Areas
  @Post('commonArea/createCommonArea')
  createCommonArea(
@ -406,25 +195,6 @@ export class AppController {
    return this.appService.findCommonArea(paramCommonAreaId);
  }

-  @Get('commonArea/findByCommunity/:community_id')
-  findByCommunity(@Param('community_id') paramCommunityId: string) {
-    return this.appService.findByCommunity(paramCommunityId);
-  }
-
-
-  @Delete('commonArea/deleteCommonArea/:id')
-  deleteCommonArea(@Param('id') id: string) {
-    return this.appService.deleteCommonArea(id);
-  }
-
-  @Post('commonArea/changeStatus')
-  changeStatusCommonArea(
-    @Body('id') pId: string,
-    @Body('status') pStatus: string,
-  ) {
-    return this.appService.changeStatusCommonArea(pId, pStatus);
-  }
-
  // #==== API GUEST
  //#API userService - create user
  @Post('guest/createGuest')
@ -435,8 +205,6 @@ export class AppController {
    @Body('number_plate') number_plate: string,
    @Body('phone') phone: number,
    @Body('status') status: string,
-    @Body('tenant_id') tenant_id: string,
-    @Body('community_id') community_id: string,
    @Body('date_entry') date_entry: Date,
  ) {
    return this.appService.createGuest(
@ -446,8 +214,6 @@ export class AppController {
      number_plate,
      phone,
      status,
-      tenant_id,
-      community_id,
      date_entry,
    );
  }
@ -462,12 +228,6 @@ export class AppController {
    return this.appService.findGuest(paramGuestDNI);
  }

-  @Get('guest/findGuestUser/:id')
-  findGuestUser(@Param('id') paramGuestId: string) {
-    return this.appService.findGuestUser(paramGuestId);
-  }
-
-
  // #==== API Payment

  @Post('payment/createPayment')
@ -511,8 +271,6 @@ export class AppController {
    @Body('date_entry') date_entry: Date,
    @Body('user_id') user_id: string,
    @Body('common_area_id') common_area_id: string,
-    @Body('common_area_name') common_area_name: string,
-    @Body('communty_id') communty_id: string,
  ) {
    return this.appService.createReservation(
      start_time,
@ -521,8 +279,6 @@ export class AppController {
      date_entry,
      user_id,
      common_area_id,
-      common_area_name,
-      communty_id,
    );
  }

@ -536,12 +292,6 @@ export class AppController {
    return this.appService.findReservation(paramReservation);
  }

-  @Get('reservation/findReservations/:id')
-  findReservations(@Param('id') community_id: string) {
-    return this.appService.findReservations(community_id);
-  }
-
-  
  // #==== API Post

  @Post('post/createPost')
@ -564,11 +314,6 @@ export class AppController {
    return this.appService.findPost(paramPost);
  }

-  @Delete('post/deletePost/:id')
-  deletePost(@Param('id') id: string) {
-    return this.appService.deletePost(id);
-  }
-
  // #==== API Comment

  @Post('post/createComment')
--- a/api-gateway/src/app.service.ts
+++ b/api-gateway/src/app.service.ts
@ -1,7 +1,6 @@
 import { Injectable, Inject } from '@nestjs/common';
 import { ClientProxy } from '@nestjs/microservices';
 import { map } from 'rxjs/operators';
-import { lastValueFrom } from 'rxjs';

@Injectable()
 export class AppService {
@ -19,7 +18,7 @@ export class AppService {
    @Inject('SERVICIO_REPORTES') private readonly clientReportApp: ClientProxy,
    @Inject('SERVICIO_NOTIFICACIONES')
    private readonly clientNotificationtApp: ClientProxy,
-  ) { }
+  ) {}

  // ====================== USERS ===============================

@ -35,7 +34,6 @@ export class AppService {
    status: string,
    date_entry: Date,
    community_id: string,
-    number_house: string,
  ) {
    const pattern = { cmd: 'createUser' };
    const payload = {
@ -49,174 +47,71 @@ export class AppService {
      status: status,
      date_entry: date_entry,
      community_id: community_id,
-      number_house: number_house,
    };
    return this.clientUserApp
      .send<string>(pattern, payload)
      .pipe(map((message: string) => ({ message })));
  }

-  createTenant(
-    dni: string,
-    name: string,
-    last_name: string,
-    email: string,
-    phone: number,
-    user_type: string,
-    status: string,
-    date_entry: Date,
-    community_id: string,
-    number_house: string,
-  ) {
-    const pattern = { cmd: 'createTenant' };
-    const payload = {
-      dni: dni,
-      name: name,
-      last_name: last_name,
-      email: email,
-      phone: phone,
-      password: this.generatePassword(),
-      user_type: user_type,
-      status: status,
-      date_entry: date_entry,
-      community_id: community_id,
-      number_house: number_house,
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-  updateUser(
-    _id: string,
-    dni: string,
-    name: string,
-    last_name: string,
-    email: string,
-    phone: number,
-    password: string,
-    user_type: string,
-    status: string,
-    date_entry: Date,
-    community_id: string,
-    number_house: string,
-  ) {
-    const pattern = { cmd: 'updateUser' };
-    const payload = {
-      id: _id,
-      dni: dni,
-      name: name,
-      last_name: last_name,
-      email: email,
-      phone: phone,
-      password: password,
-      user_type: user_type,
-      status: status,
-      date_entry: date_entry,
-      community_id: community_id,
-      number_house: number_house,
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-  updateGuard(
-    _id: string,
-    dni: string,
-    name: string,
-    last_name: string,
-    email: string,
-    phone: number,
-    password: string,
-    user_type: string,
-    status: string,
-    date_entry: Date,
-    community_id: string,
-  ) {
-    const pattern = { cmd: 'updateGuard' };
-    const payload = {
-      id: _id,
-      dni: dni,
-      name: name,
-      last_name: last_name,
-      email: email,
-      phone: phone,
-      password: password,
-      user_type: user_type,
-      status: status,
-      date_entry: date_entry,
-      community_id: community_id,
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-  updateAdminCommunity(
-    id: string,
-    dni: string,
-    name: string,
-    last_name: string,
-    email: string,
-    phone: number,
-    community_id: string,
-  ) {
-    const pattern = { cmd: 'updateAdminCommunity' };
-    const payload = {
-      _id: id,
-      dni: dni,
-      name: name,
-      last_name: last_name,
-      email: email,
-      phone: phone,
-      community_id: community_id,
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
  //POST parameter from API
-  createAdminSystem(dni: string, name: string, last_name: string, email: string, phone: number
-    , user_type: string, status: string, date_entry: Date) {
+  createAdminSystem(
+    dni: string,
+    name: string,
+    last_name: string,
+    email: string,
+    phone: number,
+    password: string,
+    user_type: string,
+    status: string,
+    date_entry: Date,
+  ) {
    const pattern = { cmd: 'createAdminSystem' };
    const payload = {
-      dni: dni, name: name, last_name: last_name, email: email, phone: phone,
-      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry
+      dni: dni,
+      name: name,
+      last_name: last_name,
+      email: email,
+      phone: phone,
+      password: password,
+      user_type: user_type,
+      status: status,
+      date_entry: date_entry,
    };
    return this.clientUserApp
      .send<string>(pattern, payload)
      .pipe(map((message: string) => ({ message })));
  }

-  createGuard(dni: string, name: string, last_name: string, email: string, phone: number
-    , user_type: string, status: string, date_entry: Date, community_id: string) {
+  createGuard(
+    dni: string,
+    name: string,
+    last_name: string,
+    email: string,
+    phone: number,
+    password: string,
+    user_type: string,
+    status: string,
+    date_entry: Date,
+    community_id: string,
+  ) {
    const pattern = { cmd: 'createGuard' };
    const payload = {
-      dni: dni, name: name, last_name: last_name, email: email, phone: phone,
-      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
-
+      dni: dni,
+      name: name,
+      last_name: last_name,
+      email: email,
+      phone: phone,
+      password: password,
+      user_type: user_type,
+      status: status,
+      date_entry: date_entry,
+      community_id,
    };
    return this.clientUserApp
      .send<string>(pattern, payload)
      .pipe(map((message: string) => ({ message })));
  }

-
-  createAdminCommunity(dni: string, name: string, last_name: string, email: string, phone: number
-    , user_type: string, status: string, date_entry: Date, community_id: string) {
-    const pattern = { cmd: 'createAdminCommunity' };
-    const payload = {
-      dni: dni, name: name, last_name: last_name, email: email, phone: phone,
-      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
-
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(
-        map((message: string) => ({ message })),
-      );
-  }
-
  allUsers() {
    const pattern = { cmd: 'findAllUsers' };
    const payload = {};
@ -225,22 +120,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  resetUserPassword(id: string, dni: string, name: string, last_name: string, email: string, phone: number
-    , user_type: string, status: string, date_entry: Date, community_id: string) {
-    const pattern = { cmd: 'resetUserPassword' };
-
-    const payload = {
-      id: id, dni: dni, name: name, last_name: last_name, email: email, phone: phone,
-      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
-
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(
-        map((message: string) => ({ message })),
-      );
-  }
-
  allUsersAdminSistema() {
    const pattern = { cmd: 'findAdminSistema' };
    const payload = {};
@ -257,17 +136,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  allUsersTenants() {
-    const pattern = { cmd: 'findTenants' };
-    const payload = {};
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(
-        map((message: string) => ({ message })),
-      );
-  }
-
-
  //GET parameter from API
  findUser(paramUserDNI: string) {
    const pattern = { cmd: 'findUserDNI' };
@ -285,14 +153,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  findTenantsCommunity(community_id: string) {
-    const pattern = { cmd: 'findTenantsCommunity' };
-    const payload = { community_id: community_id };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
  deleteAdminSystem(id: string) {
    const pattern = { cmd: 'deleteAdminSystem' };
    const payload = { id: id };
@ -301,22 +161,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  deleteAdminCommunity(id: string) {
-    const pattern = { cmd: 'deleteAdminCommunity' };
-    const payload = { id: id };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-  deleteTenant(id: string, community_id: string, number_house: string) {
-    const pattern = { cmd: 'deleteTenant' };
-    const payload = { _id: id, community_id: community_id, number_house: number_house };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
  inicioSesion(pEmail: string, pPassword: string) {
    const pattern = { cmd: 'loginUser' };
    const payload = { email: pEmail, password: pPassword };
@ -325,19 +169,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  updateAdminSystem(_id: string, dni: string, name: string,
-    last_name: string, email: string, phone: number
-  ) {
-    const pattern = { cmd: 'updateAdminSystem' };
-    const payload = {
-      _id: _id, dni: dni, name: name, last_name: last_name,
-      email: email, phone: phone
-    };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
  //GET parameter from API
  findCommunityAdmin(community_id: string) {
    const pattern = { cmd: 'findCommunityAdmin' };
@ -347,37 +178,20 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-
-  //GET parameter from API
-  findUserById(id: string) {
-    const pattern = { cmd: 'findById' };
-    const payload = { id: id };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-  changeStatusUser(pId: string, pStatus: string) {
-    const pattern = { cmd: 'changeStatus' };
-    const payload = { id: pId, status: pStatus };
-    return this.clientUserApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-
  // ====================== COMMUNITIES ===============================
-  changeStatusCommunity(pId: string, pStatus: string) {
-    const pattern = { cmd: 'changeStatus' };
-    const payload = { id: pId, status: pStatus };
-    return this.clientCommunityApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }

  //POST parameter from API
-  createCommunity(name: string, province: string, canton: string, district: string
-    , num_houses: number, phone: string, status: string, date_entry: Date, houses: []) {
+  createCommunity(
+    name: string,
+    province: string,
+    canton: string,
+    district: string,
+    num_houses: number,
+    phone: string,
+    status: string,
+    date_entry: Date,
+    houses: [],
+  ) {
    const pattern = { cmd: 'createCommunity' };
    const payload = {
      name: name,
@ -420,40 +234,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-
-  async findHousesCommunity(community_id: string) {
-    const pattern = { cmd: 'findOneCommunity' }
-    const payload = { _id: community_id }
-
-    let callback = await this.clientCommunityApp
-      .send<string>(pattern, payload)
-      .pipe(
-        map((response: string) => ({ response }))
-      )
-    const finalValue = await lastValueFrom(callback);
-    const response = finalValue['response'];
-    const houses = response['houses'];
-
-    return houses;
-  }
-
-  saveTenant(id: string, number_house: string, tenant_id: string) {
-    const pattern = { cmd: 'saveTenant' };
-    const payload = { _id: id, number_house: number_house, tenant_id: tenant_id };
-    return this.clientCommunityApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-  deleteCommunity(id: string) {
-    const pattern = { cmd: 'removeCommunity' };
-    const payload = { _id: id };
-    return this.clientCommunityApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-
  // ====================== COMMON AREAS ===============================
  //POST parameter from API
  createCommonArea(
@ -470,7 +250,6 @@ export class AppService {
      hourMax: hourMax,
      bookable: bookable,
      community_id: community_id,
-      status: '1'
    };
    return this.clientCommonAreaApp
      .send<string>(pattern, payload)
@ -494,35 +273,6 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-
-  //GET parameter from API
-  findByCommunity(paramCommunityId: string) {
-    const pattern = { cmd: 'findByCommunity' };
-    const payload = { community_id: paramCommunityId };
-    return this.clientCommonAreaApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-
-  //DELETE parameter from API
-  deleteCommonArea(paramCommonAreaId: string) {
-    const pattern = { cmd: 'removeCommonArea' };
-    const payload = { id: paramCommonAreaId };
-    return this.clientCommonAreaApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-  changeStatusCommonArea(pId: string, pStatus: string) {
-    const pattern = { cmd: 'changeStatus' };
-    const payload = { id: pId, status: pStatus };
-    return this.clientCommonAreaApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
-
  // ====================== GUESTS ===============================

  //POST parameter from API
@ -533,14 +283,17 @@ export class AppService {
    number_plate: string,
    phone: number,
    status: string,
-    tenant_id: string,
-    community_id: string,
    date_entry: Date,
  ) {
    const pattern = { cmd: 'createGuest' };
    const payload = {
-      name: name, last_name: last_name, dni: dni, number_plate: number_plate, phone: phone,
-      status: status,tenant_id:tenant_id, community_id:community_id,date_entry: date_entry
+      name: name,
+      last_name: last_name,
+      dni: dni,
+      number_plate: number_plate,
+      phone: phone,
+      status: status,
+      date_entry: date_entry,
    };
    return this.clientGuestApp
      .send<string>(pattern, payload)
@ -563,15 +316,8 @@ export class AppService {
      .send<string>(pattern, payload)
      .pipe(map((message: string) => ({ message })));
  }
-  //GET parameter from API
-  findGuestUser(paramGuestId: string) {
-    const pattern = { cmd: 'findGuestUser' };
-    const payload = { di: paramGuestId };
-    return this.clientGuestApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-  // ====================== PAYMENTS =============================== 
+
+  // ====================== PAYMENTS ===============================

  //POST parameter from API
  createPayment(
@ -585,8 +331,13 @@ export class AppService {
  ) {
    const pattern = { cmd: 'createPayment' };
    const payload = {
-      date_payment: date_payment, mount: mount, description: description,
-      period: period, status: status, user_id: user_id, communty_id: communty_id
+      date_payment: date_payment,
+      mount: mount,
+      description: description,
+      period: period,
+      status: status,
+      user_id: user_id,
+      communty_id: communty_id,
    };
    return this.clientPaymentApp
      .send<string>(pattern, payload)
@ -613,14 +364,22 @@ export class AppService {
  // ====================== RESERVATIONS ===============================

  //POST parameter from API
-  createReservation(start_time: string, finish_time: string, status: string,
-    date_entry: Date, user_id: string, common_area_id: string, 
-    common_area_name: string, communty_id: string) {
+  createReservation(
+    start_time: string,
+    finish_time: string,
+    status: string,
+    date_entry: Date,
+    user_id: string,
+    common_area_id: string,
+  ) {
    const pattern = { cmd: 'createReservation' };
    const payload = {
-      start_time: start_time, finish_time: finish_time, status: status,
-      date_entry: date_entry, user_id: user_id, common_area_id: common_area_id, 
-      common_area_name: common_area_name, communty_id: communty_id
+      start_time: start_time,
+      finish_time: finish_time,
+      status: status,
+      date_entry: date_entry,
+      user_id: user_id,
+      common_area_id: common_area_id,
    };
    return this.clientReservationApp
      .send<string>(pattern, payload)
@ -644,23 +403,21 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  findReservations(community_id: string) {
-    const pattern = { cmd: 'findReservationsByCommunity' };
-    const payload = { community_id: community_id };
-    return this.clientReservationApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
  // ====================== POSTS ===============================

  //POST parameter from API
-  createPost(post: string, date_entry: Date, user_id: string,
-    community_id: string) {
+  createPost(
+    post: string,
+    date_entry: Date,
+    user_id: string,
+    community_id: string,
+  ) {
    const pattern = { cmd: 'createPost' };
    const payload = {
-      post: post, date_entry: date_entry, user_id: user_id,
-      community_id: community_id
+      post: post,
+      date_entry: date_entry,
+      user_id: user_id,
+      community_id: community_id,
    };
    return this.clientPostApp
      .send<string>(pattern, payload)
@ -684,24 +441,21 @@ export class AppService {
      .pipe(map((message: string) => ({ message })));
  }

-  //DELETE
-  deletePost(paramPostId: string) {
-    const pattern = { cmd: 'removePost' };
-    const payload = { id: paramPostId };
-    return this.clientPostApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
-
  // ====================== COMMNENT POSTS ===============================

  //Comment parameter from API
-  createComment(comment: string, date_entry: Date, user_id: string,
-    post_id: string) {
+  createComment(
+    comment: string,
+    date_entry: Date,
+    user_id: string,
+    post_id: string,
+  ) {
    const pattern = { cmd: 'createComment' };
    const payload = {
-      comment: comment, date_entry: date_entry, user_id: user_id,
-      post_id: post_id
+      comment: comment,
+      date_entry: date_entry,
+      user_id: user_id,
+      post_id: post_id,
    };
    return this.clientPostApp
      .send<string>(pattern, payload)
@ -728,12 +482,18 @@ export class AppService {
  // ====================== REPORTS ===============================

  //Report parameter from API
-  createReport(action: string, description: string, date_entry: Date,
-    user_id: string) {
+  createReport(
+    action: string,
+    description: string,
+    date_entry: Date,
+    user_id: string,
+  ) {
    const pattern = { cmd: 'createReport' };
    const payload = {
-      action: action, description: description, date_entry: date_entry,
-      user_id: user_id
+      action: action,
+      description: description,
+      date_entry: date_entry,
+      user_id: user_id,
    };
    return this.clientReportApp
      .send<string>(pattern, payload)
@ -772,22 +532,4 @@ export class AppService {
      .send<string>(pattern, payload)
      .pipe(map((message: string) => ({ message })));
  }
-
-
-
-  /* Function to generate combination of password */
-  generatePassword() {
-    var pass = '';
-    var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
-      'abcdefghijklmnopqrstuvwxyz0123456789@#$';
-
-    for (let i = 1; i <= 8; i++) {
-      var char = Math.floor(Math.random()
-        * str.length + 1);
-
-      pass += str.charAt(char)
-    }
-
-    return pass;
-  }
 }
--- a/devshell.toml
+++ b/devshell.toml
@ -1,13 +0,0 @@
-# https://numtide.github.io/devshell
-[[commands]]
-package = "devshell.cli"
-help = "Per project developer environments"
-
-[[commands]]
-package = "nodejs"
-help = "Node.js"
-
-[[commands]]
-package = "nodePackages.expo-cli"
-help = "Expo CLI"
-
--- a/flake.lock
+++ b/flake.lock
@ -1,92 +0,0 @@
-{
-  "nodes": {
-    "devshell": {
-      "inputs": {
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs"
-      },
-      "locked": {
-        "lastModified": 1658746384,
-        "narHash": "sha256-CCJcoMOcXyZFrV1ag4XMTpAPjLWb4Anbv+ktXFI1ry0=",
-        "owner": "numtide",
-        "repo": "devshell",
-        "rev": "0ffc7937bb5e8141af03d462b468bd071eb18e1b",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "devshell",
-        "type": "github"
-      }
-    },
-    "flake-utils": {
-      "locked": {
-        "lastModified": 1642700792,
-        "narHash": "sha256-XqHrk7hFb+zBvRg6Ghl+AZDq03ov6OshJLiSWOoX5es=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "846b2ae0fc4cc943637d3d1def4454213e203cba",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "flake-utils_2": {
-      "locked": {
-        "lastModified": 1656928814,
-        "narHash": "sha256-RIFfgBuKz6Hp89yRr7+NR5tzIAbn52h8vT6vXkYjZoM=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "7e2a3b3dfd9af950a856d66b0a7d01e3c18aa249",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1643381941,
-        "narHash": "sha256-pHTwvnN4tTsEKkWlXQ8JMY423epos8wUOhthpwJjtpc=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "5efc8ca954272c4376ac929f4c5ffefcc20551d5",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "nixpkgs_2": {
-      "locked": {
-        "lastModified": 1659782844,
-        "narHash": "sha256-tM/qhHFE61puBxh9ebP3BIG1fkRAT4rHqD3jCM0HXGY=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "c85e56bb060291eac3fb3c75d4e0e64f6836fcfe",
-        "type": "github"
-      },
-      "original": {
-        "id": "nixpkgs",
-        "type": "indirect"
-      }
-    },
-    "root": {
-      "inputs": {
-        "devshell": "devshell",
-        "flake-utils": "flake-utils_2",
-        "nixpkgs": "nixpkgs_2"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}
--- a/flake.nix
+++ b/flake.nix
@ -1,20 +0,0 @@
-{
-  description = "virtual environments";
-
-  inputs.devshell.url = "github:numtide/devshell";
-  inputs.flake-utils.url = "github:numtide/flake-utils";
-
-  outputs = { self, flake-utils, devshell, nixpkgs }:
-    flake-utils.lib.eachDefaultSystem (system: {
-      devShell =
-        let pkgs = import nixpkgs {
-          inherit system;
-
-          overlays = [ devshell.overlay ];
-        };
-        in
-        pkgs.devshell.mkShell {
-          imports = [ (pkgs.devshell.importTOML ./devshell.toml) ];
-        };
-    });
-}
--- a/mobile-ui/.gitignore
+++ b/mobile-ui/.gitignore
@ -1,5 +1,6 @@
 node_modules/
 .expo/
+dist/
 npm-debug.*
 *.jks
 *.p8
@ -8,6 +9,6 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-.vscode
+
+# macOS
 .DS_Store
-package-lock.json
--- a/mobile-ui/App.js
+++ b/mobile-ui/App.js
@ -1,75 +1,123 @@
-import React, { useContext, useState } from "react";
-import {
-  NativeBaseProvider,
-  Icon
-} from "native-base";
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import LogIn from "./components/LogIn";
-import Home from "./components/Home";
-import RecoverPassword from "./components/RecoverPassword";
-import Reservas from "./components/Reservas";
-import Profile from "./components/Profile";
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import AreaComun from "./components/AreaComun";
-import { UserContext, UserContextProvider } from "./context/UserContext";
-import AgregarInvitados from "./components/AgregarInvitados";
-import Invitados from "./components/Invitados"
+import React, {useState} from "react";
+import { Image } from "react-native";
+import AppLoading from "expo-app-loading";
+import { useFonts } from '@use-expo/font';
+import { Asset } from "expo-asset";
+import { Block, GalioProvider } from "galio-framework";
+import { NavigationContainer } from "@react-navigation/native";

-const Stack = createNativeStackNavigator();
-const Tab = createBottomTabNavigator();
+// Before rendering any navigation stack
+import { enableScreens } from "react-native-screens";
+enableScreens();

-function HomeTab({ route }) {
-  const { user } = useContext(UserContext);
-  const [selected, setSelected] = useState(0);
+import Screens from "./navigation/Screens";
+import { Images, articles, argonTheme } from "./constants";

-  return (
+// cache app images
+const assetImages = [
+  Images.Onboarding,
+  Images.LogoOnboarding,
+  Images.Logo,
+  Images.Pro,
+  Images.ArgonLogo,
+  Images.iOSLogo,
+  Images.androidLogo
+];

-    <Tab.Navigator initialParams={user} initialRouteName="Comunicados" > 
-    <Tab.Screen  name="Comunicados" component={Home}  initialParams={user} options={{headerStyle: {
-      backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
-     /> 
-    <Tab.Screen  name="Reservas" component={Reservas } initialParams={user} options={{headerStyle: {
-      backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
-        <Tab.Screen  name="Invitados" component={Invitados} initialParams={user} options={{headerStyle: {
-      backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'contacts' : 'contacts-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
-    <Tab.Screen  name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
-      backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
-  </Tab.Navigator>
+// cache product images
+articles.map(article => assetImages.push(article.image));

-  )
+function cacheImages(images) {
+  return images.map(image => {
+    if (typeof image === "string") {
+      return Image.prefetch(image);
+    } else {
+      return Asset.fromModule(image).downloadAsync();
+    }
+  });
 }
-export default function App() {
-  return (
-    <NativeBaseProvider>
-      <UserContextProvider>
-        <NavigationContainer>
-          <Stack.Navigator initialRouteName="LogIn">
-            <Stack.Screen name="Inicio" component={LogIn} options={{
-              headerStyle: {
-                backgroundColor: "#D7A86E"
-              }
-            }} />
-            <Stack.Screen name="Comunicados" component={HomeTab} options={{ headerShown: false }} />
-            <Stack.Screen name="Password" component={RecoverPassword} />
-            <Stack.Screen name="area" component={AreaComun} options={{
-              headerStyle: {
-                backgroundColor: "#D7A86E"
-              }
-            }} />
-             <Stack.Screen name="invitado" component={AgregarInvitados} options={{
-              headerStyle: {
-                backgroundColor: "#D7A86E"
-              }
-            }} />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </UserContextProvider>
-    </NativeBaseProvider>
-  );
+
+export default props => {
+  const [isLoadingComplete, setLoading] = useState(false);
+  let [fontsLoaded] = useFonts({
+    'ArgonExtra': require('./assets/font/argon.ttf'),
+  });
+
+  function _loadResourcesAsync() {
+    return Promise.all([...cacheImages(assetImages)]);
+  }
+
+  function _handleLoadingError(error) {
+    // In this case, you might want to report the error to your error
+    // reporting service, for example Sentry
+    console.warn(error);
+  };
+
+ function _handleFinishLoading() {
+    setLoading(true);
+  };
+
+  if(!fontsLoaded && !isLoadingComplete) {
+    return (
+      <AppLoading
+        startAsync={_loadResourcesAsync}
+        onError={_handleLoadingError}
+        onFinish={_handleFinishLoading}
+      />
+    );
+  } else if(fontsLoaded) {
+    return (
+      <NavigationContainer>
+        <GalioProvider theme={argonTheme}>
+          <Block flex>
+            <Screens />
+          </Block>
+        </GalioProvider>
+      </NavigationContainer>
+    );
+  } else {
+    return null
+  }
 }
+
+// export default class App extends React.Component {
+//   state = {
+//     isLoadingComplete: false
+//   };
+
+//   render() {
+//     if (!this.state.isLoadingComplete) {
+//       return (
+//         <AppLoading
+//           startAsync={this._loadResourcesAsync}
+//           onError={this._handleLoadingError}
+//           onFinish={this._handleFinishLoading}
+//         />
+//       );
+//     } else {
+//       return (
+//         <NavigationContainer>
+//           <GalioProvider theme={argonTheme}>
+//             <Block flex>
+//               <Screens />
+//             </Block>
+//           </GalioProvider>
+//         </NavigationContainer>
+//       );
+//     }
+//   }
+
+//   _loadResourcesAsync = async () => {
+//     return Promise.all([...cacheImages(assetImages)]);
+//   };
+
+//   _handleLoadingError = error => {
+//     // In this case, you might want to report the error to your error
+//     // reporting service, for example Sentry
+//     console.warn(error);
+//   };
+
+//   _handleFinishLoading = () => {
+//     this.setState({ isLoadingComplete: true });
+//   };
+// }
--- a/mobile-ui/App.tsx
+++ b/mobile-ui/App.tsx
@ -0,0 +1,25 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+//import { NavigationContainer } from "@react-navigation/native";
+import { Button } from './components';
+
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+
+      <Button>testing</Button>
+      <Text>Open up App.tsx to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
--- a/mobile-ui/Readme.md
+++ b/mobile-ui/Readme.md
@ -1,9 +0,0 @@
-# NativeBase Expo Template
-
-The official NativeBase template for [Expo](https://docs.expo.io/)
-
-## Usage
-
-```sh
-expo init my-app --template @native-base/expo-template
-```
--- a/mobile-ui/app.json
+++ b/mobile-ui/app.json
@ -1,13 +1,18 @@
 {
  "expo": {
-    "name": "my-app",
-    "slug": "my-app",
-    "version": "1.0.0",
+    "name": "Argon FREE React Native",
+    "slug": "argon-free-react-native",
+    "privacy": "public",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.7.1",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
-      "resizeMode": "contain",
+      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
@ -17,25 +22,8 @@
      "**/*"
    ],
    "ios": {
-      "supportsTablet": true,
-      "infoPlist": {
-        "NSAppTransportSecurity": {
-          "NSAllowsArbitraryLoads" : true,
-          "NSAllowsArbitraryLoadsForMedia": true, 
-          "NSAllowsArbitraryLoadsInWebContent": true, 
-          "NSExceptionAllowsInsecureHTTPLoads": true
-        }
-      },
-      "bundleIdentifier": "1.1.0"
+      "supportsTablet": true
    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
+    "description": "Argon React Native, based on Argon Design System. Coded by Creative Tim"
  }
 }
--- a/mobile-ui/assets/adaptive-icon.png
+++ b/mobile-ui/assets/adaptive-icon.png
--- a/mobile-ui/assets/config/argon.json
+++ b/mobile-ui/assets/config/argon.json
--- a/mobile-ui/assets/favicon.png
+++ b/mobile-ui/assets/favicon.png
--- a/mobile-ui/assets/font/argon.ttf
+++ b/mobile-ui/assets/font/argon.ttf
--- a/mobile-ui/assets/icon.png
+++ b/mobile-ui/assets/icon.png
--- a/mobile-ui/assets/imgs/android.png
+++ b/mobile-ui/assets/imgs/android.png
--- a/mobile-ui/assets/imgs/argon-logo-onboarding.png
+++ b/mobile-ui/assets/imgs/argon-logo-onboarding.png
--- a/mobile-ui/assets/imgs/argon-logo-onboarding@2x.png
+++ b/mobile-ui/assets/imgs/argon-logo-onboarding@2x.png
--- a/mobile-ui/assets/imgs/argon-logo.png
+++ b/mobile-ui/assets/imgs/argon-logo.png
--- a/mobile-ui/assets/imgs/argon-logo@2x.png
+++ b/mobile-ui/assets/imgs/argon-logo@2x.png
--- a/mobile-ui/assets/imgs/argonlogo.png
+++ b/mobile-ui/assets/imgs/argonlogo.png
--- a/mobile-ui/assets/imgs/bg.png
+++ b/mobile-ui/assets/imgs/bg.png
--- a/mobile-ui/assets/imgs/getPro-bg.png
+++ b/mobile-ui/assets/imgs/getPro-bg.png
--- a/mobile-ui/assets/imgs/getPro-bg@2x.png
+++ b/mobile-ui/assets/imgs/getPro-bg@2x.png
--- a/mobile-ui/assets/imgs/icon.png
+++ b/mobile-ui/assets/imgs/icon.png
--- a/mobile-ui/assets/imgs/ios.png
+++ b/mobile-ui/assets/imgs/ios.png
--- a/mobile-ui/assets/imgs/profile-screen-bg.png
+++ b/mobile-ui/assets/imgs/profile-screen-bg.png
--- a/mobile-ui/assets/imgs/register-bg.png
+++ b/mobile-ui/assets/imgs/register-bg.png
--- a/mobile-ui/assets/imgs/splash.png
+++ b/mobile-ui/assets/imgs/splash.png
--- a/mobile-ui/assets/logo-katoikia.png
+++ b/mobile-ui/assets/logo-katoikia.png
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20,0H4C2.3,0,1,1.3,1,3v20c0,0.6,0.4,1,1,1h20c0.6,0,1-0.4,1-1V3C23,1.3,21.7,0,20,0z M12,16 c-3.3,0-6-2.7-6-6c0-0.6,0.4-1,1-1s1,0.4,1,1c0,2.2,1.8,4,4,4s4-1.8,4-4c0-0.6,0.4-1,1-1s1,0.4,1,1C18,13.3,15.3,16,12,16z M20,4H4 C3.4,4,3,3.6,3,3s0.4-1,1-1h16c0.6,0,1,0.4,1,1S20.6,4,20,4z"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M1,10.5A1.5,1.5,0,0,0,2.5,12h7A1.5,1.5,0,0,0,11,10.5V7H1Z" fill="#444444"/> <path d="M9.838,4,8.171.665a.75.75,0,0,0-1.342.67L8.162,4H3.838L5.171,1.335A.75.75,0,0,0,3.829.665L2.162,4H0V6H12V4Z" fill="#444444" data-color="color-2"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M20,10V8A8,8,0,0,0,4,8v2a4.441,4.441,0,0,1-1.547,3.193A4.183,4.183,0,0,0,1,16c0,2.5,4.112,4,11,4s11-1.5,11-4a4.183,4.183,0,0,0-1.453-2.807A4.441,4.441,0,0,1,20,10Z" fill="#444444"/> <path data-color="color-2" d="M9.145,21.9a2.992,2.992,0,0,0,5.71,0c-.894.066-1.844.1-2.855.1S10.039,21.968,9.145,21.9Z" fill="#444444"/></g></svg>
--- a/icons/svg/calendar-date.svg
+++ b/icons/svg/calendar-date.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect data-color="color-2" x="4" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="4" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="16" y="10" width="4" height="3" fill="#444444"/> <path d="M23,3H18V1a1,1,0,0,0-2,0V3H8V1A1,1,0,0,0,6,1V3H1A1,1,0,0,0,0,4V22a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V4A1,1,0,0,0,23,3ZM22,21H2V7H22Z" fill="#444444"/></g></svg>
--- a/icons/svg/chart-pie-35.svg
+++ b/icons/svg/chart-pie-35.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M13,11h10.949C23.466,5.181,18.819,0.534,13,0.051V11z"/> <path fill="#444444" d="M12.414,13l-8.155,8.155C6.351,22.926,9.051,24,12,24c6.279,0,11.438-4.851,11.949-11H12.414z"/> <path fill="#444444" d="M11,11.586V0.051C4.851,0.562,0,5.721,0,12c0,2.949,1.074,5.649,2.845,7.741L11,11.586z"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M18.768,1.36C18.578,1.132,18.297,1,18,1H6C5.703,1,5.422,1.132,5.232,1.36l-5,6 c-0.294,0.353-0.31,0.861-0.039,1.231l11,15C11.382,23.848,11.682,24,12,24s0.618-0.152,0.807-0.409l11-15 c0.271-0.371,0.256-0.878-0.039-1.231L18.768,1.36z M19,9H5V7h14V9z"/></g></svg>
--- a/icons/svg/engine-start.svg
+++ b/icons/svg/engine-start.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path d="M8,15A7,7,0,0,1,3.333,2.783l1.334,1.49a5,5,0,1,0,6.666,0l1.333-1.49A7,7,0,0,1,8,15Z" fill="#444444"/> <rect x="7" width="2" height="7" fill="#444444" data-color="color-2"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M16,3.6L15.2,2C8.3,4,4.8,8.4,4.8,8.4L1.6,6L0,7.6L4.8,14C8.5,7.1,16,3.6,16,3.6z"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect x="22" y="11" fill="#444444" width="2" height="6"/> <path data-color="color-2" fill="#444444" d="M13.241,15.73C12.847,15.91,12.43,16,12,16s-0.847-0.09-1.24-0.269L4,12.658V18 c0,2.626,4.024,4,8,4s8-1.374,8-4v-5.341L13.241,15.73z"/> <path fill="#444444" d="M23.414,7.09l-11-5c-0.263-0.119-0.564-0.119-0.827,0l-11,5C0.229,7.252,0,7.607,0,8s0.229,0.748,0.586,0.91 l11,5C11.718,13.97,11.859,14,12,14s0.282-0.03,0.414-0.09l11-5C23.771,8.748,24,8.393,24,8S23.771,7.252,23.414,7.09z"/></g></svg>
--- a/icons/svg/ic_mail_24px.svg
+++ b/icons/svg/ic_mail_24px.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g class="nc-icon-wrapper" fill="#444444">
+        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+    </g>
+</svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><polygon fill="#444444" points="17,1.382 13,3.382 13,22.618 17,20.618 "/> <polygon data-color="color-2" fill="#444444" points="11,3.382 7,1.382 7,20.618 11,22.618 "/> <path fill="#444444" d="M5,1.434L0.485,4.143C0.185,4.323,0,4.648,0,5v19l5-3.234V1.434z"/> <path data-color="color-2" fill="#444444" d="M23.515,4.143L19,1.434v19.332L24,24V5C24,4.648,23.815,4.323,23.515,4.143z"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M11,9H1a1,1,0,0,0,0,2H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,1H1A1,1,0,0,0,1,3H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,5H1A1,1,0,0,0,1,7H11a1,1,0,0,0,0-2Z" fill="#444444" data-color="color-2"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="6 5.882 2.148 2.03 0.074 4.104 6 10.03 11.926 4.104 9.852 2.03 6 5.882" fill="#444444"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="7.92 0 1.92 6 7.92 12 10.02 9.9 6.12 6 10.02 2.1 7.92 0" fill="#444444"></polygon></g></svg>
--- a/icons/svg/nav-right.svg
+++ b/icons/svg/nav-right.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="1.98 2.1 5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1" fill="#444444"/></g></svg>
--- a/icons/svg/padlock-unlocked.svg
+++ b/icons/svg/padlock-unlocked.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,2c0.6,0,1.1,0.2,1.5,0.7l0.7,0.7l1.5-1.3L11,1.3C10.2,0.5,9.1,0,8,0C5.8,0,4,1.8,4,4v1.5 C2.8,6.6,2,8.2,2,10c0,3.3,2.7,6,6,6s6-2.7,6-6s-2.7-6-6-6C7.3,4,6.6,4.1,6,4.4V4C6,2.9,6.9,2,8,2z M8,7c1.1,0,2,0.9,2,2 c0,0.7-0.4,1.4-1,1.7V13H7v-2.3c-0.6-0.3-1-1-1-1.7C6,7.9,6.9,7,8,7z"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20.4,6.1c-1.1-0.5-2.2-0.8-3.4-0.8c-1.6,0-3,0.5-4.3,0.9c-0.8,0.3-1.6,0.5-2.2,0.5c-0.4,0-0.6-0.1-0.7-0.3 c0-0.1,0.1-0.6,0.2-0.9c0.3-0.9,0.6-2-0.2-3.1c-0.5-0.6-1.3-1-2.2-1c-0.9,0-1.7,0.3-2.5,0.8C1.9,4.4,0,8.1,0,12c0,6.6,5.4,12,12,12 c5.3,0,10.1-3.6,11.6-8.8C23.7,14.6,25.1,8.4,20.4,6.1z M3,12c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S3,13.1,3,12z M7.5,19 c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.6,19,7.5,19z M13,21c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S14.1,21,13,21z M17,15 c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S18.7,15,17,15z"/></g></svg>
--- a/icons/svg/search-zoom-in.svg
+++ b/icons/svg/search-zoom-in.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M10,8H8v2H6V8H4V6h2V4h2v2h2V8z"/> <path fill="#444444" d="M7,14c-3.86,0-7-3.14-7-7s3.14-7,7-7s7,3.14,7,7S10.86,14,7,14z M7,2C4.243,2,2,4.243,2,7s2.243,5,5,5 s5-2.243,5-5S9.757,2,7,2z"/> <path data-color="color-2" fill="#444444" d="M15.707,14.293L13.314,11.9c-0.411,0.529-0.885,1.003-1.414,1.414l2.393,2.393 C14.488,15.902,14.744,16,15,16s0.512-0.098,0.707-0.293C16.098,15.316,16.098,14.684,15.707,14.293z"/> </g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M13.9,0.5C13.7,0.2,13.4,0,13,0H3C2.6,0,2.3,0.2,2.1,0.5C0,4.5,0,4.7,0,5c0,1.1,0.9,2,2,2v8c0,0.6,0.4,1,1,1 h10c0.6,0,1-0.4,1-1V7c1.1,0,2-0.9,2-2C16,4.7,16,4.5,13.9,0.5z M10,14v-4H6v4H4V6.7C4.3,6.9,4.6,7,5,7c0.6,0,1.1-0.3,1.5-0.7 C6.9,6.7,7.4,7,8,7s1.1-0.3,1.5-0.7C9.9,6.7,10.4,7,11,7c0.4,0,0.7-0.1,1-0.3V14H10z"></path></g></svg>
--- a/icons/svg/spaceship.svg
+++ b/icons/svg/spaceship.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M23.58.424A1,1,0,0,0,22.819.13C8.791.862,3.609,13.358,3.559,13.484a1,1,0,0,0,.22,1.08l5.657,5.657a1,1,0,0,0,1.085.218c.125-.051,12.554-5.291,13.348-19.253A1,1,0,0,0,23.58.424Zm-8.166,10.99a2,2,0,1,1,0-2.828A2,2,0,0,1,15.414,11.414Z" fill="#444444"/> <path data-color="color-2" d="M1.113,18.844a2.844,2.844,0,1,1,4.022,4.022C4.024,23.977,0,24,0,24S0,19.954,1.113,18.844Z" fill="#444444"/> <path id="color-2" d="M10.357,2.341A8.911,8.911,0,0,0,2.522,4.825a9.084,9.084,0,0,0-1.384,1.8,1,1,0,0,0,.155,1.215l1.989,1.99A26.623,26.623,0,0,1,10.357,2.341Z" fill="#444444"/> <path id="color-3" d="M21.659,13.643a8.911,8.911,0,0,1-2.484,7.835,9.084,9.084,0,0,1-1.8,1.384,1,1,0,0,1-1.215-.155l-1.99-1.989A26.623,26.623,0,0,0,21.659,13.643Z" fill="#444444"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0z M8,10c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2 s2,0.9,2,2C10,9.1,9.1,10,8,10z M8,2c0.9,0,1.8,0.2,2.6,0.6L9.044,4.156c-0.761-0.207-1.327-0.207-2.089,0L5.4,2.6 C6.2,2.2,7.1,2,8,2z M2,8c0-0.9,0.2-1.8,0.6-2.6l1.556,1.556c-0.207,0.761-0.207,1.327,0,2.089L2.6,10.6C2.2,9.8,2,8.9,2,8z M8,14 c-0.9,0-1.8-0.2-2.6-0.6l1.556-1.556c0.761,0.207,1.327,0.207,2.089,0L10.6,13.4C9.8,13.8,8.9,14,8,14z M13.4,10.6l-1.556-1.556 c0.207-0.761,0.207-1.327,0-2.089L13.4,5.4C13.8,6.2,14,7.1,14,8C14,8.9,13.8,9.8,13.4,10.6z"/></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M6.5,11h11c3,0,5.5-2.5,5.5-5.5S20.5,0,17.5,0h-11C3.5,0,1,2.5,1,5.5S3.5,11,6.5,11z M6.5,2 C8.4,2,10,3.6,10,5.5S8.4,9,6.5,9S3,7.4,3,5.5S4.6,2,6.5,2z"></path> <path data-color="color-2" fill="#444444" d="M17.5,13h-11c-3,0-5.5,2.5-5.5,5.5S3.5,24,6.5,24h11c3,0,5.5-2.5,5.5-5.5S20.5,13,17.5,13z M17.5,22c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S19.4,22,17.5,22z"></path></g></svg>
--- a/mobile-ui/assets/nucleo
+++ b/mobile-ui/assets/nucleo
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M11,12H1c-0.553,0-1-0.447-1-1V1c0-0.552,0.447-1,1-1h10c0.553,0,1,0.448,1,1v10C12,11.553,11.553,12,11,12z "></path> <path data-color="color-2" fill="#444444" d="M15,16H4v-2h10V4h2v11C16,15.553,15.553,16,15,16z"></path></g></svg>
--- a/mobile-ui/assets/splash.png
+++ b/mobile-ui/assets/splash.png
--- a/mobile-ui/components/AgregarInvitados.js
+++ b/mobile-ui/components/AgregarInvitados.js
@ -1,125 +0,0 @@
-import React, { useContext, useState } from "react";
-import { API } from "../environment/api";
-
-import {
-  Box, Button,
-  Center, FormControl, Heading, ScrollView, VStack
-} from "native-base";
-
-import { StyleSheet, TextInput } from "react-native";
-import { UserContext } from "../context/UserContext";
-
-export default function AgregarInvitados({ navigation }) {
-
-  const baseURL = `${API.BASE_URL}/guest/createGuest/`;
-  const [name, setName] = useState(); 
-  const [apellido, setApellido] =useState(); 
-  const [dni, setDNI] = useState(); 
-  const [phone, setPhone] = useState();
-  const [number_plate, setNumber_plate] = useState();
-  const [tenant_id, setTenant_id] = useState();
-  const [community_id, setCommunity_id] = useState();
-  const { user } = useContext(UserContext);
-
-  const saveInvitado = async() => {
-
-    const data = {
-      "name": name,
-      "last_name": apellido,
-      "dni": dni,
-      "phone": phone,
-      "number_plate": number_plate,
-      "tenant_id": user.id,
-      "community_id": user.community_id
-    }
-
-    try {
-
-      await fetch(baseURL, {
-
-        cache: 'no-cache', 
-        method: 'POST', 
-        body: JSON.stringify(data), 
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      .then(response => {
-        if (response.status != 201){
-          console.log('ocurrio un error ');
-        }else{
-          return response.json(); 
-        }
-      })
-      
-    } catch (error) {
-      console.log("ERROR: " + error);
-    }
-  }
-    return (
-        <Center>
-
-          <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
-      px: "20px",
-      mb: "4",
-      minW: "72"
-    }}>
-             <Box safeArea p="2" w="90%" maxW="290" py="8">
-        <Heading size="lg" color="coolGray.800" _dark={{
-        color: "warmGray.50"
-      }} fontWeight="semibold">
-          Registrar invitado
-        </Heading>
-        <Heading mt="1" color="coolGray.600" _dark={{
-        color: "warmGray.200"
-      }} fontWeight="medium" size="xs">
-         Registre el invitado que desee
-        </Heading>
-        <VStack space={3} mt="5">
-          <FormControl isRequired>
-            <FormControl.Label>Nombre</FormControl.Label>
-            <TextInput style={styles.input} type="text" onChangeText={(value) => setName(value)}/>
-          </FormControl>
-          <FormControl isRequired>
-            <FormControl.Label>Apellido</FormControl.Label>
-            <TextInput style={styles.input} type="text" onChangeText={(value) => setApellido(value)}/>
-          </FormControl>
-          <FormControl isRequired>
-            <FormControl.Label>Identificación</FormControl.Label>
-            <TextInput style={styles.input} type="text" onChangeText={(value) => setDNI(value)}/>
-          </FormControl>
-          <FormControl isRequired>
-            <FormControl.Label>Teléfono</FormControl.Label>
-            <TextInput style={styles.input} type="text" onChangeText={(value) => setPhone(value)} />
-          </FormControl>
-          <Button mt="2" backgroundColor='tertiary.600' onPress={() => saveInvitado()}>
-           Guardar
-          </Button>
-        </VStack>
-      </Box>
-
-      </ScrollView>
-    </Center>
-
-  )
-
-
-}
-
-const styles = StyleSheet.create({
-  input: {
-    height: 10,
-    margin: 3,
-    borderWidth: 0.5,
-    padding: 5,
-    flex: 1,
-    paddingTop: 9,
-    paddingRight: 19,
-    paddingBottom: 20,
-    paddingLeft: 0,
-    marginTop: 6,
-    marginBottom: 6,
-    borderRadius: 4
-  }
-})
-
--- a/mobile-ui/components/AreaComun.js
+++ b/mobile-ui/components/AreaComun.js
@ -1,177 +0,0 @@
-import React, {useContext, useEffect, useState} from "react";
-import {
-    Box, 
-    Heading, 
-    VStack, 
-    FormControl,
-    Button,
-    Center, 
-    Select, CheckIcon, ScrollView
-  } from "native-base";
-import { UserContext } from "../context/UserContext";
-import { API } from "../environment/api";
-import {TimePicker} from 'react-native-simple-time-picker';
-import { View, StyleSheet } from "react-native";
-export default function AreaComun({navigation}){
-
-  const { user } = useContext(UserContext)
-  const [service, setService] = useState("");
-  const [areas, setAreas] = useState([])
-  const [isRequesting, setIsRequesting] = useState(false);
-
-  const [selectedHours, setSelectedHours] = useState(0);
-  const [selectedMinutes, setSelectedMinutes] = useState(0);
-
-  const [endSelectedHours, setEndSelectedHours] = useState(0);
-  const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);
-
-    useEffect(() => {
-
-      const onRequestReservasData = async () => {
-        setIsRequesting(true);
-
-  
-  
-        try {
-          const jsonResponse = await fetch(`${API.BASE_URL}/commonArea/allCommonAreas`, {
-            method: "GET",
-            headers: {
-              'Content-Type': 'application/json'
-            }
-          })
-  
-          const response = await jsonResponse.json();
-          console.log(response.message);
-  
-          setAreas(response.message);
-  
-
-  
-        } catch (error) {
-            console.log("ERROR:" + error);
-        }
-  
-        setIsRequesting(false)
-      }
-  
-      onRequestReservasData()
-
-
-    }, [user])
-
-
-    const postReserva = async() => {
-
-      const data = {
-        
-        "start_time": selectedHours + ":" +selectedMinutes,
-        "finish_time": endSelectedHours + ":" +endSelectedMinutes,
-        "date_entry": "",
-        "user_id" : user._id, 
-        "common_area_id": service
-      
-      }
-
-      console.log(data);
-      // try {
-
-      //   const jsonDataResponse = await fetch(`${API.BASE_URL}/reservation/createReservation`, {
-      //     cache: 'no-cache', 
-      //     method: 'POST', 
-      //     body: JSON.stringify(data), 
-      //     headers: {
-      //       'Content-Type': 'application/json'
-      //     }
-      //   })
-
-      //   const response = await jsonResponse.json();
-      //   console.log(response.message);
-        
-      // } catch (error) {
-      //   console.log("ERROR:" + error);
-      // }
-    }
-    
-
-   
-
-    return (
-        <Center>
-             <Box safeArea p="2" w="90%" maxW="290" py="8">
-        <Heading size="lg" color="coolGray.800" _dark={{
-        color: "warmGray.50"
-      }} fontWeight="semibold">
-          Katoikia
-        </Heading>
-        <Heading mt="1" color="coolGray.600" _dark={{
-        color: "warmGray.200"
-      }} fontWeight="medium" size="xs">
-         Reserve su área común 
-        </Heading>
-        <ScrollView showsVerticalScrollIndicator={false}> 
-        <VStack space={3} mt="5">
-        <FormControl isRequired>
-            <FormControl.Label>Área común</FormControl.Label>
-            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Elija su área común" _selectedItem={{
-        bg: "teal.600",
-        endIcon: <CheckIcon size="5" />
-      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
-
-        {areas.map(item => (
-          <Select.Item label={item.name} value={item.community_id} />
-        ))}
-          
-        </Select>
-          </FormControl>
-          <FormControl isRequired>
-            <FormControl.Label>Hora de inicio</FormControl.Label>
-            <View  >
-            <TimePicker 
-          selectedHours={selectedHours}
-          selectedMinutes={selectedMinutes}
-          onChange={(hours, minutes) => {
-            setSelectedHours(hours);
-            setSelectedMinutes(minutes);
-          }}/>
-            </View>
-          </FormControl>
-          <FormControl isRequired>
-            <FormControl.Label>Hora de finalización</FormControl.Label>
-            <View  >
-            <TimePicker 
-          selectedHours={selectedHours}
-          //initial Hourse value
-          selectedMinutes={selectedMinutes}
-          //initial Minutes value
-          onChange={(hours, minutes) => {
-            setEndSelectedHours(hours);
-            setEndSelectedMinutes(minutes);
-          }}/>
-            </View>
-           
-          </FormControl>
-         
-        
-          <Button mt="2" backgroundColor="tertiary.600" onPress={()=> postReserva()}>
-            Reservar
-          </Button>
-          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
-            Cancelar
-          </Button>
-        </VStack>
-
-        </ScrollView>
-      </Box>
-        </Center>
-       
-    )
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 40
-  }
-});
--- a/mobile-ui/components/Button.js
+++ b/mobile-ui/components/Button.js
@ -0,0 +1,57 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import PropTypes from 'prop-types';
+import { Button } from "galio-framework";
+
+import argonTheme from "../constants/Theme";
+
+class ArButton extends React.Component {
+  render() {
+    const { small, shadowless, children, color, style, ...props } = this.props;
+    
+    const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];
+
+    const buttonStyles = [
+      small && styles.smallButton,
+      color && { backgroundColor: colorStyle },
+      !shadowless && styles.shadow,
+      {...style}
+    ];
+
+    return (
+      <Button
+        style={buttonStyles}
+        shadowless
+        textStyle={{ fontSize: 12, fontWeight: '700' }}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+}
+
+ArButton.propTypes = {
+  small: PropTypes.bool,
+  shadowless: PropTypes.bool,
+  color: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'error', 'success', 'warning'])
+  ])
+}
+
+const styles = StyleSheet.create({
+  smallButton: {
+    width: 75,
+    height: 28
+  },
+  shadow: {
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 4,
+    shadowOpacity: 0.1,
+    elevation: 2,
+  },
+});
+
+export default ArButton;
--- a/mobile-ui/components/Card.js
+++ b/mobile-ui/components/Card.js
@ -0,0 +1,98 @@
+import React from 'react';
+import { withNavigation } from '@react-navigation/native';
+import PropTypes from 'prop-types';
+import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
+import { Block, Text, theme } from 'galio-framework';
+
+import { argonTheme } from '../constants';
+
+
+class Card extends React.Component {
+  render() {
+    const { navigation, item, horizontal, full, style, ctaColor, imageStyle } = this.props;
+    
+    const imageStyles = [
+      full ? styles.fullImage : styles.horizontalImage,
+      imageStyle
+    ];
+    const cardContainer = [styles.card, styles.shadow, style];
+    const imgContainer = [styles.imageContainer,
+      horizontal ? styles.horizontalStyles : styles.verticalStyles,
+      styles.shadow
+    ];
+
+    return (
+      <Block row={horizontal} card flex style={cardContainer}>
+        <TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
+          <Block flex style={imgContainer}>
+            <Image source={{uri: item.image}} style={imageStyles} />
+          </Block>
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
+          <Block flex space="between" style={styles.cardDescription}>
+            <Text size={14} style={styles.cardTitle}>{item.title}</Text>
+            <Text size={12} muted={!ctaColor} color={ctaColor || argonTheme.COLORS.ACTIVE} bold>{item.cta}</Text>
+          </Block>
+        </TouchableWithoutFeedback>
+      </Block>
+    );
+  }
+}
+
+Card.propTypes = {
+  item: PropTypes.object,
+  horizontal: PropTypes.bool,
+  full: PropTypes.bool,
+  ctaColor: PropTypes.string,
+  imageStyle: PropTypes.any,
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: theme.COLORS.WHITE,
+    marginVertical: theme.SIZES.BASE,
+    borderWidth: 0,
+    minHeight: 114,
+    marginBottom: 16
+  },
+  cardTitle: {
+    flex: 1,
+    flexWrap: 'wrap',
+    paddingBottom: 6
+  },
+  cardDescription: {
+    padding: theme.SIZES.BASE / 2
+  },
+  imageContainer: {
+    borderRadius: 3,
+    elevation: 1,
+    overflow: 'hidden',
+  },
+  image: {
+    // borderRadius: 3,
+  },
+  horizontalImage: {
+    height: 122,
+    width: 'auto',
+  },
+  horizontalStyles: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  verticalStyles: {
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  fullImage: {
+    height: 215
+  },
+  shadow: {
+    shadowColor: theme.COLORS.BLACK,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+    shadowOpacity: 0.1,
+    elevation: 2,
+  },
+});
+
+export default withNavigation(Card);
--- a/mobile-ui/components/CommentCard/index.js
+++ b/mobile-ui/components/CommentCard/index.js
@ -1,51 +0,0 @@
-import { format } from "date-fns";
-import {
-    Badge,
-    Box, HStack, Pressable,
-    Spacer, Text
-} from "native-base";
-import PropTypes from 'prop-types';
-
-import React from 'react';
-
-export const CommentCard = ({ date, comment }) => {
-    const dateFormated = format(new Date(date), "dd LL yyyy")
-    return (
-        <Pressable
-            rounded="8"
-            overflow="hidden"
-            borderWidth="1"
-            borderColor="coolGray.300"
-            maxW="96"
-            shadow="3"
-            bg="coolGray.100"
-            p="5"
-            marginTop="4"
-        >
-            <Box>
-                <HStack alignItems="center">
-                    <Badge colorScheme="darkBlue" _text={{
-                        color: "white"
-                    }} variant="solid" rounded="4">
-                        Comunicado
-                    </Badge>
-                    <Spacer />
-                    <Text fontSize={10} color="coolGray.800">
-                        {dateFormated}
-                    </Text>
-                </HStack>
-                <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
-                    Administrador de Comunidad
-                </Text>
-                <Text mt="2" fontSize="sm" color="coolGray.700">
-                    {comment}
-                </Text>
-            </Box>
-        </Pressable>
-    )
-}
-
-CommentCard.propTypes = {
-    date: PropTypes.string.isRequired,
-    comment: PropTypes.string.isRequired,
-}
--- a/mobile-ui/components/DrawerItem.js
+++ b/mobile-ui/components/DrawerItem.js
@ -0,0 +1,130 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity, Linking } from "react-native";
+import { Block, Text, theme } from "galio-framework";
+
+import Icon from "./Icon";
+import argonTheme from "../constants/Theme";
+
+class DrawerItem extends React.Component {
+  renderIcon = () => {
+    const { title, focused } = this.props;
+
+    switch (title) {
+      case "Home":
+        return (
+          <Icon
+            name="shop"
+            family="ArgonExtra"
+            size={14}
+            color={focused ? "white" : argonTheme.COLORS.PRIMARY}
+          />
+        );
+      case "Elements":
+        return (
+          <Icon
+            name="map-big"
+            family="ArgonExtra"
+            size={14}
+            color={focused ? "white" : argonTheme.COLORS.ERROR}
+          />
+        );
+      case "Articles":
+        return (
+          <Icon
+            name="spaceship"
+            family="ArgonExtra"
+            size={14}
+            color={focused ? "white" : argonTheme.COLORS.PRIMARY}
+          />
+        );
+      case "Profile":
+        return (
+          <Icon
+            name="chart-pie-35"
+            family="ArgonExtra"
+            size={14}
+            color={focused ? "white" : argonTheme.COLORS.WARNING}
+          />
+        );
+      case "Account":
+        return (
+          <Icon
+            name="calendar-date"
+            family="ArgonExtra"
+            size={14}
+            color={focused ? "white" : argonTheme.COLORS.INFO}
+          />
+        );
+      case "Getting Started":
+        return (<Icon
+          name="spaceship"
+          family="ArgonExtra"
+          size={14}
+          color={focused ? "white" : "rgba(0,0,0,0.5)"}
+        />);
+      case "Log out":
+        return <Icon />;
+      default:
+        return null;
+    }
+  };
+
+  render() {
+    const { focused, title, navigation } = this.props;
+
+    const containerStyles = [
+      styles.defaultStyle,
+      focused ? [styles.activeStyle, styles.shadow] : null
+    ];
+
+    return (
+      <TouchableOpacity
+        style={{ height: 60 }}
+        onPress={() =>
+          title == "Getting Started"
+            ? Linking.openURL(
+                "https://demos.creative-tim.com/argon-pro-react-native/docs/"
+              ).catch(err => console.error("An error occurred", err))
+            : navigation.navigate(title)
+        }
+      >
+        <Block flex row style={containerStyles}>
+          <Block middle flex={0.1} style={{ marginRight: 5 }}>
+            {this.renderIcon()}
+          </Block>
+          <Block row center flex={0.9}>
+            <Text
+              size={15}
+              bold={focused ? true : false}
+              color={focused ? "white" : "rgba(0,0,0,0.5)"}
+            >
+              {title}
+            </Text>
+          </Block>
+        </Block>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  defaultStyle: {
+    paddingVertical: 16,
+    paddingHorizontal: 16
+  },
+  activeStyle: {
+    backgroundColor: argonTheme.COLORS.ACTIVE,
+    borderRadius: 4
+  },
+  shadow: {
+    shadowColor: theme.COLORS.BLACK,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowRadius: 8,
+    shadowOpacity: 0.1
+  }
+});
+
+export default DrawerItem;
--- a/mobile-ui/components/Header.js
+++ b/mobile-ui/components/Header.js
@ -0,0 +1,281 @@
+import React from 'react';
+import { withNavigation } from '@react-navigation/native';
+import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
+import { Button, Block, NavBar, Text, theme } from 'galio-framework';
+
+import Icon from './Icon';
+import Input from './Input';
+import Tabs from './Tabs';
+import argonTheme from '../constants/Theme';
+
+const { height, width } = Dimensions.get('window');
+const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
+
+const BellButton = ({isWhite, style, navigation}) => (
+  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
+    <Icon
+      family="ArgonExtra"
+      size={16}
+      name="bell"
+      color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
+    />
+    <Block middle style={styles.notify} />
+  </TouchableOpacity>
+);
+
+const BasketButton = ({isWhite, style, navigation}) => (
+  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
+    <Icon
+      family="ArgonExtra"
+      size={16}
+      name="basket"
+      color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
+    />
+  </TouchableOpacity>
+);
+
+const SearchButton = ({isWhite, style, navigation}) => (
+  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
+    <Icon
+      size={16}
+      family="Galio"
+      name="search-zoom-in"
+      color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
+    />
+  </TouchableOpacity>
+);
+
+class Header extends React.Component {
+  handleLeftPress = () => {
+    const { back, navigation } = this.props;
+    return (back ? navigation.goBack() : navigation.openDrawer());
+  }
+  renderRight = () => {
+    const { white, title, navigation } = this.props;
+
+    if (title === 'Title') {
+      return [
+        <BellButton key='chat-title' navigation={navigation} isWhite={white} />,
+        <BasketButton key='basket-title' navigation={navigation} isWhite={white} />
+      ]
+    }
+
+    switch (title) {
+      case 'Home':
+        return ([
+          <BellButton key='chat-home' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-home' navigation={navigation} isWhite={white} />
+        ]);
+      case 'Deals':
+        return ([
+          <BellButton key='chat-categories' navigation={navigation} />,
+          <BasketButton key='basket-categories' navigation={navigation} />
+        ]);
+      case 'Categories':
+        return ([
+          <BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
+        ]);
+      case 'Category':
+        return ([
+          <BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
+        ]);
+      case 'Profile':
+        return ([
+          <BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
+        ]);
+      case 'Product':
+        return ([
+          <SearchButton key='search-product' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-product' navigation={navigation} isWhite={white} />
+        ]);
+      case 'Search':
+        return ([
+          <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
+        ]);
+      case 'Settings':
+        return ([
+          <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
+          <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
+        ]);
+      default:
+        break;
+    }
+  }
+  renderSearch = () => {
+    const { navigation } = this.props;
+    return (
+      <Input
+        right
+        color="black"
+        style={styles.search}
+        placeholder="What are you looking for?"
+        placeholderTextColor={'#8898AA'}
+        onFocus={() => navigation.navigate('Pro')}
+        iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
+      />
+    );
+  }
+  renderOptions = () => {
+    const { navigation, optionLeft, optionRight } = this.props;
+
+    return (
+      <Block row style={styles.options}>
+        <Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
+          <Block row middle>
+            <Icon name="diamond" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
+            <Text size={16} style={styles.tabTitle}>{optionLeft || 'Beauty'}</Text>
+          </Block>
+        </Button>
+        <Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
+          <Block row middle>
+            <Icon size={16} name="bag-17" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
+            <Text size={16} style={styles.tabTitle}>{optionRight || 'Fashion'}</Text>
+          </Block>
+        </Button>
+      </Block>
+    );
+  }
+  renderTabs = () => {
+    const { tabs, tabIndex, navigation } = this.props;
+    const defaultTab = tabs && tabs[0] && tabs[0].id;
+    
+    if (!tabs) return null;
+
+    return (
+      <Tabs
+        data={tabs || []}
+        initialIndex={tabIndex || defaultTab}
+        onChange={id => navigation.setParams({ tabId: id })} />
+    )
+  }
+  renderHeader = () => {
+    const { search, options, tabs } = this.props;
+    if (search || tabs || options) {
+      return (
+        <Block center>
+          {search ? this.renderSearch() : null}
+          {options ? this.renderOptions() : null}
+          {tabs ? this.renderTabs() : null}
+        </Block>
+      );
+    }
+  }
+  render() {
+    const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
+
+    const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
+    const headerStyles = [
+      !noShadow ? styles.shadow : null,
+      transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
+    ];
+
+    const navbarStyles = [
+      styles.navbar,
+      bgColor && { backgroundColor: bgColor }
+    ];
+
+    return (
+      <Block style={headerStyles}>
+        <NavBar
+          back={false}
+          title={title}
+          style={navbarStyles}
+          transparent={transparent}
+          right={this.renderRight()}
+          rightStyle={{ alignItems: 'center' }}
+          left={
+            <Icon 
+              name={back ? 'chevron-left' : "menu"} family="entypo" 
+              size={20} onPress={this.handleLeftPress} 
+              color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
+              style={{ marginTop: 2 }}
+            />
+              
+          }
+          leftStyle={{ paddingVertical: 12, flex: 0.2 }}
+          titleStyle={[
+            styles.title,
+            { color: argonTheme.COLORS[white ? 'WHITE' : 'HEADER'] },
+            titleColor && { color: titleColor }
+          ]}
+          {...props}
+        />
+        {this.renderHeader()}
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 12,
+    position: 'relative',
+  },
+  title: {
+    width: '100%',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  navbar: {
+    paddingVertical: 0,
+    paddingBottom: theme.SIZES.BASE * 1.5,
+    paddingTop: iPhoneX ? theme.SIZES.BASE * 4 : theme.SIZES.BASE,
+    zIndex: 5,
+  },
+  shadow: {
+    backgroundColor: theme.COLORS.WHITE,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+    shadowOpacity: 0.2,
+    elevation: 3,
+  },
+  notify: {
+    backgroundColor: argonTheme.COLORS.LABEL,
+    borderRadius: 4,
+    height: theme.SIZES.BASE / 2,
+    width: theme.SIZES.BASE / 2,
+    position: 'absolute',
+    top: 9,
+    right: 12,
+  },
+  header: {
+    backgroundColor: theme.COLORS.WHITE,
+  },
+  divider: {
+    borderRightWidth: 0.3,
+    borderRightColor: theme.COLORS.ICON,
+  },
+  search: {
+    height: 48,
+    width: width - 32,
+    marginHorizontal: 16,
+    borderWidth: 1,
+    borderRadius: 3,
+    borderColor: argonTheme.COLORS.BORDER
+  },
+  options: {
+    marginBottom: 24,
+    marginTop: 10,
+    elevation: 4,
+  },
+  tab: {
+    backgroundColor: theme.COLORS.TRANSPARENT,
+    width: width * 0.35,
+    borderRadius: 0,
+    borderWidth: 0,
+    height: 24,
+    elevation: 0,
+  },
+  tabTitle: {
+    lineHeight: 19,
+    fontWeight: '400',
+    color: argonTheme.COLORS.HEADER
+  },
+});
+
+export default withNavigation(Header);
--- a/mobile-ui/components/Home.js
+++ b/mobile-ui/components/Home.js
@ -1,67 +0,0 @@
-import{Box, ScrollView} from "native-base";
-import React, { useContext, useEffect, useState } from "react";
-import { UserContext } from "../context/UserContext";
-import { API } from "../environment/api";
-import { CommentCard } from "./CommentCard";
-
-export default function Home() {
-  const { user } = useContext(UserContext)
-  const [isRequesting, setIsRequesting] = useState(false);
-  const [comments, setComments] = useState([]);
-
-  useEffect(() => {
-
-    console.log(user);
-
-    const onRequestCommentsData = async () => {
-      setIsRequesting(true);
-
-      try {
-        const jsonResponse = await fetch(`${API.BASE_URL}/post/allComments`, {
-          method: "GET",
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-
-        const response = await jsonResponse.json();
-        // console.log(response);
-
-        setComments(response.message);
-
-      } catch (error) {
-
-      }
-
-      setIsRequesting(false)
-    }
-
-    onRequestCommentsData()
-
-  }, [user])
-
-
-  return (
-
-    <Box alignItems="center">
-
-      <ScrollView width='100%' h='550' ml='1' _contentContainerStyle={{
-        px: "20px",
-        mb: "4",
-        minW: "72"
-      }}>
-
-        {
-          comments.map(item => (
-            <CommentCard
-              key={item._id}
-              comment={item.comment}
-              date={item.date_entry}
-            />
-          ))
-        }
-
-      </ScrollView>
-    </Box>
-  )
-}
--- a/mobile-ui/components/Icon.js
+++ b/mobile-ui/components/Icon.js
@ -0,0 +1,34 @@
+import React from 'react';
+import * as Font from 'expo-font';
+import { createIconSetFromIcoMoon } from '@expo/vector-icons';
+import { Icon } from 'galio-framework';
+
+import argonConfig from '../assets/config/argon.json';
+const ArgonExtra = require('../assets/font/argon.ttf');
+const IconArgonExtra = createIconSetFromIcoMoon(argonConfig, 'ArgonExtra');
+
+class IconExtra extends React.Component {
+  state = {
+    fontLoaded: false,
+  }
+
+  async componentDidMount() {
+    await Font.loadAsync({ ArgonExtra: ArgonExtra });
+    this.setState({ fontLoaded: true });
+  }
+
+  render() {
+    const { name, family, ...rest } = this.props;
+    
+    if (name && family && this.state.fontLoaded) {
+      if (family === 'ArgonExtra') {
+        return <IconArgonExtra name={name} family={family} {...rest} />;
+      }
+      return <Icon name={name} family={family} {...rest} />;
+    }
+
+    return null;
+  }
+}
+
+export default IconExtra;
--- a/mobile-ui/components/Input.js
+++ b/mobile-ui/components/Input.js
@ -0,0 +1,76 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import PropTypes from 'prop-types';
+
+import { Input } from "galio-framework";
+
+import Icon from './Icon';
+import { argonTheme } from "../constants";
+
+class ArInput extends React.Component {
+  render() {
+    const { shadowless, success, error } = this.props;
+
+    const inputStyles = [
+      styles.input,
+      !shadowless && styles.shadow,
+      success && styles.success,
+      error && styles.error,
+      {...this.props.style}
+    ];
+
+    return (
+      <Input
+        placeholder="write something here"
+        placeholderTextColor={argonTheme.COLORS.MUTED}
+        style={inputStyles}
+        color={argonTheme.COLORS.HEADER}
+        iconContent={
+          <Icon
+            size={14}
+            color={argonTheme.COLORS.ICON}
+            name="link"
+            family="AntDesign"
+          />
+        }
+        {...this.props}
+      />
+    );
+  }
+}
+
+ArInput.defaultProps = {
+  shadowless: false,
+  success: false,
+  error: false
+};
+
+ArInput.propTypes = {
+  shadowless: PropTypes.bool,
+  success: PropTypes.bool,
+  error: PropTypes.bool
+}
+
+const styles = StyleSheet.create({
+  input: {
+    borderRadius: 4,
+    borderColor: argonTheme.COLORS.BORDER,
+    height: 44,
+    backgroundColor: '#FFFFFF'
+  },
+  success: {
+    borderColor: argonTheme.COLORS.INPUT_SUCCESS,
+  },
+  error: {
+    borderColor: argonTheme.COLORS.INPUT_ERROR,
+  },
+  shadow: {
+    shadowColor: argonTheme.COLORS.BLACK,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 2,
+    shadowOpacity: 0.05,
+    elevation: 2,
+  }
+});
+
+export default ArInput;
--- a/mobile-ui/components/Invitados.js
+++ b/mobile-ui/components/Invitados.js
@ -1,97 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { UserContext } from "../context/UserContext";
-import { API } from "../environment/api";
-import {
-  Box, Button,
-  Center, FormControl, Heading, ScrollView, VStack,FlatList, HStack,Avatar,Spacer,Text
-} from "native-base";
-
-export default function Invitados({navigation}) {
-  const [isRequesting, setIsRequesting] = useState(false);
-  const [invitados, setInvitados] = useState([]);
-  const { user } = useContext(UserContext);
-  const id = user._id;
-
-
-  useEffect(() => {
-
-    const onRequestInvitadosData = async () => {
-      setIsRequesting(true);
-
-      try {
-        const jsonResponse = await fetch(`${API.BASE_URL}/guest/findGuestUser/`+`${id}`, {
-          method: "GET",
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-
-        const response = await jsonResponse.json();
-        //console.log(response);
-        setInvitados(response.message);
-
-      } catch (error) {
-
-      }
-
-      setIsRequesting(false)
-    }
-
-    onRequestInvitadosData()
-
-  })
-
-  return (
-  
-       <Box>
-      <Heading fontSize="xl" p="4" pb="3">
-        Lista de invitados
-      </Heading>
-      <FlatList data={invitados} renderItem={({
-      item
-    }) => <Box key={item._id} borderBottomWidth="1" _dark={{
-      borderColor: "gray.600"
-    }} borderColor="coolGray.200" pl="4" pr="5" py="2">
-            <HStack space={3} justifyContent="space-between" >
-            <MaterialCommunityIcons name="account" size={48} color="#D7A86E" />
-              <VStack>
-                <Text _dark={{
-            color: "warmGray.50"
-          }} color="coolGray.800" bold>
-                  {item.name+" "+item.last_name}
-                </Text>
-                <Text color="coolGray.600" _dark={{
-            color: "warmGray.200"
-          }}>
-                  {item.dni}
-                </Text>
-                <Text color="coolGray.600" _dark={{
-            color: "warmGray.200"
-          }}>
-                  {item.phone}
-                </Text>
-              </VStack>
-              <Spacer />
-              <Text fontSize="xs" _dark={{
-          color: "warmGray.50"
-        }} color="coolGray.800" alignSelf="flex-start">
-                {item.number_plate}
-              </Text>
-            </HStack>
-          </Box>} keyExtractor={item => item.id} />
-
-
-          <Button width='200'  mt="4" ml='85' backgroundColor='tertiary.600' onPress={() => navigation.navigate('invitado')}>
-        Agregar invitado
-       </Button>
-
-    </Box>
-      
-
-  );
-
-  
-
- 
-}
--- a/mobile-ui/components/LogIn.js
+++ b/mobile-ui/components/LogIn.js
@ -1,201 +0,0 @@
-import React, { useContext, useState } from "react";
-import Cookies from 'universal-cookie';
-import {
-  Text,
-  Link,
-  Center,
-  Heading,
-  VStack,
-  Box,
-  FormControl,
-  Button,
-  Image
-} from "native-base";
-import logo from "../assets/logo-katoikia.png";
-import { Entypo } from '@expo/vector-icons';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { View, TextInput, StyleSheet } from "react-native";
-import { UserContext } from "../context/UserContext";
-import { API } from "../environment/api";
-
-const baseURL = `${API.BASE_URL}/user/loginUser`;
-
-export default function LogIn({ navigation }) {
-
-  const { addUser } = useContext(UserContext);
-
-  const [credentials, setCredentials] = useState({
-    email: "lalo@lalo.com",
-    password: "12345"
-  });
-
-  const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
-
-  const iniciarSesion = async () => {
-    try {
-  
-      console.log(baseURL);
-      await fetch(baseURL, {
-        cache: 'no-cache', 
-        method: 'POST', 
-        body: JSON.stringify(credentials), 
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      .then(response => {
-        if (response.status != 201){
-          console.log('ocurrio un error ');
-        }else{
-          return response.json(); 
-        }
-      })
-      .then( response => {
-
-        // inqulino 4 y guarda 3
-         const user = response.message
-          if(user.user_type == '4'){
-            addUser(user);
-
-            navigation.navigate('Comunicados', {user})
-          }else if(user.user_type == '3'){
-            addUser(user);
-            navigation.navigate('Comunicados', {user})
-          }
-      })
-      
-    } catch (error) {
-      console.log("ERROR: " +error);
-    }
-
-  }
-
-  return (
-
-    <Center w="100%">
-      <Box safeArea p="2" py="8" w="90%" maxW="290">
-
-        <Center>
-          <Image source={
-            logo
-          } width={500} height={550} m='2'
-            alt="Katoikia logo" size="xl" justifyContent="center" />
-
-        </Center>
-
-        <Heading
-          size="lg"
-          fontWeight="600"
-          color="coolGray.800"
-          _dark={{
-            color: "warmGray.50",
-          }}
-        >
-          Bienvenido a Katoikia
-        </Heading>
-        <Heading
-          mt="1"
-          _dark={{
-            color: "warmGray.200",
-          }}
-          color="coolGray.600"
-          fontWeight="medium"
-          size="xs"
-        >
-          Su app de comunidad de confianza
-        </Heading>
-
-        <View style={styles.container}>
-          <VStack space={3} mt="5">
-            <FormControl isRequired >
-              <FormControl.Label Text='bold'> Correo Electrónico </FormControl.Label>
-
-              <View style={styles.viewSection}>
-                <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
-                <TextInput
-                  name='email'
-                  type="text"
-                  style={styles.input}
-                  value={credentials.email}
-                  placeholder='Correo electrónico'
-                  onChangeText={onHandleChange("email")} />
-              </View>
-
-            </FormControl>
-            <FormControl isRequired>
-              <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
-              <View style={styles.viewSection}>
-                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} />
-                <TextInput
-                  name='password'
-                  type="password"
-                  style={styles.input}
-                  value={credentials.password}
-                  placeholder='Contraseña'
-                  onChangeText={onHandleChange("password")} />
-              </View>
-              <Link
-                _text={{
-                  fontSize: "xs",
-                  fontWeight: "500",
-                  color: "indigo.500",
-                  marginTop: "10"
-                }}
-                alignSelf="flex-end"
-                mt="1"
-                onPress={() => navigation.navigate('Password')}
-
-              >
-
-                Recuperar contraseña
-
-              </Link>
-            </FormControl>
-            <Button mt="2" backgroundColor="#D7A86E" onPress={iniciarSesion}
-            >
-              <Text>Continuar</Text>
-            </Button>
-
-          </VStack></View>
-
-      </Box>
-    </Center>
-  );
-
-}
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 10,
-    borderWidth: 0.5,
-    padding: 5,
-    flex: 1,
-    paddingTop: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-    paddingLeft: 0,
-    marginTop: 50,
-    marginBottom: 10,
-    borderRadius: 4
-  },
-
-  iconStyle: {
-    paddingBottom: 20,
-    marginTop: 3,
-    paddingTop: 35
-  },
-
-  viewSection: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    marginBottom: 28
-  },
-
-  container: {
-
-  }
-})
--- a/mobile-ui/components/NativeBaseIcon.js
+++ b/mobile-ui/components/NativeBaseIcon.js
@ -1,44 +0,0 @@
-import React from "react";
-import { Icon } from "native-base";
-import { G, Path } from "react-native-svg";
-const NativeBaseIcon = () => {
-  return (
-    <Icon size="220px" viewBox="0 0 602.339 681.729">
-      <G
-        id="Group_403"
-        data-name="Group 403"
-        transform="translate(14575 1918.542)"
-      >
-        <Path
-          id="Path_1"
-          data-name="Path 1"
-          d="M488.722,0A45.161,45.161,0,0,1,527.83,22.576L675.676,278.584a45.162,45.162,0,0,1,0,45.171L527.83,579.763a45.162,45.162,0,0,1-39.108,22.576H193.008A45.162,45.162,0,0,1,153.9,579.763L6.053,323.755a45.162,45.162,0,0,1,0-45.171L153.9,22.576A45.162,45.162,0,0,1,193.008,0Z"
-          transform="translate(-13972.661 -1918.542) rotate(90)"
-          fill="#356290"
-        />
-        <Path
-          id="Path_252"
-          data-name="Path 252"
-          d="M401.1,0A60.816,60.816,0,0,1,453.77,30.405L567.2,226.844a60.816,60.816,0,0,1,0,60.82L453.77,484.1A60.816,60.816,0,0,1,401.1,514.509H174.241A60.816,60.816,0,0,1,121.575,484.1L8.149,287.665a60.816,60.816,0,0,1,0-60.82L121.575,30.405A60.816,60.816,0,0,1,174.241,0Z"
-          transform="translate(-14016.576 -1865.281) rotate(90)"
-          fill="#1784b2"
-        />
-        <Path
-          id="Path_251"
-          data-name="Path 251"
-          d="M345.81,0a36.573,36.573,0,0,1,31.674,18.288L480.566,196.856a36.573,36.573,0,0,1,0,36.569L377.484,411.993a36.573,36.573,0,0,1-31.674,18.288H139.655a36.572,36.572,0,0,1-31.674-18.288L4.9,233.425a36.573,36.573,0,0,1,0-36.569L107.981,18.288A36.573,36.573,0,0,1,139.655,0Z"
-          transform="translate(-14058.69 -1820.41) rotate(90)"
-          fill="#50bfc3"
-        />
-        <Path
-          id="_x3C__x2F__x3E_"
-          d="M187.066,335.455V297.993l-65.272-21.949,65.272-22.523V216.059L81,259.5v32.521Zm38.726,29.3L286.123,174H256.7l-60.33,190.759Zm72.052-29.3,106.066-43.783V259.267L297.844,216.059V254.44l59.3,23.328-59.3,19.421Z"
-          transform="translate(-14516.286 -1846.988)"
-          fill="#fff"
-        />
-      </G>
-    </Icon>
-  );
-};
-
-export default NativeBaseIcon;
--- a/mobile-ui/components/Profile.js
+++ b/mobile-ui/components/Profile.js
@ -1,146 +0,0 @@
-import React, { useContext, useState } from "react";
-import { API } from "../environment/api";
-
-import {
-  Box, Button,
-  Center, FormControl, Heading, ScrollView, VStack
-} from "native-base";
-
-import { StyleSheet, TextInput } from "react-native";
-import { UserContext } from "../context/UserContext";
-
-export default function Profile({ navigation }) {
-
-  const baseURL = `${API.BASE_URL}/user/updateUser/`
-  //const userData = JSON.parse(JSON.stringify(route.params));
-  const [name, setName] = useState(); 
-  const [apellido, setApellido] =useState(); 
-  const [email, setEmail] = useState(); 
-  const [password, setPassword] = useState();
-
-  const userData = useContext(UserContext)
-  const id = userData.user._id;
-
-  console.log(userData.user);
-
-
-  const updateInfo = async() => {
-
-    const data = {
-      "_id": "6301df20dac7dcf76dcecade",
-      "dni": "1234567890",
-      "name": name,
-      "last_name": apellido,
-      "email": email,
-      "phone": 12121212,
-      "password": "827ccb0eea8a706c4c34a16891f84e7b",
-      "user_type": "3",
-      "status": "1",
-      "date_entry": "2022-08-21T07:30:09.929Z",
-      "community_id": null,
-    }
-
-    try {
-
-      await fetch(baseURL+`${id}`, {
-
-        cache: 'no-cache', 
-        method: 'PUT', 
-        body: JSON.stringify(data), 
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      .then(response => {
-
-        console.log(baseURL+`${id}`);
-        if (response.status != 201){
-          console.log('ocurrio un error ');
-        }else{
-          return response.json(); 
-        }
-      })
-      
-    } catch (error) {
-      console.log("ERROR: " + error);
-    }
-  }
-    return (
-        <Center>
-
-          <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
-      px: "20px",
-      mb: "4",
-      minW: "72"
-    }}>
-             <Box safeArea p="2" w="90%" maxW="290" py="8">
-        <Heading size="lg" color="coolGray.800" _dark={{
-        color: "warmGray.50"
-      }} fontWeight="semibold">
-          Bienvenido {userData.user.name}
-        </Heading>
-        <Heading mt="1" color="coolGray.600" _dark={{
-        color: "warmGray.200"
-      }} fontWeight="medium" size="xs">
-          Modifique sus datos
-        </Heading>
-        <VStack space={3} mt="5">
-        <FormControl>
-            <FormControl.Label>DNI</FormControl.Label>
-            <TextInput type="text" defaultValue={userData.user.dni} editable={false} />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Teléfono</FormControl.Label>
-            <TextInput type="text" defaultValue={userData.user.phone} editable={false} />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Nombre</FormControl.Label>
-            <TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Apellido</FormControl.Label>
-            <TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Correo electrónico</FormControl.Label>
-            <TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Contraseña actual</FormControl.Label>
-            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
-          </FormControl>
-          
-          <Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
-            Actualizar
-          </Button>
-          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
-            Cerrar sesión
-          </Button>
-        </VStack>
-      </Box>
-
-      </ScrollView>
-    </Center>
-
-  )
-
-
-}
-
-const styles = StyleSheet.create({
-  input: {
-    height: 10,
-    margin: 3,
-    borderWidth: 0.5,
-    padding: 5,
-    flex: 1,
-    paddingTop: 9,
-    paddingRight: 19,
-    paddingBottom: 20,
-    paddingLeft: 0,
-    marginTop: 6,
-    marginBottom: 6,
-    borderRadius: 4
-  }
-})
-
--- a/mobile-ui/components/ProfileGuarda.js
+++ b/mobile-ui/components/ProfileGuarda.js
@ -1,103 +0,0 @@
-import React, { useState } from "react";
-
-import {
-    Box, 
-    Heading, 
-    VStack, 
-    FormControl,  
-    Button,
-    Center,
-    ScrollView
-  } from "native-base";
-
-  import { View, TextInput, StyleSheet } from "react-native";
-
-export default function ProfileGuarda({route, navigation}){
-
-  const userData = JSON.parse(JSON.stringify(route.params));
-  const [name, setName] = useState(); 
-  const [apellido, setApellido] =useState(); 
-  const [email, setEmail] = useState(); 
-  const [password, setPassword] = useState();
-
-  console.log(userData.user);
-
-
-  const updateInfo = async() => {
-
-  }
-    return (
-        <Center>
-
-          <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
-      px: "20px",
-      mb: "4",
-      minW: "72"
-    }}>
-             <Box safeArea p="2" w="90%" maxW="290" py="8">
-        <Heading size="lg" color="coolGray.800" _dark={{
-        color: "warmGray.50"
-      }} fontWeight="semibold">
-          Bienvenido {userData.user.name}
-        </Heading>
-        <Heading mt="1" color="coolGray.600" _dark={{
-        color: "warmGray.200"
-      }} fontWeight="medium" size="xs">
-          Modifique sus datos
-        </Heading>
-        <VStack space={3} mt="5">
-        <FormControl>
-            <FormControl.Label>DNI</FormControl.Label>
-            <TextInput type="text" defaultValue={userData.user.dni} editable='false' />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Nombre</FormControl.Label>
-            <TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Apellido</FormControl.Label>
-            <TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Correo electrónico</FormControl.Label>
-            <TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Contraseña actual</FormControl.Label>
-            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
-          </FormControl>
-          
-          <Button mt="2" backgroundColor="orange.300">
-            Actualizar
-          </Button>
-          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
-            Cerrar sesión
-          </Button>
-        </VStack>
-      </Box>
-
-      </ScrollView>
-        </Center>
-       
-    )
-
-   
-}
-
-const styles = StyleSheet.create({
-  input: {
-    height: 10,
-    margin:3,
-    borderWidth: 0.5,
-    padding: 5,
-    flex: 1,
-    paddingTop: 9,
-    paddingRight: 19,
-    paddingBottom: 20,
-    paddingLeft: 0,
-    marginTop: 6, 
-    marginBottom:6, 
-    borderRadius: 4
-  }
-  })
-
--- a/mobile-ui/components/RecoverPassword.js
+++ b/mobile-ui/components/RecoverPassword.js
@ -1,56 +0,0 @@
-import React from "react";
-import {
-    Text,
-    Link,
-    Center,
-    Heading,
-    VStack,
-    Box,
-    FormControl,
-    Input,
-    Button
-  } from "native-base";
-export default function RecoverPassword () {
-
-return (
-    <Center w="100%">
-    <Box safeArea p="2" py="8" w="90%" maxW="290">
-      <Heading
-        size="lg"
-        fontWeight="600"
-        color="coolGray.800"
-        _dark={{
-          color: "warmGray.50",
-        }}
-      >
-        Recupere su contraseña
-      </Heading>
-      <Heading
-        mt="1"
-        _dark={{
-          color: "warmGray.200",
-        }}
-        color="coolGray.600"
-        fontWeight="medium"
-        size="xs"
-      >
-        Se le enviaran las instrucciones al correo electrónico
-      </Heading>
-
-      <VStack space={3} mt="5">
-        <FormControl>
-          <FormControl.Label> Correo Electrónico</FormControl.Label>
-          <Input />
-        </FormControl>
-       
-        <Button  mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
-        >
-          <Text>Recuperar contraseña</Text>
-        </Button>
-       
-      </VStack>
-    </Box>
-  </Center>
-
-)
-}
--- a/mobile-ui/components/Reservas.js
+++ b/mobile-ui/components/Reservas.js
@ -1,86 +0,0 @@
-import React, {useContext, useEffect, useState} from "react";
-import {
-  Box,
-  ScrollView,
-  Fab,
-  Icon
-} from "native-base";
-import { API } from "../environment/api";
-import { MaterialCommunityIcons } from '@expo/vector-icons'; 
-
-import { UserContext } from "../context/UserContext";
-import { ReservasCard } from "./ReservasCard";
-
-export default function Reservas({navigation}) {
-
-  const { user } = useContext(UserContext)
-  const [isRequesting, setIsRequesting] = useState(false);
-  const [reservas, setReservas] = useState([]);
-
-  useEffect(() => {
-
-    const onRequestReservasData = async () => {
-      setIsRequesting(true);
-
-      try {
-        const jsonResponse = await fetch(`${API.BASE_URL}/reservation/allReservations`, {
-          method: "GET",
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-
-        const response = await jsonResponse.json();
-        console.log(response);
-
-        setReservas(response.message);
-
-        try {
-
-         
-        } catch (error) {
-          console.log("ERROR:" + error);
-        }
-
-      } catch (error) {
-          console.log("ERROR:" + error);
-      }
-
-      setIsRequesting(false)
-    }
-
-    onRequestReservasData()
-
-  }, [user])
-
-
-  return (
-  
-    <ScrollView showsVerticalScrollIndicator={false}>
-          
-          {
-          reservas.map(item => (
-            <ReservasCard
-              key={item._id}
-              date={item.date_entry}
-              startTime={item.start_time}
-              endTime={item.finish_time}
-              status={item.status}
-            />
-          ))
-        }
-
-
-    <Box height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{
-      bg: "coolGray.200:alpha.20"
-    }} _light={{
-      bg: "coolGray.200:alpha.20"
-    }}>
-        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon mb="0.5" as={<MaterialCommunityIcons name={'plus'} />} color="white" size="sm" />} onPress={() => navigation.navigate('area')}/>
-      </Box>
-    </ScrollView>
-  );
-
-
- 
-}
--- a/mobile-ui/components/ReservasCard/index.js
+++ b/mobile-ui/components/ReservasCard/index.js
@ -1,76 +0,0 @@
-import { format } from "date-fns";
-import {
-    Box, HStack,
-    ScrollView,
-    Text, 
-    Stack, 
-    Heading,
-    Badge
-} from "native-base";
-import PropTypes from 'prop-types';
-
-import React from 'react';
-
-export const ReservasCard = ({ date, startTime, endTime, status}) => {
-    const dateFormated = format(new Date(date), "dd LL yyyy")
-  
-
-    try {
-        
-    } catch (error) {
-        
-    }
-
-    return (
-        <ScrollView showsVerticalScrollIndicator={false}> 
-
-             
-    <Box mt="5" alignItems="center">
-      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
-      borderColor: "coolGray.600",
-      backgroundColor: "gray.700"
-    }} _web={{
-      shadow: 2,
-      borderWidth: 0
-    }} _light={{
-      backgroundColor: "gray.50"
-    }}>
-        <Stack p="4" space={3}>
-          <Stack space={2}>
-
-          <Badge backgroundColor={status === 1 ? 'tertiary.500' : 'danger.600'} _text={{
-                        color: "white"
-                    }} variant="solid" rounded="4">
-                        <Text bold={true} color='danger.50'> {status === 1 ? 'LIBRE' : 'RESERVADO'}</Text>
-                    </Badge>
-            <Heading size="md" ml="-1">
-              Reserva #1
-            </Heading>
-            <Text fontSize="xs" _light={{
-            color: "violet.500"
-          }} _dark={{
-            color: "violet.400"
-          }} fontWeight="500" ml="-0.5" mt="-1">
-             {dateFormated}
-            </Text>
-          </Stack>
-          <Text fontWeight="400">
-            Hora de inicio: {startTime}
-          </Text>
-          <Text fontWeight="400">
-            Hora de finalización: {endTime}
-          </Text>
-        
-        </Stack>
-      </Box>
-    </Box>
-        </ScrollView>
-    )
-
-}
-ReservasCard.propTypes = {
-    date: PropTypes.string.isRequired,
-    startTime: PropTypes.string.isRequired,
-    endTime: PropTypes.string.isRequired,
-    status: PropTypes.string.isRequired
-}
--- a/mobile-ui/components/Select.js
+++ b/mobile-ui/components/Select.js
@ -0,0 +1,85 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import ModalDropdown from 'react-native-material-dropdown';
+import { Block, Text } from 'galio-framework';
+
+import Icon from './Icon';
+import { argonTheme } from '../constants';
+
+class DropDown extends React.Component {
+  state = {
+    value: 1,
+  }
+
+  handleOnSelect = (index, value) => {
+    const { onSelect } = this.props;
+
+    this.setState({ value: value });
+    onSelect && onSelect(index, value);
+  }
+
+  render() {
+    const { onSelect, iconName, iconFamily, iconSize, iconColor, color, textStyle, style, ...props } = this.props;
+
+    const modalStyles = [
+      styles.qty,
+      color && { backgroundColor: color },
+      style
+    ];
+
+    const textStyles = [
+      styles.text,
+      textStyle
+    ];
+
+    return (
+      <ModalDropdown
+        style={modalStyles}
+        onSelect={this.handleOnSelect}
+        dropdownStyle={styles.dropdown}
+        dropdownTextStyle={{paddingLeft:16, fontSize:12}}
+        {...props}>
+        <Block flex row middle space="between">
+          <Text size={12} style={textStyles}>{this.state.value}</Text>
+          <Icon name={iconName || "nav-down"} family={iconFamily || "ArgonExtra"} size={iconSize || 10} color={iconColor || argonTheme.COLORS.WHITE} />
+        </Block>
+      </ModalDropdown>
+    )
+  }
+}
+
+DropDown.propTypes = {
+  onSelect: PropTypes.func,
+  iconName: PropTypes.string,
+  iconFamily: PropTypes.string,
+  iconSize: PropTypes.number,
+  color: PropTypes.string,
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  qty: {
+    width: 100,
+    backgroundColor: argonTheme.COLORS.DEFAULT,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom:9.5,
+    borderRadius: 4,
+    shadowColor: "rgba(0, 0, 0, 0.1)",
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+    shadowOpacity: 1,
+  },
+  text: {
+    color: argonTheme.COLORS.WHITE,
+    fontWeight: '600'
+  },
+  dropdown: {
+    marginTop: 8,
+    marginLeft: -16,
+    width: 100,
+  },
+});
+
+export default DropDown;
--- a/mobile-ui/components/Switch.js
+++ b/mobile-ui/components/Switch.js
@ -0,0 +1,24 @@
+import React from 'react';
+import { Switch, Platform } from 'react-native';
+
+import argonTheme from '../constants/Theme';
+
+class MkSwitch extends React.Component {
+  render() {
+    const { value, ...props } = this.props;
+    const thumbColor = Platform.OS === 'ios' ? null :
+      Platform.OS === 'android' && value ? argonTheme.COLORS.SWITCH_ON : argonTheme.COLORS.SWITCH_OFF;
+
+    return (
+      <Switch
+        value={value}
+        thumbColor={thumbColor}
+        ios_backgroundColor={argonTheme.COLORS.SWITCH_OFF}
+        trackColor={{ false: argonTheme.COLORS.SWITCH_ON, true: argonTheme.COLORS.SWITCH_ON }}
+        {...props}
+      />
+    );
+  }
+}
+
+export default MkSwitch;
--- a/mobile-ui/components/Tabs.js
+++ b/mobile-ui/components/Tabs.js
@ -0,0 +1,159 @@
+import React from 'react';
+import { StyleSheet, Dimensions, FlatList, Animated } from 'react-native';
+import { Block, theme } from 'galio-framework';
+
+const { width } = Dimensions.get('screen');
+import argonTheme from '../constants/Theme';
+
+const defaultMenu = [
+  { id: 'popular', title: 'Popular', },
+  { id: 'beauty', title: 'Beauty', },
+  { id: 'cars', title: 'Cars', },
+  { id: 'motocycles', title: 'Motocycles', },
+];
+
+export default class Tabs extends React.Component {
+  static defaultProps = {
+    data: defaultMenu,
+    initialIndex: null,
+  }
+
+  state = {
+    active: null,
+  }
+
+  componentDidMount() {
+    const { initialIndex } = this.props;
+    initialIndex && this.selectMenu(initialIndex);
+  }
+
+  animatedValue = new Animated.Value(1);
+
+  animate() {
+    this.animatedValue.setValue(0);
+
+    Animated.timing(this.animatedValue, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: false, // color not supported
+    }).start()
+  }
+
+  menuRef = React.createRef();
+
+  onScrollToIndexFailed = () => {
+    this.menuRef.current.scrollToIndex({
+      index: 0,
+      viewPosition: 0.5
+    });
+  }
+
+  selectMenu = (id) => {
+    this.setState({ active: id });
+
+    this.menuRef.current.scrollToIndex({
+      index: this.props.data.findIndex(item => item.id === id),
+      viewPosition: 0.5
+    });
+
+    this.animate();
+    this.props.onChange && this.props.onChange(id);
+  }
+
+  renderItem = (item) => {
+    const isActive = this.state.active === item.id;
+
+    const textColor = this.animatedValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [argonTheme.COLORS.BLACK, isActive ? argonTheme.COLORS.WHITE : argonTheme.COLORS.BLACK],
+      extrapolate: 'clamp',
+    });
+    
+    const containerStyles = [
+      styles.titleContainer,
+      !isActive && { backgroundColor: argonTheme.COLORS.SECONDARY },
+      isActive && styles.containerShadow
+    ];
+
+    return (
+      <Block style={containerStyles}>
+        <Animated.Text
+          style={[
+            styles.menuTitle,
+            { color: textColor }
+          ]}
+          onPress={() => this.selectMenu(item.id)}>
+          {item.title}
+        </Animated.Text>
+      </Block>
+    )
+  }
+
+  renderMenu = () => {
+    const { data, ...props } = this.props;
+
+    return (
+      <FlatList
+        {...props}
+        data={data}
+        horizontal={true}
+        ref={this.menuRef}
+        extraData={this.state}
+        keyExtractor={(item) => item.id}
+        showsHorizontalScrollIndicator={false}
+        onScrollToIndexFailed={this.onScrollToIndexFailed}
+        renderItem={({ item }) => this.renderItem(item)}
+        contentContainerStyle={styles.menu}
+      />
+    )
+  }
+
+  render() {
+    return (
+      <Block style={styles.container}>
+        {this.renderMenu()}
+      </Block>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: width,
+    backgroundColor: theme.COLORS.WHITE,
+    zIndex: 2,
+  },
+  shadow: {
+    shadowColor: theme.COLORS.BLACK,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 8,
+    shadowOpacity: 0.2,
+    elevation: 4,
+  },
+  menu: {
+    paddingHorizontal: theme.SIZES.BASE * 2.5,
+    paddingTop: 8,
+    paddingBottom: 16,
+  },
+  titleContainer: {
+    alignItems: 'center',
+    backgroundColor: argonTheme.COLORS.ACTIVE,
+    borderRadius: 4,
+    marginRight: 9
+  },
+  containerShadow: {
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+    shadowOpacity: 0.1,
+    elevation: 1,
+  },
+  menuTitle: {
+    fontWeight: '600',
+    fontSize: 14,
+    // lineHeight: 28,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    color: argonTheme.COLORS.MUTED
+  },
+});
--- a/mobile-ui/components/index.js
+++ b/mobile-ui/components/index.js
@ -0,0 +1,19 @@
+import Button from './Button';
+import Card from './Card';
+import DrawerItem from './DrawerItem';
+import Icon from './Icon';
+import Header from './Header';
+import Input from './Input';
+import Switch from './Switch';
+import Select from './Select';
+
+export {
+  Button,
+  Card,
+  DrawerItem,
+  Icon,
+  Input,
+  Header,
+  Switch, 
+  Select
+};
--- a/mobile-ui/constants/Images.js
+++ b/mobile-ui/constants/Images.js
@ -0,0 +1,41 @@
+// local imgs
+const Onboarding = require("../assets/imgs/bg.png");
+const Logo = require("../assets/imgs/argon-logo.png");
+const LogoOnboarding = require("../assets/imgs/argon-logo-onboarding.png");
+const ProfileBackground = require("../assets/imgs/profile-screen-bg.png");
+const RegisterBackground = require("../assets/imgs/register-bg.png");
+const Pro = require("../assets/imgs/getPro-bg.png");
+const ArgonLogo = require("../assets/imgs/argonlogo.png");
+const iOSLogo = require("../assets/imgs/ios.png");
+const androidLogo = require("../assets/imgs/android.png");
+// internet imgs
+
+const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
+
+const Viewed = [
+  'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?fit=crop&w=240&q=80',
+  'https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=240&q=80',
+  'https://images.unsplash.com/photo-1551798507-629020c81463?fit=crop&w=240&q=80',
+  'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=240&q=80',
+  'https://images.unsplash.com/photo-1503642551022-c011aafb3c88?fit=crop&w=240&q=80',
+  'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=240&q=80',
+];
+
+const Products = {
+  'View article': 'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=840&q=840',
+};
+
+export default {
+  Onboarding,
+  Logo,
+  LogoOnboarding,
+  ProfileBackground,
+  ProfilePicture,
+  RegisterBackground,
+  Viewed,
+  Products,
+  Pro,
+  ArgonLogo,
+  iOSLogo,
+  androidLogo
+};
--- a/mobile-ui/constants/Theme.js
+++ b/mobile-ui/constants/Theme.js
@ -0,0 +1,32 @@
+export default {
+  COLORS: {
+    DEFAULT: '#172B4D',
+    PRIMARY: '#5E72E4',
+    SECONDARY: '#F7FAFC',
+    LABEL: '#FE2472',
+    INFO: '#11CDEF',
+    ERROR: '#F5365C',
+    SUCCESS: '#2DCE89',
+    WARNING: '#FB6340',
+    /*not yet changed */
+    MUTED: '#ADB5BD',
+    INPUT: '#DCDCDC',
+    INPUT_SUCCESS: '#7BDEB2',
+    INPUT_ERROR: '#FCB3A4',
+    ACTIVE: '#5E72E4', //same as primary
+    BUTTON_COLOR: '#9C26B0', //wtf
+    PLACEHOLDER: '#9FA5AA',
+    SWITCH_ON: '#5E72E4',
+    SWITCH_OFF: '#D4D9DD',
+    GRADIENT_START: '#6B24AA',
+    GRADIENT_END: '#AC2688',
+    PRICE_COLOR: '#EAD5FB',
+    BORDER_COLOR: '#E7E7E7',
+    BLOCK: '#E7E7E7',
+    ICON: '#172B4D',
+    HEADER: '#525F7F',
+    BORDER: '#CAD1D7',
+    WHITE: '#FFFFFF',
+    BLACK: '#000000'
+  }
+};
--- a/mobile-ui/constants/articles.js
+++ b/mobile-ui/constants/articles.js
@ -0,0 +1,29 @@
+export default [
+  {
+    title: 'Ice cream is made with carrageenan …',
+    image: 'https://images.unsplash.com/photo-1516559828984-fb3b99548b21?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
+    cta: 'View article', 
+    horizontal: true
+  },
+  {
+    title: 'Is makeup one of your daily esse …',
+    image: 'https://images.unsplash.com/photo-1519368358672-25b03afee3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2004&q=80',
+    cta: 'View article'
+  },
+  {
+    title: 'Coffee is more than just a drink: It’s …',
+    image: 'https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80',
+    cta: 'View article' 
+  },
+  {
+    title: 'Fashion is a popular style, especially in …',
+    image: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1326&q=80',
+    cta: 'View article' 
+  },
+  {
+    title: 'Argon is a great free UI packag …',
+    image: 'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=1947&q=80',
+    cta: 'View article', 
+    horizontal: true
+  },
+];
--- a/mobile-ui/constants/index.js
+++ b/mobile-ui/constants/index.js
@ -0,0 +1,11 @@
+import argonTheme from './Theme';
+import articles from './articles';
+import Images from './Images';
+import tabs from './tabs';
+
+export {
+  articles, 
+  argonTheme,
+  Images,
+  tabs
+};
--- a/mobile-ui/constants/tabs.js
+++ b/mobile-ui/constants/tabs.js
@ -0,0 +1,8 @@
+export default tabs = {
+  categories: [
+    { id: 'popular', title: 'Popular' },
+    { id: 'beauty', title: 'Beauty' },
+    { id: 'fashion', title: 'Fashion' },
+    { id: 'car_motorcycle', title: 'Car & Motorcycle' },
+  ],
+}
--- a/mobile-ui/constants/utils.js
+++ b/mobile-ui/constants/utils.js
@ -0,0 +1,6 @@
+import { Platform, StatusBar } from 'react-native';
+import { theme } from 'galio-framework';
+
+export const StatusHeight = StatusBar.currentHeight;
+export const HeaderHeight = (theme.SIZES.BASE * 3.5 + (StatusHeight || 0));
+export const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812);
--- a/mobile-ui/context/UserContext.js
+++ b/mobile-ui/context/UserContext.js
@ -1,23 +0,0 @@
-import React, { createContext, useState } from 'react'
-
-export const UserContext = createContext({});
-
-export const UserContextProvider = ({ children }) => {
-    const [user, setUser] = useState(null);
-
-    const addUser = (user) => setUser(user);
-
-    const removeUser = () => setUser(null);
-
-    const value = {
-        user,
-        addUser,
-        removeUser
-    }
-
-    return (
-        <UserContext.Provider value={value}>
-            {children}
-        </UserContext.Provider>
-    )
-}
--- a/mobile-ui/environment/api.js
+++ b/mobile-ui/environment/api.js
@ -1,3 +0,0 @@
-export class API {
-    static BASE_URL = "http://localhost:4000"
-}
--- a/mobile-ui/navigation/Menu.js
+++ b/mobile-ui/navigation/Menu.js
@ -0,0 +1,71 @@
+import { Block, Text, theme } from "galio-framework";
+import { Image, ScrollView, StyleSheet } from "react-native";
+
+import { DrawerItem as DrawerCustomItem } from "../components";
+import Images from "../constants/Images";
+import React from "react";
+
+function CustomDrawerContent({
+  drawerPosition,
+  navigation,
+  profile,
+  focused,
+  state,
+  ...rest
+}) {
+  const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
+  return (
+    <Block
+      style={styles.container}
+      forceInset={{ top: "always", horizontal: "never" }}
+    >
+      <Block flex={0.06} style={styles.header}>
+        <Image styles={styles.logo} source={Images.Logo} />
+      </Block>
+      <Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
+        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
+          {screens.map((item, index) => {
+            return (
+              <DrawerCustomItem
+                title={item}
+                key={index}
+                navigation={navigation}
+                focused={state.index === index ? true : false}
+              />
+            );
+          })}
+          <Block
+            flex
+            style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
+          >
+            <Block
+              style={{
+                borderColor: "rgba(0,0,0,0.2)",
+                width: "100%",
+                borderWidth: StyleSheet.hairlineWidth,
+              }}
+            />
+            <Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
+              DOCUMENTATION
+            </Text>
+          </Block>
+          <DrawerCustomItem title="Getting Started" navigation={navigation} />
+        </ScrollView>
+      </Block>
+    </Block>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingHorizontal: 28,
+    paddingBottom: theme.SIZES.BASE,
+    paddingTop: theme.SIZES.BASE * 3,
+    justifyContent: "center",
+  },
+});
+
+export default CustomDrawerContent;
--- a/mobile-ui/navigation/Screens.js
+++ b/mobile-ui/navigation/Screens.js
@ -0,0 +1,256 @@
+import { Animated, Dimensions, Easing } from "react-native";
+// header for screens
+import { Header, Icon } from "../components";
+import { argonTheme, tabs } from "../constants";
+
+import Articles from "../screens/Articles";
+import { Block } from "galio-framework";
+// drawer
+import CustomDrawerContent from "./Menu";
+import Elements from "../screens/Elements";
+// screens
+import Home from "../screens/Home";
+import Onboarding from "../screens/Onboarding";
+import Pro from "../screens/Pro";
+import Profile from "../screens/Profile";
+import React from "react";
+import Register from "../screens/Register";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { createStackNavigator } from "@react-navigation/stack";
+
+const { width } = Dimensions.get("screen");
+
+const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
+const Tab = createBottomTabNavigator();
+
+function ElementsStack(props) {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen
+        name="Elements"
+        component={Elements}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header title="Elements" navigation={navigation} scene={scene} />
+          ),
+          cardStyle: { backgroundColor: "#F8F9FE" },
+        }}
+      />
+      <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true,
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+function ArticlesStack(props) {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
+      <Stack.Screen
+        name="Articles"
+        component={Articles}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header title="Articles" navigation={navigation} scene={scene} />
+          ),
+          cardStyle: { backgroundColor: "#F8F9FE" },
+        }}
+      />
+      <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true,
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+function ProfileStack(props) {
+  return (
+    <Stack.Navigator
+      initialRouteName="Profile"
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
+      <Stack.Screen
+        name="Profile"
+        component={Profile}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              transparent
+              white
+              title="Profile"
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          cardStyle: { backgroundColor: "#FFFFFF" },
+          headerTransparent: true,
+        }}
+      />
+      <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true,
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+function HomeStack(props) {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title="Home"
+              search
+              options
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          cardStyle: { backgroundColor: "#F8F9FE" },
+        }}
+      />
+      <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true,
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+export default function OnboardingStack(props) {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen
+        name="Onboarding"
+        component={Onboarding}
+        option={{
+          headerTransparent: true,
+        }}
+      />
+      <Stack.Screen name="App" component={AppStack} />
+    </Stack.Navigator>
+  );
+}
+
+function AppStack(props) {
+  return (
+    <Drawer.Navigator
+      style={{ flex: 1 }}
+      drawerContent={(props) => <CustomDrawerContent {...props} />}
+      drawerStyle={{
+        backgroundColor: "white",
+        width: width * 0.8,
+      }}
+      drawerContentOptions={{
+        activeTintcolor: "white",
+        inactiveTintColor: "#000",
+        activeBackgroundColor: "transparent",
+        itemStyle: {
+          width: width * 0.75,
+          backgroundColor: "transparent",
+          paddingVertical: 16,
+          paddingHorizonal: 12,
+          justifyContent: "center",
+          alignContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+        },
+        labelStyle: {
+          fontSize: 18,
+          marginLeft: 12,
+          fontWeight: "normal",
+        },
+      }}
+      initialRouteName="Home"
+    >
+      <Drawer.Screen name="Home" component={HomeStack} />
+      <Drawer.Screen name="Profile" component={ProfileStack} />
+      <Drawer.Screen name="Account" component={Register} />
+      <Drawer.Screen name="Elements" component={ElementsStack} />
+      <Drawer.Screen name="Articles" component={ArticlesStack} />
+    </Drawer.Navigator>
+  );
+}
--- a/mobile-ui/package-lock.json
+++ b/mobile-ui/package-lock.json
--- a/mobile-ui/package.json
+++ b/mobile-ui/package.json
@ -1,14 +1,7 @@
 {
-  "name": "my-app",
+  "name": "mobile-ui",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
-  "keywords": [
-    "react",
-    "expo",
-    "template",
-    "nativebase"
-  ],
-  "license": "MIT",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
@ -18,35 +11,29 @@
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
-    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
-    "@react-navigation/native-stack": "^6.7.0",
-    "@react-navigation/stack": "^6.2.2",
-    "date-fns": "^2.29.2",
-    "expo": "^44.0.0",
-    "expo-status-bar": "~1.2.0",
-    "native-base": "3.4.0",
-    "prop-types": "^15.8.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "0.64.3",
-    "react-native-gesture-handler": "~2.1.0",
-    "react-native-reanimated": "~2.3.1",
-    "react-native-safe-area-context": "3.3.2",
-    "react-native-screens": "~3.10.1",
-    "react-native-simple-time-picker": "^1.3.11",
-    "react-native-svg": "12.1.1",
-    "react-native-table-component": "^1.2.2",
-    "react-native-web": "0.17.1",
-    "universal-cookie": "^4.0.4"
+    "expo": "~45.0.0",
+    "expo-cli": "^5.4.12",
+    "expo-status-bar": "~1.3.0",
+    "galio-framework": "^0.8.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-gesture-handler": "~2.2.1",
+    "react-native-material-dropdown": "^0.11.1",
+    "react-native-reanimated": "~2.8.0",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "~3.11.1",
+    "react-native-web": "0.17.7",
+    "react-navigation": "^4.4.4",
+    "react-navigation-stack": "^2.10.4",
+    "sharp-cli": "^2.1.1"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.12.9",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.66.13",
+    "typescript": "~4.3.5"
  },
-  "bugs": {
-    "url": "https://github.com/GeekyAnts/nativebase-templates/issues"
-  },
-  "homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
-  "author": "Aditya Jamuar",
  "private": true
 }
--- a/mobile-ui/screens/Articles.js
+++ b/mobile-ui/screens/Articles.js
@ -0,0 +1,252 @@
+//galio
+import { Block, Text, theme } from "galio-framework";
+import {
+  Dimensions,
+  Image,
+  ImageBackground,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from "react-native";
+//argon
+import { Images, argonTheme, articles } from "../constants/";
+
+import { Card } from "../components/";
+import React from "react";
+
+const { width } = Dimensions.get("screen");
+
+const thumbMeasure = (width - 48 - 32) / 3;
+const cardWidth = width - theme.SIZES.BASE * 2;
+const categories = [
+  {
+    title: "Music Album",
+    description:
+      "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
+    image:
+      "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
+    price: "$125",
+  },
+  {
+    title: "Events",
+    description:
+      "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
+    image:
+      "https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
+    price: "$35",
+  },
+];
+
+class Articles extends React.Component {
+  renderProduct = (item, index) => {
+    const { navigation } = this.props;
+
+    return (
+      <TouchableWithoutFeedback
+        style={{ zIndex: 3 }}
+        key={`product-${item.title}`}
+        onPress={() => navigation.navigate("Pro", { product: item })}
+      >
+        <Block center style={styles.productItem}>
+          <Image
+            resizeMode="cover"
+            style={styles.productImage}
+            source={{ uri: item.image }}
+          />
+          <Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
+            <Text
+              center
+              size={16}
+              color={theme.COLORS.MUTED}
+              style={styles.productPrice}
+            >
+              {item.price}
+            </Text>
+            <Text center size={34}>
+              {item.title}
+            </Text>
+            <Text
+              center
+              size={16}
+              color={theme.COLORS.MUTED}
+              style={styles.productDescription}
+            >
+              {item.description}
+            </Text>
+          </Block>
+        </Block>
+      </TouchableWithoutFeedback>
+    );
+  };
+
+  renderCards = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Cards
+        </Text>
+        <Block flex>
+          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+            <Card item={articles[0]} horizontal />
+            <Block flex row>
+              <Card
+                item={articles[1]}
+                style={{ marginRight: theme.SIZES.BASE }}
+              />
+              <Card item={articles[2]} />
+            </Block>
+            <Card item={articles[4]} full />
+            <Block flex card shadow style={styles.category}>
+              <ImageBackground
+                source={{ uri: Images.Products["View article"] }}
+                style={[
+                  styles.imageBlock,
+                  { width: width - theme.SIZES.BASE * 2, height: 252 },
+                ]}
+                imageStyle={{
+                  width: width - theme.SIZES.BASE * 2,
+                  height: 252,
+                }}
+              >
+                <Block style={styles.categoryTitle}>
+                  <Text size={18} bold color={theme.COLORS.WHITE}>
+                    View article
+                  </Text>
+                </Block>
+              </ImageBackground>
+            </Block>
+          </Block>
+          <Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
+            <ScrollView
+              horizontal={true}
+              pagingEnabled={true}
+              decelerationRate={0}
+              scrollEventThrottle={16}
+              snapToAlignment="center"
+              showsHorizontalScrollIndicator={false}
+              snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
+              contentContainerStyle={{
+                paddingHorizontal: theme.SIZES.BASE / 2,
+              }}
+            >
+              {categories &&
+                categories.map((item, index) =>
+                  this.renderProduct(item, index)
+                )}
+            </ScrollView>
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderAlbum = () => {
+    const { navigation } = this.props;
+
+    return (
+      <Block
+        flex
+        style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
+      >
+        <Text bold size={16} style={styles.title}>
+          Album
+        </Text>
+        <Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
+          <Block flex right>
+            <Text
+              size={12}
+              color={theme.COLORS.PRIMARY}
+              onPress={() => navigation.navigate("Home")}
+            >
+              View All
+            </Text>
+          </Block>
+          <Block
+            row
+            space="between"
+            style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
+          >
+            {Images.Viewed.map((img, index) => (
+              <Block key={`viewed-${img}`} style={styles.shadow}>
+                <Image
+                  resizeMode="cover"
+                  source={{ uri: img }}
+                  style={styles.albumThumb}
+                />
+              </Block>
+            ))}
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  render() {
+    return (
+      <Block flex center>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          {this.renderCards()}
+          {this.renderAlbum()}
+        </ScrollView>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  title: {
+    paddingBottom: theme.SIZES.BASE,
+    paddingHorizontal: theme.SIZES.BASE * 2,
+    marginTop: 22,
+    color: argonTheme.COLORS.HEADER,
+  },
+  group: {
+    paddingTop: theme.SIZES.BASE,
+  },
+  albumThumb: {
+    borderRadius: 4,
+    marginVertical: 4,
+    alignSelf: "center",
+    width: thumbMeasure,
+    height: thumbMeasure,
+  },
+  category: {
+    backgroundColor: theme.COLORS.WHITE,
+    marginVertical: theme.SIZES.BASE / 2,
+    borderWidth: 0,
+  },
+  categoryTitle: {
+    height: "100%",
+    paddingHorizontal: theme.SIZES.BASE,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  imageBlock: {
+    overflow: "hidden",
+    borderRadius: 4,
+  },
+  productItem: {
+    width: cardWidth - theme.SIZES.BASE * 2,
+    marginHorizontal: theme.SIZES.BASE,
+    shadowColor: "black",
+    shadowOffset: { width: 0, height: 7 },
+    shadowRadius: 10,
+    shadowOpacity: 0.2,
+  },
+  productImage: {
+    width: cardWidth - theme.SIZES.BASE,
+    height: cardWidth - theme.SIZES.BASE,
+    borderRadius: 3,
+  },
+  productPrice: {
+    paddingTop: theme.SIZES.BASE,
+    paddingBottom: theme.SIZES.BASE / 2,
+  },
+  productDescription: {
+    paddingTop: theme.SIZES.BASE,
+    // paddingBottom: theme.SIZES.BASE * 2,
+  },
+});
+
+export default Articles;
--- a/mobile-ui/screens/Elements.js
+++ b/mobile-ui/screens/Elements.js
@ -0,0 +1,487 @@
+// Galio components
+import { Block, Button as GaButton, Text, theme } from "galio-framework";
+import { Button, Header, Icon, Input, Select, Switch } from "../components/";
+import {
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+// Argon themed components
+import { argonTheme, tabs } from "../constants/";
+
+import React from "react";
+
+const { width } = Dimensions.get("screen");
+
+class Elements extends React.Component {
+  state = {
+    "switch-1": true,
+    "switch-2": false,
+  };
+
+  toggleSwitch = (switchId) =>
+    this.setState({ [switchId]: !this.state[switchId] });
+
+  renderButtons = () => {
+    return (
+      <Block flex>
+        <Text bold size={16} style={styles.title}>
+          Buttons
+        </Text>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Block center>
+            <Button color="default" style={styles.button}>
+              DEFAULT
+            </Button>
+          </Block>
+          <Block center>
+            <Button
+              color="secondary"
+              textStyle={{ color: "black", fontSize: 12, fontWeight: "700" }}
+              style={styles.button}
+            >
+              SECONDARY
+            </Button>
+          </Block>
+          <Block center>
+            <Button style={styles.button}>PRIMARY</Button>
+          </Block>
+          <Block center>
+            <Button color="info" style={styles.button}>
+              INFO
+            </Button>
+          </Block>
+          <Block center>
+            <Button color="success" style={styles.button}>
+              SUCCESS
+            </Button>
+          </Block>
+          <Block center>
+            <Button color="warning" style={styles.button}>
+              WARNING
+            </Button>
+          </Block>
+          <Block center>
+            <Button color="error" style={styles.button}>
+              ERROR
+            </Button>
+          </Block>
+          <Block row space="evenly">
+            <Block flex left style={{ marginTop: 8 }}>
+              <Select
+                defaultIndex={1}
+                options={["01", "02", "03", "04", "05"]}
+              />
+            </Block>
+            <Block flex center>
+              <Button small center color="default" style={styles.optionsButton}>
+                DELETE
+              </Button>
+            </Block>
+            <Block flex={1.25} right>
+              <Button center color="default" style={styles.optionsButton}>
+                SAVE FOR LATER
+              </Button>
+            </Block>
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderText = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Typography
+        </Text>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Text
+            h1
+            style={{ marginBottom: theme.SIZES.BASE / 2 }}
+            color={argonTheme.COLORS.DEFAULT}
+          >
+            Heading 1
+          </Text>
+          <Text
+            h2
+            style={{ marginBottom: theme.SIZES.BASE / 2 }}
+            color={argonTheme.COLORS.DEFAULT}
+          >
+            Heading 2
+          </Text>
+          <Text
+            h3
+            style={{ marginBottom: theme.SIZES.BASE / 2 }}
+            color={argonTheme.COLORS.DEFAULT}
+          >
+            Heading 3
+          </Text>
+          <Text
+            h4
+            style={{ marginBottom: theme.SIZES.BASE / 2 }}
+            color={argonTheme.COLORS.DEFAULT}
+          >
+            Heading 4
+          </Text>
+          <Text
+            h5
+            style={{ marginBottom: theme.SIZES.BASE / 2 }}
+            color={argonTheme.COLORS.DEFAULT}
+          >
+            Heading 5
+          </Text>
+          <Text
+            p
+            style={{ marginBottom: theme.SIZES.BASE / 2 }}
+            color={argonTheme.COLORS.DEFAULT}
+          >
+            Paragraph
+          </Text>
+          <Text muted>This is a muted paragraph.</Text>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderInputs = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Inputs
+        </Text>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Input right placeholder="Regular" iconContent={<Block />} />
+        </Block>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Input
+            right
+            placeholder="Regular Custom"
+            style={{
+              borderColor: argonTheme.COLORS.INFO,
+              borderRadius: 4,
+              backgroundColor: "#fff",
+            }}
+            iconContent={<Block />}
+          />
+        </Block>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Input
+            placeholder="Icon left"
+            iconContent={
+              <Icon
+                size={11}
+                style={{ marginRight: 10 }}
+                color={argonTheme.COLORS.ICON}
+                name="search-zoom-in"
+                family="ArgonExtra"
+              />
+            }
+          />
+        </Block>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Input
+            right
+            placeholder="Icon Right"
+            iconContent={
+              <Icon
+                size={11}
+                color={argonTheme.COLORS.ICON}
+                name="search-zoom-in"
+                family="ArgonExtra"
+              />
+            }
+          />
+        </Block>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Input
+            success
+            right
+            placeholder="Success"
+            iconContent={
+              <Block
+                middle
+                style={{
+                  width: 20,
+                  height: 20,
+                  borderRadius: 10,
+                  backgroundColor: argonTheme.COLORS.INPUT_SUCCESS,
+                }}
+              >
+                <Icon
+                  size={11}
+                  color={argonTheme.COLORS.ICON}
+                  name="g-check"
+                  family="ArgonExtra"
+                />
+              </Block>
+            }
+          />
+        </Block>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Input
+            error
+            right
+            placeholder="Error Input"
+            iconContent={
+              <Block
+                middle
+                style={{
+                  width: 20,
+                  height: 20,
+                  borderRadius: 10,
+                  backgroundColor: argonTheme.COLORS.INPUT_ERROR,
+                }}
+              >
+                <Icon
+                  size={11}
+                  color={argonTheme.COLORS.ICON}
+                  name="support"
+                  family="ArgonExtra"
+                />
+              </Block>
+            }
+          />
+        </Block>
+      </Block>
+    );
+  };
+
+  renderSwitches = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Switches
+        </Text>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Block
+            row
+            middle
+            space="between"
+            style={{ marginBottom: theme.SIZES.BASE }}
+          >
+            <Text size={14}>Switch is ON</Text>
+            <Switch
+              value={this.state["switch-1"]}
+              onValueChange={() => this.toggleSwitch("switch-1")}
+            />
+          </Block>
+          <Block row middle space="between">
+            <Text size={14}>Switch is OFF</Text>
+            <Switch
+              value={this.state["switch-2"]}
+              onValueChange={() => this.toggleSwitch("switch-2")}
+            />
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderTableCell = () => {
+    const { navigation } = this.props;
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Table Cell
+        </Text>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Block style={styles.rows}>
+            <TouchableOpacity onPress={() => navigation.navigate("Pro")}>
+              <Block row middle space="between" style={{ paddingTop: 7 }}>
+                <Text size={14}>Manage Options</Text>
+                <Icon
+                  name="chevron-right"
+                  family="entypo"
+                  style={{ paddingRight: 5 }}
+                />
+              </Block>
+            </TouchableOpacity>
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderSocial = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Social
+        </Text>
+        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
+          <Block row center space="between">
+            <Block flex middle right>
+              <GaButton
+                round
+                onlyIcon
+                shadowless
+                icon="facebook"
+                iconFamily="Font-Awesome"
+                iconColor={theme.COLORS.WHITE}
+                iconSize={theme.SIZES.BASE * 1.625}
+                color={theme.COLORS.FACEBOOK}
+                style={[styles.social, styles.shadow]}
+              />
+            </Block>
+            <Block flex middle center>
+              <GaButton
+                round
+                onlyIcon
+                shadowless
+                icon="twitter"
+                iconFamily="Font-Awesome"
+                iconColor={theme.COLORS.WHITE}
+                iconSize={theme.SIZES.BASE * 1.625}
+                color={theme.COLORS.TWITTER}
+                style={[styles.social, styles.shadow]}
+              />
+            </Block>
+            <Block flex middle left>
+              <GaButton
+                round
+                onlyIcon
+                shadowless
+                icon="dribbble"
+                iconFamily="Font-Awesome"
+                iconColor={theme.COLORS.WHITE}
+                iconSize={theme.SIZES.BASE * 1.625}
+                color={theme.COLORS.DRIBBBLE}
+                style={[styles.social, styles.shadow]}
+              />
+            </Block>
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  renderNavigation = () => {
+    return (
+      <Block flex style={styles.group}>
+        <Text bold size={16} style={styles.title}>
+          Navigation
+        </Text>
+        <Block>
+          <Block style={{ marginBottom: theme.SIZES.BASE }}>
+            <Header back title="Title" navigation={this.props.navigation} />
+          </Block>
+
+          <Block style={{ marginBottom: theme.SIZES.BASE }}>
+            <Header
+              white
+              back
+              title="Title"
+              navigation={this.props.navigation}
+              bgColor={argonTheme.COLORS.ACTIVE}
+              titleColor="white"
+              iconColor="white"
+            />
+          </Block>
+
+          <Block style={{ marginBottom: theme.SIZES.BASE }}>
+            <Header search title="Title" navigation={this.props.navigation} />
+          </Block>
+
+          <Block style={{ marginBottom: theme.SIZES.BASE }}>
+            <Header
+              tabs={tabs.categories}
+              search
+              title="Title"
+              navigation={this.props.navigation}
+            />
+          </Block>
+
+          <Block style={{ marginBottom: theme.SIZES.BASE }}>
+            <Header
+              options
+              search
+              title="Title"
+              optionLeft="Option 1"
+              optionRight="Option 2"
+              navigation={this.props.navigation}
+            />
+          </Block>
+        </Block>
+      </Block>
+    );
+  };
+
+  render() {
+    return (
+      <Block flex center>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 30, width }}
+        >
+          {this.renderButtons()}
+          {this.renderText()}
+          {this.renderInputs()}
+          {this.renderSocial()}
+          {this.renderSwitches()}
+          {this.renderNavigation()}
+          {this.renderTableCell()}
+        </ScrollView>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  title: {
+    paddingBottom: theme.SIZES.BASE,
+    paddingHorizontal: theme.SIZES.BASE * 2,
+    marginTop: 44,
+    color: argonTheme.COLORS.HEADER,
+  },
+  group: {
+    paddingTop: theme.SIZES.BASE * 2,
+  },
+  shadow: {
+    shadowColor: "black",
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+    shadowOpacity: 0.2,
+    elevation: 2,
+  },
+  button: {
+    marginBottom: theme.SIZES.BASE,
+    width: width - theme.SIZES.BASE * 2,
+  },
+  optionsButton: {
+    width: "auto",
+    height: 34,
+    paddingHorizontal: theme.SIZES.BASE,
+    paddingVertical: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+  },
+  inputDefault: {
+    borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
+  },
+  inputTheme: {
+    borderBottomColor: argonTheme.COLORS.PRIMARY,
+  },
+  inputInfo: {
+    borderBottomColor: argonTheme.COLORS.INFO,
+  },
+  inputSuccess: {
+    borderBottomColor: argonTheme.COLORS.SUCCESS,
+  },
+  inputWarning: {
+    borderBottomColor: argonTheme.COLORS.WARNING,
+  },
+  inputDanger: {
+    borderBottomColor: argonTheme.COLORS.ERROR,
+  },
+  social: {
+    width: theme.SIZES.BASE * 3.5,
+    height: theme.SIZES.BASE * 3.5,
+    borderRadius: theme.SIZES.BASE * 1.75,
+    justifyContent: "center",
+  },
+});
+
+export default Elements;
--- a/mobile-ui/screens/Home.js
+++ b/mobile-ui/screens/Home.js
@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Dimensions, ScrollView } from 'react-native';
+import { Block, theme } from 'galio-framework';
+
+import { Card } from '../components';
+import articles from '../constants/articles';
+const { width } = Dimensions.get('screen');
+
+class Home extends React.Component {
+  renderArticles = () => {
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.articles}>
+        <Block flex>
+          <Card item={articles[0]} horizontal  />
+          <Block flex row>
+            <Card item={articles[1]} style={{ marginRight: theme.SIZES.BASE }} />
+            <Card item={articles[2]} />
+          </Block>
+          <Card item={articles[3]} horizontal />
+          <Card item={articles[4]} full />
+        </Block>
+      </ScrollView>
+    )
+  }
+
+  render() {
+    return (
+      <Block flex center style={styles.home}>
+        {this.renderArticles()}
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  home: {
+    width: width,    
+  },
+  articles: {
+    width: width - theme.SIZES.BASE * 2,
+    paddingVertical: theme.SIZES.BASE,
+  },
+});
+
+export default Home;
--- a/mobile-ui/screens/Onboarding.js
+++ b/mobile-ui/screens/Onboarding.js
@ -0,0 +1,99 @@
+import React from "react";
+import {
+  ImageBackground,
+  Image,
+  StyleSheet,
+  StatusBar,
+  Dimensions
+} from "react-native";
+import { Block, Button, Text, theme } from "galio-framework";
+
+const { height, width } = Dimensions.get("screen");
+
+import argonTheme from "../constants/Theme";
+import Images from "../constants/Images";
+
+class Onboarding extends React.Component {
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <Block flex style={styles.container}>
+        <StatusBar hidden />
+        <Block flex center>
+        <ImageBackground
+            source={Images.Onboarding}
+            style={{ height, width, zIndex: 1 }}
+          />
+        </Block>
+        <Block center>
+          <Image source={Images.LogoOnboarding} style={styles.logo} />
+        </Block>
+        <Block flex space="between" style={styles.padded}>
+            <Block flex space="around" style={{ zIndex: 2 }}>
+              <Block style={styles.title}>
+                <Block>
+                  <Text color="white" size={60}>
+                    Design
+                  </Text>
+                </Block>
+                <Block>
+                  <Text color="white" size={60}>
+                    System
+                  </Text>
+                </Block>
+                <Block style={styles.subTitle}>
+                  <Text color="white" size={16}>
+                    Fully coded React Native components.
+                  </Text>
+                </Block>
+              </Block>
+              <Block center>
+                <Button
+                  style={styles.button}
+                  color={argonTheme.COLORS.SECONDARY}
+                  onPress={() => navigation.navigate("App")}
+                  textStyle={{ color: argonTheme.COLORS.BLACK }}
+                >
+                  Get Started
+                </Button>
+              </Block>
+          </Block>
+        </Block>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.COLORS.BLACK
+  },
+  padded: {
+    paddingHorizontal: theme.SIZES.BASE * 2,
+    position: "relative",
+    bottom: theme.SIZES.BASE,
+    zIndex: 2,
+  },
+  button: {
+    width: width - theme.SIZES.BASE * 4,
+    height: theme.SIZES.BASE * 3,
+    shadowRadius: 0,
+    shadowOpacity: 0
+  },
+  logo: {
+    width: 200,
+    height: 60,
+    zIndex: 2,
+    position: 'relative',
+    marginTop: '-50%'
+  },
+  title: {
+    marginTop:'-5%'
+  },
+  subTitle: {
+    marginTop: 20
+  }
+});
+
+export default Onboarding;
--- a/mobile-ui/screens/Pro.js
+++ b/mobile-ui/screens/Pro.js
@ -0,0 +1,100 @@
+import React from 'react';
+import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform, Linking } from 'react-native';
+import { Block, Button, Text, theme } from 'galio-framework';
+
+const { height, width } = Dimensions.get('screen');
+import { Images, argonTheme } from '../constants/';
+import { HeaderHeight } from "../constants/utils";
+
+export default class Pro extends React.Component {
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <Block flex style={styles.container}>
+        <StatusBar barStyle="light-content" />
+        <Block flex>
+          <ImageBackground
+            source={Images.Pro}
+            style={{ flex: 1, height: height, width, zIndex: 1 }}
+          />
+          <Block space="between" style={styles.padded}>
+            <Block>
+              <Block>
+                <Image source={Images.ArgonLogo}
+                  style={{ marginBottom: theme.SIZES.BASE * 1.5 }}/>
+              </Block>
+              <Block >
+                <Block>
+                  <Text color="white" size={60}>Argon</Text>
+                </Block>
+                <Block>
+                  <Text color="white" size={60}>Design</Text>
+                </Block>
+                <Block row>
+                  <Text color="white" size={60}>System</Text>
+                  <Block middle style={styles.pro}>
+                    <Text size={16} color="white">PRO</Text>
+                  </Block>
+                </Block>
+              </Block>
+              <Text size={16} color='rgba(255,255,255,0.6)' style={{ marginTop: 35 }}>
+                Take advantage of all the features and screens made upon Galio Design System, coded on React Native for both.
+              </Text>
+              <Block row style={{ marginTop: theme.SIZES.BASE * 1.5, marginBottom: theme.SIZES.BASE * 4 }}>
+                <Image
+                  source={Images.iOSLogo}
+                  style={{ height: 38, width: 82, marginRight: theme.SIZES.BASE * 1.5 }} />
+                <Image
+                  source={Images.androidLogo}
+                  style={{ height: 38, width: 140 }} />
+              </Block>
+              <Button
+                shadowless
+                style={styles.button}
+                color={argonTheme.COLORS.INFO}
+                onPress={() => Linking.openURL('https://www.creative-tim.com/product/argon-pro-react-native').catch((err) => console.error('An error occurred', err))}>
+                <Text bold color={theme.COLORS.WHITE}>BUY NOW</Text>
+              </Button>
+            </Block>
+          </Block>
+        </Block>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.COLORS.BLACK,
+    marginTop: Platform.OS === 'android' ? -HeaderHeight : 0,
+  },
+  padded: {
+    paddingHorizontal: theme.SIZES.BASE * 2,
+    zIndex: 3,
+    position: 'absolute',
+    bottom: Platform.OS === 'android' ? theme.SIZES.BASE * 2 : theme.SIZES.BASE * 3,
+  },
+  button: {
+    width: width - theme.SIZES.BASE * 4,
+    height: theme.SIZES.BASE * 3,
+    shadowRadius: 0,
+    shadowOpacity: 0,
+  },
+  pro: {
+    backgroundColor: argonTheme.COLORS.INFO,
+    paddingHorizontal: 8,
+    marginLeft: 3,
+    borderRadius: 4,
+    height: 22,
+    marginTop: 15
+  },
+  gradient: {
+    zIndex: 1,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 66,
+  },
+});
--- a/mobile-ui/screens/Profile.js
+++ b/mobile-ui/screens/Profile.js
@ -0,0 +1,342 @@
+import React from "react";
+import {
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+  Image,
+  ImageBackground,
+  Platform
+} from "react-native";
+import { Block, Text, theme } from "galio-framework";
+
+import { Button } from "../components";
+import { Images, argonTheme } from "../constants";
+import { HeaderHeight } from "../constants/utils";
+
+const { width, height } = Dimensions.get("screen");
+
+const thumbMeasure = (width - 48 - 32) / 3;
+
+class Profile extends React.Component {
+  render() {
+    return (
+      <Block flex style={styles.profile}>
+        <Block flex>
+          <ImageBackground
+            source={Images.ProfileBackground}
+            style={styles.profileContainer}
+            imageStyle={styles.profileBackground}
+          >
+            <ScrollView
+              showsVerticalScrollIndicator={false}
+              style={{ width, marginTop: '25%' }}
+            >
+              <Block flex style={styles.profileCard}>
+                <Block middle style={styles.avatarContainer}>
+                  <Image
+                    source={{ uri: Images.ProfilePicture }}
+                    style={styles.avatar}
+                  />
+                </Block>
+                <Block style={styles.info}>
+                  <Block
+                    middle
+                    row
+                    space="evenly"
+                    style={{ marginTop: 20, paddingBottom: 24 }}
+                  >
+                    <Button
+                      small
+                      style={{ backgroundColor: argonTheme.COLORS.INFO }}
+                    >
+                      CONNECT
+                    </Button>
+                    <Button
+                      small
+                      style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
+                    >
+                      MESSAGE
+                    </Button>
+                  </Block>
+                  <Block row space="between">
+                    <Block middle>
+                      <Text
+                        bold
+                        size={18}
+                        color="#525F7F"
+                        style={{ marginBottom: 4 }}
+                      >
+                        2K
+                      </Text>
+                      <Text size={12} color={argonTheme.COLORS.TEXT}>Orders</Text>
+                    </Block>
+                    <Block middle>
+                      <Text
+                        bold
+                        color="#525F7F"
+                        size={18}
+                        style={{ marginBottom: 4 }}
+                      >
+                        10
+                      </Text>
+                      <Text size={12} color={argonTheme.COLORS.TEXT}>Photos</Text>
+                    </Block>
+                    <Block middle>
+                      <Text
+                        bold
+                        color="#525F7F"
+                        size={18}
+                        style={{ marginBottom: 4 }}
+                      >
+                        89
+                      </Text>
+                      <Text size={12} color={argonTheme.COLORS.TEXT}>Comments</Text>
+                    </Block>
+                  </Block>
+                </Block>
+                <Block flex>
+                  <Block middle style={styles.nameInfo}>
+                    <Text bold size={28} color="#32325D">
+                      Jessica Jones, 27
+                    </Text>
+                    <Text size={16} color="#32325D" style={{ marginTop: 10 }}>
+                      San Francisco, USA
+                    </Text>
+                  </Block>
+                  <Block middle style={{ marginTop: 30, marginBottom: 16 }}>
+                    <Block style={styles.divider} />
+                  </Block>
+                  <Block middle>
+                    <Text
+                      size={16}
+                      color="#525F7F"
+                      style={{ textAlign: "center" }}
+                    >
+                      An artist of considerable range, Jessica name taken by
+                      Melbourne …
+                    </Text>
+                    <Button
+                      color="transparent"
+                      textStyle={{
+                        color: "#233DD2",
+                        fontWeight: "500",
+                        fontSize: 16
+                      }}
+                    >
+                      Show more
+                    </Button>
+                  </Block>
+                  <Block
+                    row
+                    space="between"
+                  >
+                    <Text bold size={16} color="#525F7F" style={{marginTop: 12}}>
+                      Album
+                    </Text>
+                    <Button
+                      small
+                      color="transparent"
+                      textStyle={{ color: "#5E72E4", fontSize: 12, marginLeft: 24 }}
+                    >
+                      View all
+                    </Button>
+                  </Block>
+                  <Block style={{ paddingBottom: -HeaderHeight * 2 }}>
+                    <Block row space="between" style={{ flexWrap: "wrap" }}>
+                      {Images.Viewed.map((img, imgIndex) => (
+                        <Image
+                          source={{ uri: img }}
+                          key={`viewed-${img}`}
+                          resizeMode="cover"
+                          style={styles.thumb}
+                        />
+                      ))}
+                    </Block>
+                  </Block>
+                </Block>
+              </Block>
+            </ScrollView>
+          </ImageBackground>
+        </Block>
+        {/* <ScrollView showsVerticalScrollIndicator={false} 
+                    contentContainerStyle={{ flex: 1, width, height, zIndex: 9000, backgroundColor: 'red' }}>
+        <Block flex style={styles.profileCard}>
+          <Block middle style={styles.avatarContainer}>
+            <Image
+              source={{ uri: Images.ProfilePicture }}
+              style={styles.avatar}
+            />
+          </Block>
+          <Block style={styles.info}>
+            <Block
+              middle
+              row
+              space="evenly"
+              style={{ marginTop: 20, paddingBottom: 24 }}
+            >
+              <Button small style={{ backgroundColor: argonTheme.COLORS.INFO }}>
+                CONNECT
+              </Button>
+              <Button
+                small
+                style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
+              >
+                MESSAGE
+              </Button>
+            </Block>
+
+            <Block row space="between">
+              <Block middle>
+                <Text
+                  bold
+                  size={12}
+                  color="#525F7F"
+                  style={{ marginBottom: 4 }}
+                >
+                  2K
+                </Text>
+                <Text size={12}>Orders</Text>
+              </Block>
+              <Block middle>
+                <Text bold size={12} style={{ marginBottom: 4 }}>
+                  10
+                </Text>
+                <Text size={12}>Photos</Text>
+              </Block>
+              <Block middle>
+                <Text bold size={12} style={{ marginBottom: 4 }}>
+                  89
+                </Text>
+                <Text size={12}>Comments</Text>
+              </Block>
+            </Block>
+          </Block>
+          <Block flex>
+              <Block middle style={styles.nameInfo}>
+                <Text bold size={28} color="#32325D">
+                  Jessica Jones, 27
+                </Text>
+                <Text size={16} color="#32325D" style={{ marginTop: 10 }}>
+                  San Francisco, USA
+                </Text>
+              </Block>
+              <Block middle style={{ marginTop: 30, marginBottom: 16 }}>
+                <Block style={styles.divider} />
+              </Block>
+              <Block middle>
+                <Text size={16} color="#525F7F" style={{ textAlign: "center" }}>
+                  An artist of considerable range, Jessica name taken by
+                  Melbourne …
+                </Text>
+                <Button
+                  color="transparent"
+                  textStyle={{
+                    color: "#233DD2",
+                    fontWeight: "500",
+                    fontSize: 16
+                  }}
+                >
+                  Show more
+                </Button>
+              </Block>
+              <Block
+                row
+                style={{ paddingVertical: 14, alignItems: "baseline" }}
+              >
+                <Text bold size={16} color="#525F7F">
+                  Album
+                </Text>
+              </Block>
+              <Block
+                row
+                style={{ paddingBottom: 20, justifyContent: "flex-end" }}
+              >
+                <Button
+                  small
+                  color="transparent"
+                  textStyle={{ color: "#5E72E4", fontSize: 12 }}
+                >
+                  View all
+                </Button>
+              </Block>
+              <Block style={{ paddingBottom: -HeaderHeight * 2 }}>
+                <Block row space="between" style={{ flexWrap: "wrap" }}>
+                  {Images.Viewed.map((img, imgIndex) => (
+                    <Image
+                      source={{ uri: img }}
+                      key={`viewed-${img}`}
+                      resizeMode="cover"
+                      style={styles.thumb}
+                    />
+                  ))}
+                </Block>
+              </Block>
+          </Block>
+        </Block>
+                  </ScrollView>*/}
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  profile: {
+    marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
+    // marginBottom: -HeaderHeight * 2,
+    flex: 1
+  },
+  profileContainer: {
+    width: width,
+    height: height,
+    padding: 0,
+    zIndex: 1
+  },
+  profileBackground: {
+    width: width,
+    height: height / 2
+  },
+  profileCard: {
+    // position: "relative",
+    padding: theme.SIZES.BASE,
+    marginHorizontal: theme.SIZES.BASE,
+    marginTop: 65,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    backgroundColor: theme.COLORS.WHITE,
+    shadowColor: "black",
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 8,
+    shadowOpacity: 0.2,
+    zIndex: 2
+  },
+  info: {
+    paddingHorizontal: 40
+  },
+  avatarContainer: {
+    position: "relative",
+    marginTop: -80
+  },
+  avatar: {
+    width: 124,
+    height: 124,
+    borderRadius: 62,
+    borderWidth: 0
+  },
+  nameInfo: {
+    marginTop: 35
+  },
+  divider: {
+    width: "90%",
+    borderWidth: 1,
+    borderColor: "#E9ECEF"
+  },
+  thumb: {
+    borderRadius: 4,
+    marginVertical: 4,
+    alignSelf: "center",
+    width: thumbMeasure,
+    height: thumbMeasure
+  }
+});
+
+export default Profile;
--- a/mobile-ui/screens/Register.js
+++ b/mobile-ui/screens/Register.js
@ -0,0 +1,215 @@
+import React from "react";
+import {
+  StyleSheet,
+  ImageBackground,
+  Dimensions,
+  StatusBar,
+  KeyboardAvoidingView
+} from "react-native";
+import { Block, Checkbox, Text, theme } from "galio-framework";
+
+import { Button, Icon, Input } from "../components";
+import { Images, argonTheme } from "../constants";
+
+const { width, height } = Dimensions.get("screen");
+
+class Register extends React.Component {
+  render() {
+    return (
+      <Block flex middle>
+        <StatusBar hidden />
+        <ImageBackground
+          source={Images.RegisterBackground}
+          style={{ width, height, zIndex: 1 }}
+        >
+          <Block safe flex middle>
+            <Block style={styles.registerContainer}>
+              <Block flex={0.25} middle style={styles.socialConnect}>
+                <Text color="#8898AA" size={12}>
+                  Sign up with
+                </Text>
+                <Block row style={{ marginTop: theme.SIZES.BASE }}>
+                  <Button style={{ ...styles.socialButtons, marginRight: 30 }}>
+                    <Block row>
+                      <Icon
+                        name="logo-github"
+                        family="Ionicon"
+                        size={14}
+                        color={"black"}
+                        style={{ marginTop: 2, marginRight: 5 }}
+                      />
+                      <Text style={styles.socialTextButtons}>GITHUB</Text>
+                    </Block>
+                  </Button>
+                  <Button style={styles.socialButtons}>
+                    <Block row>
+                      <Icon
+                        name="logo-google"
+                        family="Ionicon"
+                        size={14}
+                        color={"black"}
+                        style={{ marginTop: 2, marginRight: 5 }}
+                      />
+                      <Text style={styles.socialTextButtons}>GOOGLE</Text>
+                    </Block>
+                  </Button>
+                </Block>
+              </Block>
+              <Block flex>
+                <Block flex={0.17} middle>
+                  <Text color="#8898AA" size={12}>
+                    Or sign up the classic way
+                  </Text>
+                </Block>
+                <Block flex center>
+                  <KeyboardAvoidingView
+                    style={{ flex: 1 }}
+                    behavior="padding"
+                    enabled
+                  >
+                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
+                      <Input
+                        borderless
+                        placeholder="Name"
+                        iconContent={
+                          <Icon
+                            size={16}
+                            color={argonTheme.COLORS.ICON}
+                            name="hat-3"
+                            family="ArgonExtra"
+                            style={styles.inputIcons}
+                          />
+                        }
+                      />
+                    </Block>
+                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
+                      <Input
+                        borderless
+                        placeholder="Email"
+                        iconContent={
+                          <Icon
+                            size={16}
+                            color={argonTheme.COLORS.ICON}
+                            name="ic_mail_24px"
+                            family="ArgonExtra"
+                            style={styles.inputIcons}
+                          />
+                        }
+                      />
+                    </Block>
+                    <Block width={width * 0.8}>
+                      <Input
+                        password
+                        borderless
+                        placeholder="Password"
+                        iconContent={
+                          <Icon
+                            size={16}
+                            color={argonTheme.COLORS.ICON}
+                            name="padlock-unlocked"
+                            family="ArgonExtra"
+                            style={styles.inputIcons}
+                          />
+                        }
+                      />
+                      <Block row style={styles.passwordCheck}>
+                        <Text size={12} color={argonTheme.COLORS.MUTED}>
+                          password strength:
+                        </Text>
+                        <Text bold size={12} color={argonTheme.COLORS.SUCCESS}>
+                          {" "}
+                          strong
+                        </Text>
+                      </Block>
+                    </Block>
+                    <Block row width={width * 0.75}>
+                      <Checkbox
+                        checkboxStyle={{
+                          borderWidth: 3
+                        }}
+                        color={argonTheme.COLORS.PRIMARY}
+                        label="I agree with the"
+                      />
+                      <Button
+                        style={{ width: 100 }}
+                        color="transparent"
+                        textStyle={{
+                          color: argonTheme.COLORS.PRIMARY,
+                          fontSize: 14
+                        }}
+                      >
+                        Privacy Policy
+                      </Button>
+                    </Block>
+                    <Block middle>
+                      <Button color="primary" style={styles.createButton}>
+                        <Text bold size={14} color={argonTheme.COLORS.WHITE}>
+                          CREATE ACCOUNT
+                        </Text>
+                      </Button>
+                    </Block>
+                  </KeyboardAvoidingView>
+                </Block>
+              </Block>
+            </Block>
+          </Block>
+        </ImageBackground>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  registerContainer: {
+    width: width * 0.9,
+    height: height * 0.875,
+    backgroundColor: "#F4F5F7",
+    borderRadius: 4,
+    shadowColor: argonTheme.COLORS.BLACK,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowRadius: 8,
+    shadowOpacity: 0.1,
+    elevation: 1,
+    overflow: "hidden"
+  },
+  socialConnect: {
+    backgroundColor: argonTheme.COLORS.WHITE,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: "#8898AA"
+  },
+  socialButtons: {
+    width: 120,
+    height: 40,
+    backgroundColor: "#fff",
+    shadowColor: argonTheme.COLORS.BLACK,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowRadius: 8,
+    shadowOpacity: 0.1,
+    elevation: 1
+  },
+  socialTextButtons: {
+    color: argonTheme.COLORS.PRIMARY,
+    fontWeight: "800",
+    fontSize: 14
+  },
+  inputIcons: {
+    marginRight: 12
+  },
+  passwordCheck: {
+    paddingLeft: 15,
+    paddingTop: 13,
+    paddingBottom: 30
+  },
+  createButton: {
+    width: width * 0.5,
+    marginTop: 25
+  }
+});
+
+export default Register;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20,0H4C2.3,0,1,1.3,1,3v20c0,0.6,0.4,1,1,1h20c0.6,0,1-0.4,1-1V3C23,1.3,21.7,0,20,0z M12,16 c-3.3,0-6-2.7-6-6c0-0.6,0.4-1,1-1s1,0.4,1,1c0,2.2,1.8,4,4,4s4-1.8,4-4c0-0.6,0.4-1,1-1s1,0.4,1,1C18,13.3,15.3,16,12,16z M20,4H4 C3.4,4,3,3.6,3,3s0.4-1,1-1h16c0.6,0,1,0.4,1,1S20.6,4,20,4z"/></g></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M20,10V8A8,8,0,0,0,4,8v2a4.441,4.441,0,0,1-1.547,3.193A4.183,4.183,0,0,0,1,16c0,2.5,4.112,4,11,4s11-1.5,11-4a4.183,4.183,0,0,0-1.453-2.807A4.441,4.441,0,0,1,20,10Z" fill="#444444"/> <path data-color="color-2" d="M9.145,21.9a2.992,2.992,0,0,0,5.71,0c-.894.066-1.844.1-2.855.1S10.039,21.968,9.145,21.9Z" fill="#444444"/></g></svg>