diff --git a/.gitignore b/.gitignore
index 3aacef76a..8e7a72e4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,8 @@ npm-debug.log
 # docs
 docs/docs.json
 docs/src/input.json
+docs/src/assets/examples-build
+docs/src/examples.json
 
 # config
 config/index.js
diff --git a/docs/src/app/@theme/services/iframe-communicator.service.ts b/docs/src/app/@theme/services/iframe-communicator.service.ts
index 5f003ca9d..99e70a0b2 100644
--- a/docs/src/app/@theme/services/iframe-communicator.service.ts
+++ b/docs/src/app/@theme/services/iframe-communicator.service.ts
@@ -18,7 +18,11 @@ export class NgdIframeCommunicatorService {
   public receive(id: string): Observable<any> {
     return observableFromEvent(this.window, 'message')
       .pipe(
-        filter((msg: any) => msg.data && msg.data.id === id),
+        filter((msg: any) => {
+          if (msg.data && msg.data.id && msg.data.id.length !== 0) {
+            return msg.data && msg.data.id === id
+          }
+        }),
         map((msg: any) => msg.data),
       );
   }
diff --git a/docs/src/app/@theme/services/structure.service.ts b/docs/src/app/@theme/services/structure.service.ts
index 34a08ae1c..e7e4a81f8 100644
--- a/docs/src/app/@theme/services/structure.service.ts
+++ b/docs/src/app/@theme/services/structure.service.ts
@@ -8,17 +8,24 @@ import { Inject, Injectable } from '@angular/core';
 
 import { NgdTabbedService } from './tabbed.service';
 import { NgdTextService } from './text.service';
-import { DOCS, STRUCTURE } from '../../app.options';
+import {
+  DOCS,
+  STRUCTURE,
+  EXAMPLES_STRUCTURE,
+} from '../../app.options';
 
 @Injectable()
 export class NgdStructureService {
 
   protected prepared;
+  protected examplesHelperArray: any[];
 
   constructor(private textService: NgdTextService,
               private tabbedService: NgdTabbedService,
               @Inject(STRUCTURE) structure,
-              @Inject(DOCS) docs) {
+              @Inject(DOCS) docs,
+              @Inject(EXAMPLES_STRUCTURE) examples) {
+    this.examplesHelperArray = examples;
     this.prepared = this.prepareStructure(structure, docs);
   }
 
@@ -105,6 +112,9 @@ export class NgdStructureService {
       images = imagesObj ? imagesObj.images : [];
     }
 
+    component.overviewExamples = this.processExamples(component.overviewExamples);
+    component.examples = this.processExamples(component.examples);
+
     return {
       ...component,
       slag: this.textService.createSlag(component.name),
@@ -121,6 +131,35 @@ export class NgdStructureService {
     };
   }
 
+  protected processExamples(examples: any[]): any[] {
+    if (examples && examples.length !== 0) {
+      return examples
+        .map((example: any) => {
+          const helper: any = this.examplesHelperArray.find(item => {
+            return example.description === item.name;
+          });
+          return helper ? this.prepareExample(helper, example) : example;
+        })
+        .filter(Boolean);
+    } else {
+      return [];
+    }
+  }
+
+  protected prepareExample(helper: any, example: any): any {
+    return {
+      id: example.description,
+      name: example.description.split(/(?=[A-Z])/).join(' '),
+      files: [{
+        path: helper.path,
+        code: helper.code,
+        extension: helper.path.slice(helper.path.length - 3),
+      }],
+      code: helper.code,
+      url: `/assets/examples-build/#/${helper.name}`,
+    };
+  }
+
   protected prepareToc(item: any) {
     return item.children.reduce((acc: any[], child: any) => {
       if (child.block === 'markdown') {
diff --git a/docs/src/app/app.module.ts b/docs/src/app/app.module.ts
index 16744c748..04cb1ba06 100644
--- a/docs/src/app/app.module.ts
+++ b/docs/src/app/app.module.ts
@@ -27,11 +27,13 @@ import { NgdAppComponent } from './app.component';
 import { routes } from './app.routes';
 
 import { structure  } from '../structure';
+const docs = require('../input.json');
+const examples = require('../examples.json');
 import {
   DOCS,
   STRUCTURE,
+  EXAMPLES_STRUCTURE,
 } from './app.options';
-const docs = require('../input.json');
 
 @NgModule({
   imports: [
@@ -58,6 +60,7 @@ const docs = require('../input.json');
     Title,
     { provide: STRUCTURE, useValue: structure },
     { provide: DOCS, useValue: docs },
+    { provide: EXAMPLES_STRUCTURE, useValue: examples },
   ],
   entryComponents: [
   ],
diff --git a/docs/src/app/app.options.ts b/docs/src/app/app.options.ts
index 422667b45..a51d5e2eb 100644
--- a/docs/src/app/app.options.ts
+++ b/docs/src/app/app.options.ts
@@ -8,3 +8,4 @@ import { InjectionToken } from '@angular/core';
 
 export const STRUCTURE = new InjectionToken<any>('Docs Structure');
 export const DOCS = new InjectionToken<any>('Docs Structure');
+export const EXAMPLES_STRUCTURE = new InjectionToken<any>('Docs Structure');
diff --git a/docs/src/app/blocks/components/examples-block/examples-block.component.ts b/docs/src/app/blocks/components/examples-block/examples-block.component.ts
index ec7ad9c7a..ae482c661 100644
--- a/docs/src/app/blocks/components/examples-block/examples-block.component.ts
+++ b/docs/src/app/blocks/components/examples-block/examples-block.component.ts
@@ -16,8 +16,10 @@ import {
     <nb-card [ngdFragment]="source.slag">
       <nb-card-body>
         <h2>{{ source.name }}</h2>
-        <ngd-stacked-example-block *ngIf="hasExamples()" [content]="examples"
-                                   class="widget-block">
+        <ngd-stacked-example-block
+          *ngFor="let example of source.examples"
+          [content]="example"
+          class="widget-block">
         </ngd-stacked-example-block>
       </nb-card-body>
     </nb-card>
@@ -32,10 +34,9 @@ export class NgdExamplesBlockComponent {
   @Input('source')
   set setExamples(source: any) {
     this.source = source;
-    this.examples = source.examples;
   }
 
   hasExamples(): boolean {
-    return this.examples.length !== 0;
+    return this.source.examples.length !== 0;
   }
 }
diff --git a/docs/src/app/blocks/components/live-example-block/live-example-block.component.html b/docs/src/app/blocks/components/live-example-block/live-example-block.component.html
index 419c0e644..6957bc7d5 100644
--- a/docs/src/app/blocks/components/live-example-block/live-example-block.component.html
+++ b/docs/src/app/blocks/components/live-example-block/live-example-block.component.html
@@ -1,13 +1,6 @@
 <section class="header" >
   <strong class="title">{{ content.name }}</strong>
   <div class="actions">
-
-    <div class="action-selector">
-      <select class="action-item" [(ngModel)]="currentTheme"  (change)="switchTheme($event.target.value)">
-        <option *ngFor="let theme of themes" [value]="theme.value">{{theme.label}}</option>
-      </select>
-      <nb-icon icon="color-palette-outline"></nb-icon>
-    </div>
     <a class="btn action-item action-button" target="_blank" [href]="url">
       <nb-icon icon="external-link-outline"></nb-icon>
     </a>
diff --git a/docs/src/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/src/app/blocks/components/live-example-block/live-example-block.component.ts
index 8a4bf6ae2..b0f7124b9 100644
--- a/docs/src/app/blocks/components/live-example-block/live-example-block.component.ts
+++ b/docs/src/app/blocks/components/live-example-block/live-example-block.component.ts
@@ -35,30 +35,14 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
     return this.currentTheme === 'default';
   }
 
-  @HostBinding('class.theme-cosmic')
-  private get isCosmic() {
-    return this.currentTheme === 'cosmic';
-  }
-
-  @HostBinding('class.theme-corporate')
-  private get isCorporate() {
-    return this.currentTheme === 'corporate';
-  }
-
   iframeHeight = 0;
   alive: boolean = true;
 
-  themes: {label: string; value: string}[] = [
-    { label: 'Default', value: 'default' },
-    { label: 'Cosmic', value: 'cosmic' },
-    { label: 'Corporate', value: 'corporate' },
-  ];
-
   currentTheme: string = 'default';
   loading = true;
 
   get url(): string {
-    return this.location.prepareExternalUrl(`example/${this.content.id}`);
+    return this.location.prepareExternalUrl(this.content.url);
   }
 
   get iframeWindow(): Window {
@@ -94,11 +78,6 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
     this.alive = false;
   }
 
-  switchTheme(theme: string) {
-    this.analytics.trackEvent('changeTheme', theme);
-    this.communicator.send({ id: this.content.id, theme }, this.iframeWindow);
-  }
-
   switchToInlineVew() {
     this.changeView.emit(NgdExampleView.INLINE);
   }
diff --git a/docs/src/app/blocks/components/overview-block/overview-block.component.ts b/docs/src/app/blocks/components/overview-block/overview-block.component.ts
index ac36460d5..6f871ed79 100644
--- a/docs/src/app/blocks/components/overview-block/overview-block.component.ts
+++ b/docs/src/app/blocks/components/overview-block/overview-block.component.ts
@@ -19,14 +19,11 @@ import {
           <ng-container>
             <div [innerHTML]="description"
                  [ngStyle]="hasImage && {'margin-bottom': '16px'}"></div>
-            <ngd-overview-example
+            <ngd-stacked-example-block
               *ngFor="let example of source.overviewExamples"
-              [example]="example">
-            </ngd-overview-example>
-            <img
-              *ngFor="let image of images"
-              src={{image}}
-            />
+              [content]="example"
+              class="widget-block">
+            </ngd-stacked-example-block>
           </ng-container>
         </ng-container>
       </nb-card-body>
@@ -52,5 +49,4 @@ export class NgdOverviewBlockComponent {
     this.images = source.images.map((image: string) => `assets/images/overview/${image}`);
     return source;
   }
-
 }
diff --git a/docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts b/docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts
index eebdccc21..af544e1b5 100644
--- a/docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts
+++ b/docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts
@@ -1,38 +1,65 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-import {
-  Component,
-  Input,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+
 import { NgdExampleView } from '../../enum.example-view';
 import { NgdAnalytics } from '../../../@theme/services';
+import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
+
+export const pulse = animation(
+  animate(
+    '{{ timing }}s {{ delay }}s',
+    keyframes([
+      style({ transform: 'scale3d(1, 1, 1)' }),
+      style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
+      style({ transform: 'scale3d(1, 1, 1)' }),
+    ]),
+  ),
+  { params: { scale: 1.02, timing: 0.5, delay: 0 } },
+);
 
 @Component({
   selector: 'ngd-stacked-example-block',
   template: `
-    <div>
-      <ngd-tabbed-example-block [content]="content"
+    <div *ngIf="isLiveExample">
+      <ngd-live-example-block [hidden]="!isLive"
+                              [@exampleState]="isLive ? 'live': 'code'"
+                              [content]="content"
+                              hasViewSwitch="true"
+                              (changeView)="changeView($event)">
+      </ngd-live-example-block>
+
+      <ngd-tabbed-example-block [hidden]="isLive"
+                                [@exampleState]="isLive ? 'live': 'code'"
+                                [content]="content"
                                 hasViewSwitch="true"
                                 (changeView)="changeView($event)">
       </ngd-tabbed-example-block>
     </div>
+    <div *ngIf="!isLiveExample">
+      <ngd-overview-example [example]="content">
+      </ngd-overview-example>
+    </div>
   `,
+  animations: [
+    trigger('exampleState', [
+      transition('live => code', [
+        useAnimation(pulse),
+      ]),
+      transition('code => live', [
+        useAnimation(pulse),
+      ]),
+    ]),
+  ],
 })
-export class NgdStackedExampleComponent {
+export class NgdStackedExampleComponent implements OnInit {
 
-  content: any;
+  @Input() content: any;
+  isLive = true;
+  isLiveExample: boolean;
 
-  @Input('content')
-  set setContent(source: any) {
-    this.content = source;
+  ngOnInit(): void {
+    this.isLiveExample = this.content.hasOwnProperty('id');
   }
 
-  isLive = false;
-
   constructor(private analytics: NgdAnalytics) {
   }
 
diff --git a/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html b/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html
index ef95006c0..4604c3a19 100644
--- a/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html
+++ b/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html
@@ -1,7 +1,13 @@
+<button type="button"
+        *ngIf="hasViewSwitch"
+        class="btn action-item action-button"
+        (click)="switchToLiveView()">
+  <nb-icon icon="image-outline"></nb-icon>
+  <span class="text">Live view</span>
+</button>
+
 <nb-tabset class="tabs-container">
-  <nb-tab *ngFor="let example of examples"
-          tabTitle="{{ example.description }}"
-          [active]="example.active">
-    <ngd-code-block [path]="example.path" [code]="example.code"></ngd-code-block>
+  <nb-tab *ngFor="let example of examples" tabTitle="{{ example.extension }}" [active]="example.active">
+    <ngd-code-block [code]="example.code"></ngd-code-block>
   </nb-tab>
 </nb-tabset>
diff --git a/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts b/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts
index 05f34d77d..a283599d2 100644
--- a/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts
+++ b/docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts
@@ -6,6 +6,8 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
+import { forkJoin,  of as observableOf,  Observable } from 'rxjs';
+import { map,  catchError } from 'rxjs/operators';
 import { NgdCodeLoaderService } from '../../../@theme/services';
 import { NgdExampleView } from '../../enum.example-view';
 
@@ -20,24 +22,27 @@ export class NgdTabbedExampleBlockComponent {
 
   @Input() hasViewSwitch = false;
   @Output() changeView = new EventEmitter<NgdExampleView>();
-  examples: any[];
+  examples = [];
 
   @Input()
-  set content(content: any) {
-    this.examples = content;
-    this.examples.map((item: any) => {
-      item.code = this.prepareCode(item.code);
-      item.path = 'path';
-      return item;
-    });
+  set content({ files }) {
+    this.examples = files;
     this.examples[0].active = true;
   }
 
   constructor(private codeLoader: NgdCodeLoaderService, private cd: ChangeDetectorRef) {
   }
 
-  private prepareCode(code: string): string {
-    return code.replace(/`/g, '');
+  switchToLiveView() {
+    this.changeView.emit(NgdExampleView.LIVE);
   }
 
+  private load(path): Observable<any> {
+    const extension = path.split('.').pop();
+    return this.codeLoader.load(path)
+      .pipe(
+        map(code => ({ code, path, extension })),
+        catchError(e => observableOf('')),
+      );
+  }
 }
diff --git a/docs/src/structure.ts b/docs/src/structure.ts
index 4042faceb..901c900b9 100644
--- a/docs/src/structure.ts
+++ b/docs/src/structure.ts
@@ -429,24 +429,11 @@ export const structure = [
         icon: 'calendar.svg',
         source: [
           'Calendar',
-        ],
-        overview: [
-          {
-            name: 'Calendar',
-            images: [],
-          },
-        ],
-      },
-      {
-        type: 'tabs',
-        name: 'RangeCalendar',
-        icon: 'calendar.svg',
-        source: [
           'RangeCalendar',
         ],
         overview: [
           {
-            name: 'RangeCalendar',
+            name: 'Calendar',
             images: [],
           },
         ],
@@ -457,24 +444,11 @@ export const structure = [
         icon: 'calendar.svg',
         source: [
           'Datepicker',
-        ],
-        overview: [
-          {
-            name: 'Datepicker',
-            images: [],
-          },
-        ],
-      },
-      {
-        type: 'tabs',
-        name: 'RangeDatepicker',
-        icon: 'calendar.svg',
-        source: [
           'RangeDatepicker',
         ],
         overview: [
           {
-            name: 'RangeDatepicker',
+            name: 'Datepicker',
             images: [],
           },
         ],
@@ -484,6 +458,7 @@ export const structure = [
         name: 'Radio',
         icon: 'radio.svg',
         source: [
+          'RadioGroup',
           'Radio',
         ],
         overview: [
@@ -493,14 +468,6 @@ export const structure = [
           },
         ],
       },
-      {
-        type: 'tabs',
-        name: 'RadioGroup',
-        icon: 'radio-group.svg',
-        source: [
-          'RadioGroup',
-        ],
-      },
       {
         type: 'tabs',
         name: 'Toggle',
diff --git a/package-lock.json b/package-lock.json
index 62a4ba8cb..ee1bf71f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -813,6 +813,16 @@
         "minimist": "^1.2.0"
       }
     },
+    "@dsherret/to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@dsherret/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha1-H2R13IvZdM6gei2vOGSzF7HdMyw=",
+      "dev": true,
+      "requires": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      }
+    },
     "@eva-design/dss": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@eva-design/dss/-/dss-1.2.0.tgz",
@@ -1822,12 +1832,40 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
+      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.3",
+        "run-parallel": "^1.1.9"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+          "dev": true
+        }
+      }
+    },
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@nodelib/fs.walk": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
+      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.3",
+        "fastq": "^1.6.0"
+      }
+    },
     "@react-native-community/cli": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-1.11.2.tgz",
@@ -3580,6 +3618,12 @@
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
       "dev": true
     },
+    "code-block-writer": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.0.0.tgz",
+      "integrity": "sha512-UIlTeLDLvu9YDmxh566yrnKCTBULJNCF+oUoRTv8gmt5/DIqp7pozkUu5hnpUPWjgIHEqkOeAiSGuN8E3A+Wuw==",
+      "dev": true
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -5252,6 +5296,15 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fastq": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
+      "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.0"
+      }
+    },
     "fb-watchman": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
@@ -7778,6 +7831,12 @@
         "is-extglob": "^1.0.0"
       }
     },
+    "is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "dev": true
+    },
     "is-number": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
@@ -11772,6 +11831,39 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "multimatch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
+      "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
+      "dev": true,
+      "requires": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "array-differ": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+          "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "arrify": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+          "dev": true
+        }
+      }
+    },
     "multipipe": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
@@ -12493,6 +12585,12 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "picomatch": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
+      "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
+      "dev": true
+    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -13612,6 +13710,12 @@
       "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
       "dev": true
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -13642,6 +13746,12 @@
       "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==",
       "dev": true
     },
+    "run-parallel": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "dev": true
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -14915,6 +15025,171 @@
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "ts-morph": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-4.2.0.tgz",
+      "integrity": "sha512-KKSCYkAmXSoa6Mwfa1KI0j5rCkjHsG9QwEHgEfnDlQDEBHPQneXBf5NtGo4/oiNUxN1fXOtqKZPSyKozAV25bA==",
+      "dev": true,
+      "requires": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "chalk": "^2.4.2",
+        "code-block-writer": "^10.0.0",
+        "fs-extra": "^8.1.0",
+        "glob-parent": "^5.1.0",
+        "globby": "^10.0.1",
+        "is-negated-glob": "^1.0.0",
+        "multimatch": "^4.0.0",
+        "typescript": "^3.0.1"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "dir-glob": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+          "dev": true,
+          "requires": {
+            "path-type": "^4.0.0"
+          }
+        },
+        "fast-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.0.tgz",
+          "integrity": "sha512-TrUz3THiq2Vy3bjfQUB2wNyPdGBeGmdjbzzBLhfHN4YFurYptCKwGq/TfiRavbGywFRzY6U2CdmQ1zmsY5yYaw==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
+          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globby": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
+          "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
+          "dev": true,
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.0.3",
+            "glob": "^7.1.3",
+            "ignore": "^5.1.1",
+            "merge2": "^1.2.3",
+            "slash": "^3.0.0"
+          }
+        },
+        "ignore": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
+          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
+          "dev": true
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
     "ts-node": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.3.0.tgz",
diff --git a/package.json b/package.json
index 96cd03450..f23cbacf2 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
     "build:dev": "npm run build -- dev && npm run build:transform -- dev",
     "build:prod": "npm run build -- prod && npm run build:transform -- prod",
     "clean": "rimraf ./dist",
-    "docs:parse": "gulp docs",
+    "docs:examples:build": "cd src/playground && npm run build:web",
+    "docs:generate:navigation": "gulp generate-navigation",
+    "docs:parse": "gulp generate-navigation && gulp docs",
     "docs:build": "cd docs && npm run build",
     "docs:build:prod": "cd docs && npm run build:prod",
     "docs:serve": "cd docs && npm start",
@@ -89,6 +91,7 @@
     "react-native-testing-library": "^1.5.0",
     "react-test-renderer": "16.8.3",
     "rimraf": "^2.6.2",
+    "ts-morph": "^4.2.0",
     "ts-node": "^3.2.2",
     "tscpaths": "0.0.9",
     "tslint": "^5.12.1",
diff --git a/scripts/gulp/tasks/docs/docs.ts b/scripts/gulp/tasks/docs/docs.ts
index f132f85fa..b96dfbec9 100644
--- a/scripts/gulp/tasks/docs/docs.ts
+++ b/scripts/gulp/tasks/docs/docs.ts
@@ -3,8 +3,8 @@ import * as path from 'path';
 import {
   src,
   task,
+  dest,
 } from 'gulp';
-import './example';
 import {
   createDocThemes,
   DocThemes,
@@ -12,11 +12,40 @@ import {
 
 const typedoc = require('gulp-typedoc');
 const exec = require('child_process').execSync;
+const glob = require('glob');
+import { generateDocsNavigation } from './navigation';
+
+interface ExampleCode {
+  name: string;
+  code: string;
+  path: string;
+}
+
+const SHOWCASE_KEY_WORD: string = 'Showcase';
 
 task('generate-doc-json', generateDocJson);
 task('process-type-doc', ['generate-doc-json'], processTypeDoc);
 task('docs', ['generate-doc-json', 'process-type-doc']);
 
+task('get-examples-code', getExamplesCode);
+
+task('build-live-examples-app', buildLiveExamplesApplication);
+
+task('copy-live-examples-app', ['build-live-examples-app'], copyLiveExamplesAppToDocsAppAssets);
+
+task('revert-navigation', ['copy-live-examples-app'], revertNavigationChanges);
+
+task('docs', [
+  'generate-doc-json',
+  'process-type-doc',
+  'get-examples-code',
+  'build-live-examples-app',
+  'copy-live-examples-app',
+  'revert-navigation',
+]);
+
+task('generate-navigation', generateDocsNavigation);
+
 function generateDocJson() {
   return src(['src/framework/**/*.tsx', '!src/framework/**/*.spec.tsx'])
     .pipe(typedoc({
@@ -49,3 +78,36 @@ function processTypeDoc(): void {
 
   return fs.writeFileSync(outputFilePath, output);
 }
+
+function getExamplesCode() {
+  glob('src/playground/src/ui/screen/showcases/**/*.tsx', (error, filePaths) => {
+    if (!error) {
+      const examples: ExampleCode[] = filePaths.map((pathItem: string) => {
+        const code: string = fs.readFileSync(pathItem, 'utf8');
+        const name: string = code
+          .split(' ')
+          .filter((item: string) => item.includes(SHOWCASE_KEY_WORD))[0]
+          .replace(SHOWCASE_KEY_WORD, '');
+
+        return { code, path: pathItem, name };
+      });
+
+      fs.writeFileSync('./docs/src/examples.json', JSON.stringify(examples, null, 2));
+    }
+  });
+}
+
+function buildLiveExamplesApplication() {
+  return exec('npm run docs:examples:build');
+}
+
+function copyLiveExamplesAppToDocsAppAssets() {
+  return src(['src/playground/web-build/**/*'])
+    .pipe(dest('docs/src/assets/examples-build'));
+}
+
+function revertNavigationChanges() {
+  exec('git checkout @ -- src/playground/src/navigation/navigation.component.tsx');
+  exec('git checkout @ -- src/playground/src/ui/screen/index.ts');
+  fs.unlink('src/playground/src/ui/screen/showcases/index.ts', () => {});
+}
diff --git a/scripts/gulp/tasks/docs/example.ts b/scripts/gulp/tasks/docs/example.ts
deleted file mode 100644
index cec3059d3..000000000
--- a/scripts/gulp/tasks/docs/example.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { dest, src, task } from 'gulp';
-import { accessSync, readFileSync, writeFileSync } from 'fs';
-import { DOCS_OUTPUT, EXTENSIONS } from '../config';
-import { join } from 'path';
-
-const del = require('del');
-const replace = require('gulp-replace');
-
-/**
- * Copy everything from with-layout and without-layout dirs
- * directly into examples dir. This way we can reference examples
- * without specifying this dirs.
- * For example, @stacked-example(..., button/button-showcase.component)
- * instead of @stacked-example(..., layout/button/button-showcase.component)
- */
-const EXAMPLES_SRC = [
-  './src/playground/*.*',
-  './src/playground/with-layout/**/*.*',
-  './src/playground/without-layout/**/*.*',
-];
-const EXAMPLES_DEST = './docs/assets/examples';
-
-task('copy-examples', () => {
-  del.sync(EXAMPLES_DEST);
-  src(EXAMPLES_SRC)
-    .pipe(replace(/\/\*\*.*\*\/\n\s*\n/s, ''))
-    .pipe(dest(EXAMPLES_DEST));
-});
-
-// task('find-full-examples', ['parse-themes', 'validate-examples'], () => {
-//   const docs = JSON.parse(readFileSync(DOCS_OUTPUT, 'utf8'));
-//   docs.classes.forEach(cls => {
-//     cls.overview = cls.overview.map(unfold);
-//     cls.liveExamples = cls.liveExamples.map(unfold);
-//   });
-//   writeFileSync(DOCS_OUTPUT, JSON.stringify(docs));
-// });
-
-// task('validate-examples', ['parse-themes'], () => {
-//   const docs = JSON.parse(readFileSync(DOCS_OUTPUT, 'utf8'));
-//   docs.classes.forEach(cls => validate(cls));
-// });
-
-function unfold(tag) {
-  if (tag.type === 'text') {
-    return tag;
-  }
-
-  return unfoldWithFiles(tag);
-}
-
-function unfoldWithFiles(tag) {
-  if (isFile(tag.content.id)) {
-    return unfoldFile(tag);
-  }
-
-  return unfoldComponent(tag);
-}
-
-function unfoldFile(tag) {
-  const id = withoutExtension(tag.content.id);
-  const files = [tag.content.id];
-  return createNode(tag, files, id);
-}
-
-function unfoldComponent(tag) {
-  const files = EXTENSIONS
-    .map(extension => `${tag.content.id}.${extension}`)
-    .filter(isFileExists);
-
-  return createNode(tag, files);
-}
-
-function createNode(tag, files, id = tag.content.id) {
-  return {
-    ...tag,
-    content: {
-      ...tag.content,
-      files,
-      id,
-    },
-  };
-}
-
-function validate(cls) {
-  const examples = cls.overview
-    .filter(({ type }) => type !== 'text')
-    .map(({ content }) => content);
-
-  const missing = examples.filter(({ id }) => !isFileExists(id) && !isComponentExists(id));
-
-  if (missing.length) {
-    throw new Error(createMissingMsg(missing));
-  }
-}
-
-function createMissingMsg(examples): string {
-  const missing = examples.map(({ id, name }) => `${name}, ${id}`);
-  return `Can't resolve:\n${missing.join('\n')}`;
-}
-
-function isComponentExists(path): boolean {
-  return EXTENSIONS
-    .map(extension => `${path}.${extension}`)
-    .some(isFileExists);
-}
-
-function isFileExists(file): boolean {
-  try {
-    const path = join(EXAMPLES_DEST, file);
-    accessSync(path);
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isFile(id) {
-  return EXTENSIONS.some(extension => id.endsWith(extension));
-}
-
-function withoutExtension(file) {
-  return file.replace(/\.(ts|html|scss)/, '');
-}
diff --git a/scripts/gulp/tasks/docs/navigation.ts b/scripts/gulp/tasks/docs/navigation.ts
new file mode 100644
index 000000000..83c44d65f
--- /dev/null
+++ b/scripts/gulp/tasks/docs/navigation.ts
@@ -0,0 +1,133 @@
+import {
+  Project,
+  SourceFile,
+} from 'ts-morph';
+import * as fs from 'fs';
+
+const glob = require('glob');
+
+const SHOWCASE_KEY_WORD: string = 'Showcase';
+
+export function generateDocsNavigation() {
+  const project: Project = new Project();
+  generateShowcasesExportsDocumentationExamples(project);
+  generateShowcasesExportsScreens(project);
+  generateNavigationFile(project);
+}
+
+function generateNavigationFile(project: Project) {
+  const navigationFile: SourceFile = project
+    .addExistingSourceFile('src/playground/src/navigation/navigation.component.tsx');
+  const statements = navigationFile.getStructure().statements;
+  const showcasesNames: string[] = getShowcasesNames();
+  const showcasesRoutes: string[] = getShowcasesRoutes(showcasesNames);
+
+  if (statements) {
+    // @ts-ignore
+    statements = statements.map((statement: any) => {
+      if (statement.moduleSpecifier === '../ui/screen') {
+        const showcasesImports = getShowcasesImportsStructure(showcasesNames);
+        statement.namedImports = statement.namedImports.concat(showcasesImports);
+      }
+      const isRoutesObject: boolean =
+        statement.declarations &&
+        statement.declarations.length !== 0 &&
+        statement.declarations[0].name === 'routes';
+      if (isRoutesObject) {
+        const existingRoutesString: string = statement.declarations[0].initializer.split('}')[0];
+        statement.declarations[0].initializer =
+          existingRoutesString + showcasesRoutes.join(',') + '}';
+      }
+
+      return statement;
+    });
+  }
+
+  const sourceFile = project.createSourceFile(
+    'src/playground/src/navigation/navigation.component.tsx',
+    {
+      statements: statements,
+    },
+    {
+      overwrite: true,
+    },
+  );
+  sourceFile.save();
+}
+
+function generateShowcasesExportsDocumentationExamples(project: Project) {
+  project.createWriter();
+  const showcasesDirs: string[] = fs
+    .readdirSync('src/playground/src/ui/screen/showcases', { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
+
+  const indexContent: string = showcasesDirs
+    .map((dirName: string) => {
+      return `export * from './${dirName}';\n`;
+    })
+    .join()
+    .replace(/,/g, '');
+  const indexFile = project.createSourceFile(
+    'src/playground/src/ui/screen/showcases/index.ts',
+    indexContent,
+    { overwrite: true },
+  );
+  indexFile.save();
+}
+
+function generateShowcasesExportsScreens(project: Project) {
+  const indexFile: SourceFile = project
+    .addExistingSourceFile('src/playground/src/ui/screen/index.ts');
+  const showcasesNames: string[] = getShowcasesNames();
+
+  const indexStatements = indexFile.getStructure().statements;
+
+  const showcasesExportStatement = {
+    kind: 9,
+    moduleSpecifier: './showcases',
+    namedExports: showcasesNames.map((name: string) => ({
+      kind: 10,
+      name: name,
+    })),
+  };
+
+  // @ts-ignore
+  indexStatements.push(showcasesExportStatement);
+  const sourceFile = project.createSourceFile(
+    'src/playground/src/ui/screen/index.ts',
+    {
+      statements: indexStatements,
+    },
+    {
+      overwrite: true,
+    },
+  );
+  sourceFile.save();
+}
+
+function getShowcasesNames() {
+  return glob.sync('src/playground/src/ui/screen/showcases/**/*.tsx')
+    .map((path: string) => {
+      const code: string = fs.readFileSync(path, 'utf8');
+      return code
+        .split(' ')
+        .filter((item: string) => item.includes(SHOWCASE_KEY_WORD))[0];
+    });
+}
+
+function getShowcasesImportsStructure(names: string[]): { kind: number; name: string; }[] {
+  return names.map((name: string) => {
+    return {
+      name: name,
+      kind: 15,
+    };
+  });
+}
+
+function getShowcasesRoutes(names: string[]): string[] {
+  return names.map((name: string) => {
+    const propName: string = name.replace(SHOWCASE_KEY_WORD, '');
+    return `['${propName}']: () => sharingHeightContainer(${name}, '${propName}')\n`;
+  });
+}
diff --git a/src/framework/ui/avatar/avatar.component.tsx b/src/framework/ui/avatar/avatar.component.tsx
index f46e7d9d3..5b4b2734b 100644
--- a/src/framework/ui/avatar/avatar.component.tsx
+++ b/src/framework/ui/avatar/avatar.component.tsx
@@ -42,61 +42,15 @@ export type AvatarElement = React.ReactElement<AvatarProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example AvatarSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Avatar } from 'react-native-ui-kitten';
+ * @overview-example AvatarSize
  *
- * export const AvatarShowcase = (props) => (
- *   <Avatar source={require('path-to-assets/local-image.png')} />
- * );
- * ```
+ * @overview-example AvatarShape
  *
- * @overview-example Remote Images
+ * @example AvatarRemoteImages
  *
- * ```
- * import React from 'react';
- * import { Avatar } from 'react-native-ui-kitten';
- *
- * export const AvatarShowcase = (props) => (
- *   <Avatar source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }} />
- * );
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Avatar } from 'react-native-ui-kitten';
- *
- * export const AvatarShowcase = (props) => (
- *   <Avatar
- *     source={require('path-to-assets/local-image.png')}
- *     size='large'
- *     shape='rounded'
- *   />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Avatar } from 'react-native-ui-kitten';
- *
- * export const AvatarShowcase = (props) => (
- *   <Avatar
- *     style={styles.avatar}
- *     source={require('path-to-assets/local-image.png')}
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   avatar: { width: 96, height: 96, borderRadius: 16 }
- * });
- * ```
+ * @example AvatarInlineStyling
  */
 export class AvatarComponent extends React.Component<AvatarProps> {
 
diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
index 0a24878cd..0a67ec200 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
@@ -58,34 +58,7 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
- *
- * ```
- * import React from 'react';
- * import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
- *
- * export class BottomNavigationShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onTabSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <BottomNavigation
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onTabSelect}>
- *          <BottomNavigationTab title='Dashboard' />
- *          <BottomNavigationTab title='Settings' />
- *       </BottomNavigation>
- *     );
- *   }
- * }
- * ```
+ * @overview-example BottomNavigationSimpleUsage
  *
  * @overview-example With React Navigation
  *
@@ -121,57 +94,11 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
  * });
  * ```
  *
- * @example Without Indicator
- *
- * ```
- * import React from 'react';
- * import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
- *
- * export class BottomNavigationShowcase extends React.Component {
+ * @example BottomNavigationWithoutIndicator
  *
- *   state = {
- *     selectedIndex: 0,
- *   };
+ * @overview-example BottomNavigationWithIcons
  *
- *   onTabSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render()  {
- *     return (
- *       <BottomNavigation
- *          appearance='noIndicator'
- *          selectedIndex={this.state.selectedIndex}
- *          onSelect={this.onTabSelect}>
- *          <BottomNavigationTab title='Dashboard' />
- *          <BottomNavigationTab title='Settings' />
- *       </BottomNavigation>
- *     );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
- *
- * export const BottomNavigationShowcase = (props) => (
- *   <BottomNavigation
- *      style={styles.bottomNavigation}
- *      indicatorStyle={styles.indicator}>
- *      <BottomNavigationTab title='Dashboard' />
- *      <BottomNavigationTab title='Settings' />
- *   </BottomNavigation>
- * );
- *
- * const styles = StyleSheet.create({
- *   bottomNavigation: { backgroundColor: 'white' },
- *   indicator: { backgroundColor: 'black' },
- * });
- * ```
+ * @example BottomNavigationInlineStyling
  */
 export class BottomNavigationComponent extends React.Component<BottomNavigationProps> {
 
diff --git a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
index 6cab7dc2c..76cb7b0b6 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
@@ -60,71 +60,13 @@ export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabP
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example BottomNavigationTabSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { BottomNavigationTab } from 'react-native-ui-kitten';
+ * @overview-example BottomNavigationTabWithIcon
  *
- * export const BottomNavigationTabShowcase = (props) => (
- *   <BottomNavigationTab title='Dashboard' />
- * );
- * ```
+ * @example BottomNavigationTabWithExternalSourceIcon
  *
- * @overview-example With Icon
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { BottomNavigationTab, Icon } from 'react-native-ui-kitten';
- *
- * const DashboardIcon = (style) => (
- *   <Icon {...style} name='layout' />
- * );
- *
- * export const BottomNavigationTabShowcase = (props) => (
- *   <BottomNavigationTab title='Dashboard' icon={DashboardIcon} />
- * );
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { BottomNavigationTab } from 'react-native-ui-kitten';
- *
- * const DashboardIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const BottomNavigationTabShowcase = (props) => (
- *   <BottomNavigationTab title='Dashboard' icon={DashboardIcon} />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { BottomNavigationTab } from 'react-native-ui-kitten';
- *
- * export const BottomNavigationTabShowcase = (props) => (
- *   <BottomNavigationTab
- *     style={styles.tab}
- *     titleStyle={styles.tabTitle}
- *     title='Dashboard'
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   tab: { backgroundColor: 'white' },
- *   tabTitle: { color: 'black' },
- * });
- * ```
+ * @example BottomNavigationTabInlineStyling
  */
 export class BottomNavigationTabComponent extends React.Component<BottomNavigationTabProps> {
 
diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx
index 16b2a64d8..0a598e68a 100644
--- a/src/framework/ui/button/button.component.tsx
+++ b/src/framework/ui/button/button.component.tsx
@@ -71,94 +71,19 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example ButtonSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Button } from 'react-native-ui-kitten';
+ * @overview-example ButtonAppearances
  *
- * export const ButtonShowcase = (props) => {
+ * @overview-example ButtonStatus
  *
- *   const onPress = () => {
- *     // Handle Button press
- *   };
+ * @overview-example ButtonSize
  *
- *   return (
- *     <Button onPress={onPress}>BUTTON</Button>
- *   );
- * };
- * ```
+ * @overview-example ButtonOutline
  *
- * @overview-example With Icon
+ * @overview-example ButtonGhost
  *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Button, Icon } from 'react-native-ui-kitten';
- *
- * const FacebookIcon = (style) => (
- *   <Icon {...style} name='facebook' />
- * );
- *
- * export const LoginButton = (props) => (
- *   <Button icon={FacebookIcon}>Login with Facebook</Button>
- * );
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Button } from 'react-native-ui-kitten';
- *
- * export const ButtonShowcase = (props) => (
- *   <Button
- *     appearance='outline'
- *     status='danger'
- *     size='large'>
- *     BUTTON
- *   </Button>
- * );
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Button } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const StarButton = (props) => (
- *   <Button icon={StarIcon}>BUTTON</Button>
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Button } from 'react-native-ui-kitten';
- *
- * export const ButtonShowcase = (props) => (
- *   <Button
- *     style={styles.button}
- *     textStyle={styles.buttonText}>
- *     BUTTON
- *   </Button>
- * );
- *
- * const styles = StyleSheet.create({
- *   button: { borderRadius: 8 },
- *   buttonText: { color: 'white' },
- * });
- * ```
+ * @overview-example ButtonWithIcon
  */
 export class ButtonComponent extends React.Component<ButtonProps> {
 
diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
index a0de04416..d01d4352f 100644
--- a/src/framework/ui/buttonGroup/buttonGroup.component.tsx
+++ b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
@@ -51,57 +51,13 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example ButtonGroupSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Button, ButtonGroup } from 'react-native-ui-kitten';
+ * @overview-example ButtonGroupStatus
  *
- * export const ButtonGroupShowcase = (props) => (
- *   <ButtonGroup>
- *     <Button>Left</Button>
- *     <Button>Mid</Button>
- *     <Button>Right</Button>
- *   </ButtonGroup>
- * );
- * ```
+ * @overview-example ButtonGroupSize
  *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Button, ButtonGroup } from 'react-native-ui-kitten';
- *
- * export const DangerButtonGroup = (props) => (
- *   <ButtonGroup
- *     size='large'
- *     status='danger'>
- *     <Button>Left</Button>
- *     <Button>Mid</Button>
- *     <Button>Right</Button>
- *   </ButtonGroup>
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Button, ButtonGroup } from 'react-native-ui-kitten';
- *
- * export const ButtonGroupShowcase = (props) => (
- *   <ButtonGroup style={styles.buttonGroup}>
- *     <Button>Left</Button>
- *     <Button>Mid</Button>
- *     <Button>Right</Button>
- *   </ButtonGroup>
- * );
- *
- * const styles = StyleSheet.create({
- *   buttonGroup: { borderRadius: 8 },
- * });
- * ```
+ * @example ButtonGroupInlineStyling
  */
 class ButtonGroupComponent extends React.Component<ButtonGroupProps> {
 
diff --git a/src/framework/ui/calendar/calendar.component.tsx b/src/framework/ui/calendar/calendar.component.tsx
index de37cd261..7a60b4838 100644
--- a/src/framework/ui/calendar/calendar.component.tsx
+++ b/src/framework/ui/calendar/calendar.component.tsx
@@ -44,7 +44,7 @@ export type CalendarElement<D> = React.ReactElement<CalendarProps<D>>;
  *
  * @property {(date: D) => string} todayTitle - Defines the title for today's date.
  *
- * @property {(date: D) => ReactElement<any>} filter - Predicate that decides which cells will be disabled.
+ * @property {(date: D) => boolean} filter - Predicate that decides which cells will be disabled.
  *
  * @property {(date: D) => void} onSelect - Selection emitter. Fires when another day cell is pressed.
  *
@@ -54,152 +54,17 @@ export type CalendarElement<D> = React.ReactElement<CalendarProps<D>>;
  *
  * @property {(date: D, style: StyleType) => ReactElement<any>} renderYear - Should return the content of year cell.
  *
- * @overview-example Basic Usage
- *
- * ```
- * import React from 'react';
- * import { Calendar } from 'react-native-ui-kitten';
- *
- * export class BasicCalendar extends React.Component {
- *
- *   state = {
- *     date: new Date(),
- *   };
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   };
- *
- *   render() {
- *     return (
- *       <Calendar
- *         date={this.state.date}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Custom Day Cell
- *
- * ```
- * import React from 'react';
- * import { View, StyleSheet } from 'react-native';
- * import { Calendar, Text } from 'react-native-ui-kitten';
- *
- * export const DayCell = ({ date }, style) => (
- *   <View
- *     style={[styles.container, style.container]}>
- *     <Text style={style.text}>{`${date.getDate()}`}</Text>
- *     <Text style={[style.text, styles.value]}>
- *       {`${100 * date.getDate() + Math.pow(date.getDate(), 2)}$`}
- *     </Text>
- *   </View>
- * );
- *
- * const styles = StyleSheet.create({
- *   container: { flex: 1, justifyContent: 'center', alignItems: 'center', aspectRatio: 1 },
- *   value: { fontSize: 12, fontWeight: '400' },
- * });
- *
- * export class DailyValueCalendar extends React.Component {
- *
- *   state = {
- *     date: new Date(),
- *   };
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   };
- *
- *   render() {
- *     return (
- *       <Calendar
- *         date={this.state.date}
- *         onSelect={this.onSelect}
- *         renderDay={DayCell}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Custom Locale
- *
- * ```
- * import React from 'react';
- * import { Calendar, NativeDateService } from 'react-native-ui-kitten';
- *
- * const i18n = {
- *   dayNames: {
- *     short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
- *     long: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
- *   },
- *   monthNames: {
- *     short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- *     long: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- *   },
- * };
- *
- * export class ChineseCalendar extends React.Component {
- *
- *   dateService = new NativeDateService('zh', i18n);
- *
- *   state = {
- *     date: new Date(),
- *   };
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   };
- *
- *   render() {
- *     return (
- *       <Calendar
- *         date={this.state.date}
- *         dateService={this.dateService}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Working with Moment
- *
- * ```
- * // IMPORTANT: To use Moment make sure to install Moment Date Service
- * // npm i @ui-kitten/moment
- *
- * import React from 'react';
- * import moment from 'moment';
- * import { Calendar } from 'react-native-ui-kitten';
- * import { MomentDateService } from '@ui-kitten/moment';
- *
- * export class MomentCalendar extends React.Component {
- *
- *   state = {
- *     date: moment();
- *   };
- *
- *   dateService = new MomentDateService();
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   }
- *
- *   render() {
- *     return (
- *       <Calendar
- *         date={this.state.date}
- *         dateService={this.dateService}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
+ * @overview-example CalendarSimpleUsage
+ *
+ * @overview-example CalendarBoundingMonth
+ *
+ * @overview-example CalendarFilter
+ *
+ * @overview-example CalendarCustomLocale
+ *
+ * @example CalendarMoment
+ *
+ * @example CalendarCustomDay
  */
 export class CalendarComponent<D> extends BaseCalendarComponent<D, CalendarProps<D>> {
 
diff --git a/src/framework/ui/calendar/rangeCalendar.component.tsx b/src/framework/ui/calendar/rangeCalendar.component.tsx
index 54539f020..4af70a486 100644
--- a/src/framework/ui/calendar/rangeCalendar.component.tsx
+++ b/src/framework/ui/calendar/rangeCalendar.component.tsx
@@ -58,35 +58,7 @@ export type RangeCalendarElement<D> = React.ReactElement<RangeCalendarProps<D>>;
  *
  * @property {(date: D, style: StyleType) => ReactElement<any>} renderYear - Should return the content of year cell.
  *
- * @overview-example Basic Usage
- *
- * ```
- * import React from 'react';
- * import { RangeCalendar } from 'react-native-ui-kitten';
- *
- * export class RangeCalendar extends React.Component {
- *
- *   state = {
- *     range: {
- *       startDate: null,
- *       endDate: null,
- *     },
- *   };
- *
- *   onSelect = (range) => {
- *     this.setState({ range });
- *   };
- *
- *   render() {
- *     return (
- *       <RangeCalendar
- *         range={this.state.range}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
+ * @overview-example RangeCalendarSimpleUsage
  */
 export class RangeCalendarComponent<D> extends BaseCalendarComponent<D, RangeCalendarProps<D>> {
 
diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
index db7cb6f96..99e6a01aa 100644
--- a/src/framework/ui/checkbox/checkbox.component.tsx
+++ b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -69,220 +69,15 @@ export type CheckBoxElement = React.ReactElement<CheckBoxProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example CheckboxSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { CheckBox } from 'react-native-ui-kitten';
+ * @overview-example CheckboxStatus
  *
- * export class CheckBoxShowcase extends React.Component {
+ * @overview-example CheckboxText
  *
- *   state = {
- *     checked: false,
- *   };
+ * @example CheckboxIndeterminate
  *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <CheckBox
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Text
- *
- * ```
- * import React from 'react';
- * import { CheckBox } from 'react-native-ui-kitten';
- *
- * export class RememberPasswordCheckBox extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <CheckBox
- *         text='Remember Password'
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { CheckBox } from 'react-native-ui-kitten';
- *
- * export class CheckBoxShowcase extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <CheckBox
- *         checked={this.state.checked}
- *         status='success'
- *         onChange={this.onChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Indeterminate State
- *
- * ```
- * import React from 'react';
- * import { View, StyleSheet } from 'react-native';
- * import { CheckBox } from 'react-native-ui-kitten';
- *
- * export class CheckBoxContainer extends React.Component {
- *
- *   state = {
- *     mainCheckboxChecked: false,
- *     mainCheckboxIndeterminate: false,
- *     checkbox1Checked: false,
- *     checkbox2Checked: false,
- *     checkbox3Checked: false,
- *   };
- *
- *   onMainCheckboxChange = (checked) => {
- *     if (checked) {
- *       this.setState({
- *         checkbox1Checked: true,
- *         checkbox2Checked: true,
- *         checkbox3Checked: true,
- *       });
- *     } else {
- *       this.setState({
- *         checkbox1Checked: false,
- *         checkbox2Checked: false,
- *         checkbox3Checked: false,
- *       });
- *     }
- *     this.setState({ mainCheckboxChecked: checked });
- *   };
- *
- *   onCheckbox1Change = (checked) => {
- *     this.setState({ checkbox1Checked: checked }, this.setMainCheckboxDependingState);
- *   };
- *
- *   onCheckbox2Change = (checked) => {
- *     this.setState({ checkbox2Checked: checked }, this.setMainCheckboxDependingState);
- *   };
- *
- *   onCheckbox3Change = (checked) => {
- *     this.setState({ checkbox3Checked: checked }, this.setMainCheckboxDependingState);
- *   };
- *
- *   setMainCheckboxDependingState = () => {
- *     const { checkbox1Checked, checkbox2Checked, checkbox3Checked } = this.state;
- *     const states = [checkbox1Checked, checkbox2Checked, checkbox3Checked];
- *     const someChecked = states.some((item) => item === true);
- *     const everyChecked = states.every((item) => item === true);
- *
- *     if (someChecked && !everyChecked) {
- *       this.setState({
- *         mainCheckboxChecked: true,
- *         mainCheckboxIndeterminate: true,
- *       });
- *     } else if (!someChecked && !everyChecked) {
- *       this.setState({
- *         mainCheckboxChecked: false,
- *         mainCheckboxIndeterminate: false,
- *       });
- *     } else if (everyChecked) {
- *       this.setState({
- *         mainCheckboxChecked: true,
- *         mainCheckboxIndeterminate: false,
- *       });
- *     }
- *   };
- *
- *   render() {
- *     const {
- *       mainCheckboxChecked,
- *       mainCheckboxIndeterminate,
- *       checkbox1Checked,
- *       checkbox2Checked,
- *       checkbox3Checked,
- *     } = this.state;
- *
- *    return (
- *      <View style={{ flex: 1 }}>
- *        <CheckBox
- *          style={{ marginBottom: 12 }}
- *          text='Main'
- *          checked={mainCheckboxChecked}
- *          indeterminate={mainCheckboxIndeterminate}
- *          onChange={this.onMainCheckboxChange}
- *        />
- *        <CheckBox
- *          text='Checkbox 1'
- *          style={{ marginLeft: 12, marginBottom: 12 }}
- *          checked={checkbox1Checked}
- *          onChange={this.onCheckbox1Change}
- *        />
- *        <CheckBox
- *          text='Checkbox 2'
- *          style={{ marginLeft: 12, marginBottom: 12 }}
- *          checked={checkbox2Checked}
- *          onChange={this.onCheckbox2Change}
- *        />
- *        <CheckBox
- *          text='Checkbox 3'
- *          style={{ marginLeft: 12 }}
- *          checked={checkbox3Checked}
- *          onChange={this.onCheckbox3Change}
- *        />
- *      </View>
- *    );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { CheckBox } from 'react-native-ui-kitten';
- *
- * export const CheckBoxShowcase = (props) => (
- *   <CheckBox
- *     style={styles.checkbox}
- *     textStyle={styles.checkboxText}
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   checkbox: { borderRadius: 8 },
- *   checkboxText: { color: 'black' },
- * });
- * ```
+ * @example CheckboxInlineStyling
  */
 class CheckBoxComponent extends React.Component<CheckBoxProps> {
 
diff --git a/src/framework/ui/datepicker/datepicker.component.tsx b/src/framework/ui/datepicker/datepicker.component.tsx
index ec58db023..3de964749 100644
--- a/src/framework/ui/datepicker/datepicker.component.tsx
+++ b/src/framework/ui/datepicker/datepicker.component.tsx
@@ -49,152 +49,19 @@ import {
  *
  * @property StyledComponentProps
  *
- * @overview-example Basic Usage
- *
- * ```
- * import React from 'react';
- * import { Datepicker } from 'react-native-ui-kitten';
- *
- * export class BasicDatepicker extends React.Component {
- *
- *   state = {
- *     date: new Date(),
- *   };
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   };
- *
- *   render() {
- *     return (
- *       <Datepicker
- *         date={this.state.date}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Custom Day Cell
- *
- * ```
- * import React from 'react';
- * import { View, StyleSheet } from 'react-native';
- * import { Datepicker, Text } from 'react-native-ui-kitten';
- *
- * export const DayCell = ({ date }, style) => (
- *   <View
- *     style={[styles.container, style.container]}>
- *     <Text style={style.text}>{`${date.getDate()}`}</Text>
- *     <Text style={[style.text, styles.value]}>
- *       {`${100 * date.getDate() + Math.pow(date.getDate(), 2)}$`}
- *     </Text>
- *   </View>
- * );
- *
- * const styles = StyleSheet.create({
- *   container: { flex: 1, justifyContent: 'center', alignItems: 'center', aspectRatio: 1 },
- *   value: { fontSize: 12, fontWeight: '400' },
- * });
- *
- * export class DailyValueDatepicker extends React.Component {
- *
- *   state = {
- *     date: new Date(),
- *   };
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   };
- *
- *   render() {
- *     return (
- *       <Datepicker
- *         date={this.state.date}
- *         onSelect={this.onSelect}
- *         renderDay={DayCell}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Custom Locale
- *
- * ```
- * import React from 'react';
- * import { Datepicker, NativeDateService } from 'react-native-ui-kitten';
- *
- * const i18n = {
- *   dayNames: {
- *     short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
- *     long: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
- *   },
- *   monthNames: {
- *     short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- *     long: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- *   },
- * };
- *
- * export class ChineseDatepicker extends React.Component {
- *
- *   dateService = new NativeDateService('zh', i18n);
- *
- *   state = {
- *     date: new Date(),
- *   };
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   };
- *
- *   render() {
- *     return (
- *       <Datepicker
- *         date={this.state.date}
- *         dateService={this.dateService}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Working with Moment
- *
- * ```
- * // IMPORTANT: To use Moment make sure to install Moment Date Service
- * // npm i @ui-kitten/moment
- *
- * import React from 'react';
- * import moment from 'moment';
- * import { Datepicker } from 'react-native-ui-kitten';
- * import { MomentDateService } from '@ui-kitten/moment';
- *
- * export class MomentDatepicker extends React.Component {
- *
- *   state = {
- *     date: moment();
- *   };
- *
- *   dateService = new MomentDateService();
- *
- *   onSelect = (date) => {
- *     this.setState({ date });
- *   }
- *
- *   render() {
- *     return (
- *       <Datepicker
- *         date={this.state.date}
- *         dateService={this.dateService}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
+ * @overview-example DatepickerSimpleUsage
+ *
+ * @overview-example DatepickerWithIcon
+ *
+ * @overview-example DatepickerBoundingMonth
+ *
+ * @overview-example DatepickerFilter
+ *
+ * @example DatepickerCustomDay
+ *
+ * @example DatepickerCustomLocale
+ *
+ * @example DatepickerMoment
  */
 export class DatepickerComponent<D> extends BaseDatepickerComponent<D, CalendarProps<D>> {
 
diff --git a/src/framework/ui/datepicker/rangeDatepicker.component.tsx b/src/framework/ui/datepicker/rangeDatepicker.component.tsx
index 04b70c3be..97fca4174 100644
--- a/src/framework/ui/datepicker/rangeDatepicker.component.tsx
+++ b/src/framework/ui/datepicker/rangeDatepicker.component.tsx
@@ -49,35 +49,7 @@ import {
  *
  * @property StyledComponentProps
  *
- * @overview-example Basic Usage
- *
- * ```
- * import React from 'react';
- * import { RangeDatepicker } from 'react-native-ui-kitten';
- *
- * export class BasicDatepicker extends React.Component {
- *
- *   state = {
- *     range: {
- *       startDate: null,
- *       endDate: null,
- *     },
- *   };
- *
- *   onSelect = (range) => {
- *     this.setState({ range });
- *   };
- *
- *   render() {
- *     return (
- *       <RangeDatepicker
- *         range={this.state.range}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
+ * @overview-example RangeDatepickerSimpleUsage
  */
 export class RangeDatepickerComponent<D> extends BaseDatepickerComponent<D, RangeCalendarProps<D>> {
 
diff --git a/src/framework/ui/drawer/drawer.component.tsx b/src/framework/ui/drawer/drawer.component.tsx
index 20dcbe89a..ba6fae60a 100644
--- a/src/framework/ui/drawer/drawer.component.tsx
+++ b/src/framework/ui/drawer/drawer.component.tsx
@@ -41,22 +41,13 @@ export type DrawerElement = React.ReactElement<DrawerProps>;
  *
  * @property ListProps
  *
- * @overview-example Simple Usage
+ * @overview-example DrawerSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Drawer } from 'react-native-ui-kitten';
+ * @overview-example DrawerWithIcons
  *
- * const data = [
- *   { title: 'Dashboard' },
- *   { title: 'Messages' },
- *   { title: 'Settings' },
- * ];
+ * @overview-example DrawerHeader
  *
- * export const DrawerShowcase = (props) => (
- *   <Drawer data={data}/>
- * );
- * ```
+ * @overview-example DrawerFooter
  *
  * @overview-example Using with React Navigation
  *
@@ -100,133 +91,9 @@ export type DrawerElement = React.ReactElement<DrawerProps>;
  * });
  * ```
  *
- * @overview-example With Icons
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Drawer, Icon } from 'react-native-ui-kitten';
- *
- * const data = [
- *   { title: 'Dashboard', icon: DashboardIcon },
- *   { title: 'Messages', icon: MessagesIcon },
- *   { title: 'Settings', icon: SettingsIcon },
- * ];
- *
- * const DashboardIcon = (style) => (
- *   <Icon {...style} name='layout'/>
- * );
- *
- * const MessagesIcon = (style) => (
- *   <Icon {...style} name='email'/>
- * );
- *
- * const SettingsIcon = (style) => (
- *   <Icon {...style} name='settings'/>
- * );
- *
- * export const DrawerShowcase = (props) => (
- *   <Drawer data={data} />
- * );
- * ```
- *
- * @overview-example Header
- *
- * ```
- * import React from 'react'
- * import { Drawer, DrawerHeaderFooter } from 'react-native-ui-kitten';
- *
- * export const ProfileHeader = (props) => (
- *   <DrawerHeaderFooter title='John Doe' description='React Native Developer' />
- * );
- *
- * export const DrawerShowcase = (props) => (
- *   <Drawer data={data} header={ProfileHeader} />
- * );
- * ```
- *
- * @overview-example Footer
- *
- * ```
- * import React from 'react';
- * import { Drawer, DrawerHeaderFooter } from 'react-native-ui-kitten';
- *
- * const data = [
- *   { title: 'Dashboard' },
- *   { title: 'Messages' },
- *   { title: 'Settings' },
- * ];
- *
- * const DrawerFooter = () => (
- *   <DrawerHeaderFooter description='Awesome Application Version 4.2.0-beta.1' />
- * );
- *
- * export const DrawerShowcase = (props) => (
- *   <Drawer data={data} footer={DrawerFooter} />
- * );
- * ```
- *
- * @example Custom Header
- *
- * ```
- * import React from 'react';
- * import { View } from 'react-native';
- * import { Drawer, Text } from 'react-native-ui-kitten';
- *
- * const data = [
- *   { title: 'Dashboard' },
- *   { title: 'Messages' },
- *   { title: 'Settings' },
- * ];
- *
- * const DrawerHeader = () => (
- *   <View>
- *     <Text category='h6'>Awesome Application</Text>
- *   </View>
- * );
- *
- * export const DrawerShowcase = (props) => (
- *   <Drawer data={data} header={DrawerHeader} />
- * );
- * ```
- *
- * @example Notification Badge Item
- *
- * ```
- * import React from 'react';
- * import { View, StyleSheet } from 'react-native';
- * import { Drawer, Text } from 'react-native-ui-kitten';
+ * @example DrawerCustomHeader
  *
- * const data = [
- *   { title: 'Dashboard' },
- *   { title: 'Messages', accessory: NotificationBadge },
- *   { title: 'Settings' },
- * ];
- *
- * const NotificationBadge = (style) => (
- *   <View style={[style, styles.badge]}>
- *     <Text>NEW</Text>
- *   </View>
- * );
- *
- * export const DrawerShowcase = (props) => (
- *   <Drawer data={data} />
- * );
- *
- * const styles = StyleSheet.create({
- *   badge: {
- *     justifyContent: 'center',
- *     alignItems: 'center',
- *     height: 24,
- *     width: 48,
- *     paddingHorizontal: 24,
- *     borderRadius: 12,
- *     backgroundColor: 'orange',
- *   },
- * });
- * ```
+ * @example DrawerNotificationBadgeItem
  */
 class DrawerComponent extends React.Component<DrawerProps> {
 
diff --git a/src/framework/ui/drawer/drawerHeaderFooter.component.tsx b/src/framework/ui/drawer/drawerHeaderFooter.component.tsx
index afb41d6b3..a0e1f7684 100644
--- a/src/framework/ui/drawer/drawerHeaderFooter.component.tsx
+++ b/src/framework/ui/drawer/drawerHeaderFooter.component.tsx
@@ -33,89 +33,13 @@ export type DrawerHeaderFooterElement = ListItemElement;
  * @property {(index: number, event: GestureResponderEvent) => React.ReactElement<ImageProps>} onPress - Emits when
  * component is pressed.
  *
- * @overview-example Simple Usage
+ * @overview-example DrawerHeaderFooterSimpleUsage
  *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ * @overview-example DrawerHeaderFooterWithAccessory
  *
- * import React from 'react'
- * import { DrawerHeaderFooter, Icon } from 'react-native-ui-kitten';
+ * @example DrawerHeaderFooterWithExternalSourceIcon
  *
- * const ProfileIcon = (style) => (
- *   <Icon {...style} name='person' />
- * );
- *
- * export const ProfileHeader = (props) => (
- *   <DrawerHeaderFooter title='John Doe' description='React Native Developer' icon={ProfileIcon} />
- * );
- * ```
- *
- * @overview-example With Accessory
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react'
- * import { DrawerHeaderFooter, Icon } from 'react-native-ui-kitten';
- *
- * const LogoutIcon = (style) => (
- *   <Icon {...style} name='log-out' />
- * );
- *
- * const LogoutButton = (style): React.ReactElement<ButtonProps> => (
- *   <Button style={style} icon={LogoutIcon} />
- * );
- *
- * export const ProfileHeader = (props) => (
- *   <DrawerHeaderFooter
- *     title='John Doe'
- *     description='React Native Developer'
- *     accessory={LogoutButton}
- *   />
- * );
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react'
- * import { Image } from 'react-native-ui-kitten';
- * import { DrawerHeaderFooter } from 'react-native-ui-kitten';
- *
- * const ProfileIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const ProfileHeader = (props) => (
- *   <DrawerHeaderFooter title='John Doe' description='React Native Developer' icon={ProfileIcon} />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react'
- * import { StyleSheet } from 'react-native';
- * import { DrawerHeaderFooter } from 'react-native-ui-kitten';
- *
- * export const ProfileHeader = (props) => (
- *   <DrawerHeaderFooter
- *     style={styles.drawerHeader}
- *     titleStyle={styles.drawerHeaderTitle}
- *     descriptionStyle={styles.drawerHeaderDescription}
- *     title='John Doe'
- *     description='React Native Developer'
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   drawerHeader: { backgroundColor: 'black' }
- *   drawerHeaderTitle: { color: 'white' }
- *   drawerHeaderDescription: { color: 'gray' }
- * });
- * ```
+ * @example DrawerHeaderFooterInlineStyling
  */
 export class DrawerHeaderFooter extends React.Component<DrawerHeaderFooterProps> {
 
diff --git a/src/framework/ui/icon/icon.component.tsx b/src/framework/ui/icon/icon.component.tsx
index f8fe4cdbb..b33a5e6bf 100644
--- a/src/framework/ui/icon/icon.component.tsx
+++ b/src/framework/ui/icon/icon.component.tsx
@@ -48,201 +48,19 @@ export type IconElement<T = WrappedElementProps> = React.ReactElement<IconProps<
  *
  * @property {AnimationConfig} animationConfig - Determines animation config. Extends `Animated.AnimationConfig`.
  *
- * @overview-example Register Icons
+ * @overview-example IconSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { mapping, light as lightTheme } from '@eva-design/eva';
- * import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten';
- * import { EvaIconsPack } from '@ui-kitten/eva-icons'; // <-- Make sure it is installed. npm i @ui-kitten/eva-icons
+ * @overview-example IconWithinButton
  *
- * const ApplicationContent = () => (
- *   <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
- *     <Text>Welcome to UI Kitten</Text>
- *   </Layout>
- * );
+ * @overview-example IconWithinInput
  *
- * const App = () => (
- *   <React.Fragment>
- *     <IconRegistry icons={EvaIconsPack}/>
- *     <ApplicationProvider mapping={mapping} theme={lightTheme}>
- *       <ApplicationContent/>
- *     </ApplicationProvider>
- *   </React.Fragment>
- * );
+ * @overview-example IconExternalSource
  *
- * export default App;
- * ```
+ * @overview-example IconAnimation
  *
- * @overview-example Simple Usage
+ * @example IconAnimationInfinite
  *
- * ```
- * import React from 'react';
- * import { Icon } from 'react-native-ui-kitten';
- *
- * export const StarIcon = (props) => (
- *   <Icon name='star'/>
- * );
- * ```
- *
- * @overview-example Using with UI Kitten components
- *
- * ```
- * import React from 'react';
- * import { Input, Button, Icon } from 'react-native-ui-kitten';
- *
- * const FacebookIcon = (style) => (
- *   <Icon {...style} name='facebook' />
- * );
- *
- * const EyeIcon = (style) => (
- *   <Icon {...style} name='eye' />
- * );
- *
- * export const LoginButton = (props) => (
- *   <Button icon={FacebookIcon}>Login with Facebook</Button>
- * );
- *
- * export const PasswordInput = (props) => (
- *   <Input placeholder='Password' icon={EyeIcon} />
- * );
- * ```
- *
- * @overview-example Using Asset Source
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Button } from 'react-native-ui-kitten';
- *
- * const FacebookIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const LoginButton = (props) => (
- *   <Button icon={FacebookIcon}>Login with Facebook</Button>
- * );
- * ```
- *
- * @overview-example Animation Usage
- *
- * ```
- * import React from 'react';
- * import { Icon } from 'react-native-ui-kitten';
- *
- * const iconRef = React.createRef();
- *
- * export const StarIcon = (props) => (
- *   <Icon ref={iconRef} name='star' animation='shake'/>
- * );
- *
- * iconRef.current.startAnimation();
- * ```
- *
- * @example Infinite Animation
- *
- * ```
- * import React from 'react';
- * import { Icon } from 'react-native-ui-kitten';
- *
- * const iconRef = React.createRef();
- *
- * export const StarIcon = (props) => (
- *   <Icon
- *     ref={iconRef}
- *     name='star'
- *     animation='shake'
- *     animationConfig={{ cycles: -1 }}
- *   />
- * );
- *
- * iconRef.current.startAnimation();
- * ```
- *
- * @example Password Input
- *
- * ```
- * import React from 'react';
- * import { Input, Icon } from 'react-native-ui-kitten';
- *
- * export class PasswordInput extends React.Component {
- *
- *  state = {
- *    passwordVisible: false,
- *  };
- *
- *  onPasswordIconPress = () => {
- *    const passwordVisible = !this.state.passwordVisible;
- *    this.setState({ passwordVisible });
- *  };
- *
- *  renderPasswordIcon = (style) => (
- *    <Icon
- *      name={this.state.passwordVisible ? 'eye' : 'eye-off'}
- *      {...style}
- *    />
- *  );
- *
- *  render() {
- *    return (
- *      <Input
- *        icon={this.renderPasswordIcon}
- *        onIconPress={this.onPasswordIconPress}
- *        secureTextEntry={!this.state.passwordVisible}
- *      />
- *    );
- *  }
- * }
- * ```
- *
- * @example Like Button
- *
- * ```
- * import React from 'react';
- * import { Button, Icon } from 'react-native-ui-kitten';
- *
- * export class LikeButton extends React.Component {
- *
- *  state = {
- *    liked: false,
- *  };
- *
- *  onPress = () => {
- *    const liked = !this.state.liked;
- *    this.setState({ liked });
- *  };
- *
- *  renderHeartIcon = (style) => (
- *    <Icon
- *      name={this.state.liked ? 'heart' : 'heart-outline'}
- *      {...style}
- *    />
- *  );
- *
- *  render() {
- *    return (
- *      <Button
- *        icon={this.renderHeartIcon}
- *        onPress={this.onPress}
- *      />
- *    );
- *  }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * // Visit react-native-svg documentation for more details
- * // https://github.com/react-native-community/react-native-svg#common-props
- *
- * import React from 'react';
- * import { Icon } from 'react-native-ui-kitten';
- *
- * export const StarIcon = (props) => (
- *   <Icon name='star' width={32} height={32} fill='#000'/>
- * );
- * ```
+ * @example IconInlineStyling
  */
 export class Icon<T> extends React.Component<IconProps<T>> {
 
diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx
index 8dcc6a764..6f28b6cab 100644
--- a/src/framework/ui/input/input.component.tsx
+++ b/src/framework/ui/input/input.component.tsx
@@ -102,223 +102,21 @@ export type InputElement = React.ReactElement<InputProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example InputSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Input } from 'react-native-ui-kitten';
+ * @overview-example InputStatus
  *
- * export class InputShowcase extends React.Component {
+ * @overview-example InputSize
  *
- *   state = {
- *     inputValue: '',
- *   };
+ * @overview-example InputWithIcon
  *
- *   onInputValueChange = (inputValue) => {
- *     this.setState({ inputValue });
- *   };
+ * @overview-example InputWithLabel
  *
- *   render() {
- *     return (
- *       <Input
- *         value={this.state.inputValue}
- *         onChangeText={this.onInputValueChange}
- *       />
- *     );
- *   }
- * }
- * ```
+ * @overview-example InputWithCaption
  *
- * @overview-example With Icon
+ * @example InputInlineStyling
  *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Input, Icon } from 'react-native-ui-kitten';
- *
- * export class SecureInput extends React.Component {
- *
- *   state = {
- *     inputValue: '',
- *     secureTextEntry: true,
- *   };
- *
- *   onInputValueChange = (inputValue) => {
- *     this.setState({ inputValue });
- *   };
- *
- *   onIconPress = () => {
- *     const secureTextEntry = !this.state.secureTextEntry;
- *     this.setState({ secureTextEntry });
- *   };
- *
- *   renderIcon = (style) => (
- *     const iconName = this.state.secureTextEntry ? 'eye' : 'eye-off';
- *     return (
- *       <Icon {...style} name={iconName} />
- *     );
- *   );
- *
- *   render() {
- *     return (
- *       <Input
- *         value={this.state.inputValue}
- *         icon={this.renderIcon}
- *         secureTextEntry={this.state.secureTextEntry}
- *         onIconPress={this.onIconPress}
- *         onChangeText={this.onInputValueChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Label
- *
- * ```
- * import React from 'react';
- * import { Input } from 'react-native-ui-kitten';
- *
- * export class EmailInput extends React.Component {
- *
- *   state = {
- *     inputValue: '',
- *   };
- *
- *   onInputValueChange = (inputValue) => {
- *     this.setState({ inputValue });
- *   };
- *
- *   render() {
- *     return (
- *       <Input
- *         label='EMAIL'
- *         value={this.state.inputValue}
- *         onChangeText={this.onInputValueChange}
- *       />
- *     );
- *   }
- * }
- * ```
- * @overview-example With Caption
- *
- * ```
- * import React from 'react';
- * import { Input } from 'react-native-ui-kitten';
- *
- * export class PasswordInput extends React.Component {
- *
- *   state = {
- *     inputValue: '',
- *   };
- *
- *   onInputValueChange = (inputValue) => {
- *     this.setState({ inputValue });
- *   };
- *
- *   isValidInputValue = () => {
- *     return this.state.inputValue.length >= 6;
- *   };
- *
- *   render() {
- *     const isValidInputValue = this.isValidInputValue();
- *     return (
- *       <Input
- *         status={isValidInputValue ? 'success' : 'danger'}
- *         caption={isValidInputValue ? '' : 'Invalid password'}
- *         value={this.state.inputValue}
- *         onChangeText={this.onInputValueChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Input } from 'react-native-ui-kitten';
- *
- * export class InputShowcase extends React.Component {
- *
- *   state = {
- *     inputValue: '',
- *   };
- *
- *   onInputValueChange = (inputValue) => {
- *     this.setState({ inputValue });
- *   };
- *
- *   render() {
- *     return (
- *       <Input
- *         size='large'
- *         status='danger'
- *         value={this.state.inputValue}
- *         onChangeText={this.onInputValueChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Input } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const StarInput = (props) => (
- *   <Input icon={StarIcon} />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Input } from 'react-native-ui-kitten';
- *
- * export class InputShowcase extends React.Component {
- *
- *   state = {
- *     inputValue: '',
- *   };
- *
- *   onInputValueChange = (inputValue) => {
- *     this.setState({ inputValue });
- *   };
- *
- *   render() {
- *     return (
- *       <Input
- *         value={this.state.inputValue}
- *         style={styles.input}
- *         textStyle={styles.inputText}
- *         labelStyle={styles.inputLabel}
- *         captionStyle={styles.inputCaption}
- *         onChangeText={this.onInputValueChange}
- *       />
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   input: { borderRadius: 8 },
- *   inputText: { color: 'black' },
- *   inputLabel: { color: 'gray' },
- *   inputCaption: { color: 'gray' },
- * });
- * ```
+ * @example InputWithExternalSourceIcon
  */
 export class InputComponent extends React.Component<InputProps> {
 
diff --git a/src/framework/ui/layout/layout.component.tsx b/src/framework/ui/layout/layout.component.tsx
index 4d280a3bd..c906e6154 100644
--- a/src/framework/ui/layout/layout.component.tsx
+++ b/src/framework/ui/layout/layout.component.tsx
@@ -38,74 +38,11 @@ export type LayoutElement = React.ReactElement<LayoutProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example LayoutSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Layout, Text } from 'react-native-ui-kitten';
+ * @overview-example LayoutLevel
  *
- * export const LayoutShowcase = (props) => (
- *   <Layout>
- *     <Text>Layout</Text>
- *   </Layout>
- * );
- * ```
- *
- * @overview-example Layout Levels
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Layout, Text } from 'react-native-ui-kitten';
- *
- * export const LayoutShowcase = (props) => (
- *   <Layout style={styles.container} level='4'>
- *     <Layout style={styles.container} level='3'>
- *       <Layout style={styles.container} level='2'>
- *         <Layout style={[styles.container, styles.contentContainer]}>
- *           <Text>Welcome to UI Kitten</Text>
- *         </Layout>
- *       </Layout>
- *     </Layout>
- *   </Layout>
- * );
- *
- * const styles = StyleSheet.create({
- *   container: { flex: 1, padding: 16 }
- *   contentContainer: { justifyContent: 'center', alignItems: 'center' }
- * });
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Layout, Text } from 'react-native-ui-kitten';
- *
- * export const LayoutShowcase = (props) => (
- *   <Layout level='2'>
- *     <Text>Layout</Text>
- *   </Layout>
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native-ui-kitten';
- * import { Layout, Text } from 'react-native-ui-kitten';
- *
- * export const LayoutShowcase = (props) => (
- *   <Layout style={styles.container}>
- *     <Text>Layout</Text>
- *   </Layout>
- * );
- *
- * const styles = StyleSheet.create({
- *   container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
- * });
- * ```
+ * @example LayoutInlineStyling
  */
 export class LayoutComponent extends React.Component<LayoutProps> {
 
diff --git a/src/framework/ui/list/list.component.tsx b/src/framework/ui/list/list.component.tsx
index 3a207fc7c..2204c3278 100644
--- a/src/framework/ui/list/list.component.tsx
+++ b/src/framework/ui/list/list.component.tsx
@@ -61,97 +61,11 @@ export interface ScrollToOffsetParams extends BaseScrollParams {
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example ListSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { List, ListItem } from 'react-native-ui-kitten';
- *
- * export const ListShowcase = (props) => {
- *
- *   const data = ['Item 1', 'Item 2', 'Item 3'];
- *
- *   const onItemPress = (index) => {
- *     // Handle item press
- *   };
- *
- *   const renderItem = ({ item, index }) => (
- *     <ListItem
- *       title={item}
- *       description='Description'
- *       onPress={onItemPress}
- *     />
- *   );
- *
- *   return (
- *     <List
- *       data={data}
- *       renderItem={renderItem}
- *     />
- *   );
- * };
- * ```
- *
- * @overview-example Custom List Item
- *
- * ```
- * import React from 'react';
- * import { List, ListItem, Text } from 'react-native-ui-kitten';
- *
- * export const ListShowcase = (props) => {
- *
- *   const data = ['Item 1', 'Item 2', 'Item 3'];
- *
- *   const renderItem = ({ item, index }) => (
- *     <ListItem>
- *       <Text>{item}</Text>
- *     </ListItem>
- *   );
- *
- *   return (
- *     <List
- *       data={data}
- *       renderItem={renderItem}
- *     />
- *   );
- * };
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native-ui-kitten';
- * import { List, ListItem } from 'react-native-ui-kitten';
- *
- * export const ListShowcase = (props) => {
- *
- *   const data = ['Item 1', 'Item 2', 'Item 3'];
- *
- *   const onItemPress = (index) => {
- *     // Handle item press
- *   };
- *
- *   const renderItem = ({ item, index }) => (
- *     <ListItem
- *       title={item}
- *       description='Description'
- *       onPress={onItemPress}
- *     />
- *   );
- *
- *   return (
- *     <List
- *       contentContainerStyle={styles.contentContainer}
- *       data={data}
- *       renderItem={renderItem}
- *     />
- *   );
- * };
+ * @overview-example ListCompositeItem
  *
- * const styles = StyleSheet.create({
- *   contentContainer: { paddingHorizontal: 8 },
- * });
+ * @example ListInlineStyling
  * ```
  */
 export class ListComponent extends React.Component<ListProps> {
diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx
index ff56f58d5..bcb9cb8f5 100644
--- a/src/framework/ui/list/listItem.component.tsx
+++ b/src/framework/ui/list/listItem.component.tsx
@@ -92,92 +92,15 @@ export type ListItemElement = React.ReactElement<ListItemProps>;
  * @property {(index: number, event: GestureResponderEvent) => React.ReactElement<ImageProps>} onPress - Emits when
  * component is pressed.
  *
- * @overview-example Simple Usage
+ * @overview-example ListItemSimpleUsage
  *
- * ```
- * import React from 'react'
- * import { ListItem } from 'react-native-ui-kitten';
+ * @overview-example ListItemWithIcon
  *
- * export const ListItemShowcase = (props) => (
- *   <ListItem title='Title' description='Description' />
- * );
- * ```
+ * @overview-example ListItemWithAccessory
  *
- * @overview-example With Icon
+ * @example ListItemWithExternalIcon
  *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react'
- * import { ListItem, Icon } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Icon {...style} name='star' />
- * );
- *
- * export const ListItemShowcase = (props) => (
- *   <ListItem title='Title' description='Description' icon={StarIcon} />
- * );
- * ```
- *
- * @example With Accessory
- *
- * ```
- * import React from 'react'
- * import { ListItem, Button } from 'react-native-ui-kitten';
- *
- * export const ListItemShowcase = (props) => {
- *
- *   const Accessory = (style) => (
- *     <Button style={style}>BUTTON</Button>
- *   );
- *
- *   return (
- *     <ListItem title='Title' description='Description' accessory={Accessory} />
- *   );
- * };
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { ListItem } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const ListItemShowcase = (props) => (
- *   <ListItem title='Title' description='Description' icon={StarIcon} />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react'
- * import { StyleSheet } from 'react-native-ui-kitten';
- * import { ListItem } from 'react-native-ui-kitten';
- *
- * export const ListItemShowcase = (props) => (
- *   <ListItem
- *     style={styles.listItem}
- *     titleStyle={styles.listItemTitle}
- *     descriptionStyle={styles.listItemDescription}
- *     title='Title'
- *     description='Description'
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   listItem: { borderRadius: 8 },
- *   listItemTitle: { color: 'black' },
- *   listItemDescription: { color: 'gray' },
- * });
- * ```
+ * @example ListItemInlineStyling
  */
 export class ListItemComponent extends React.Component<ListItemProps> {
 
diff --git a/src/framework/ui/menu/menu.component.tsx b/src/framework/ui/menu/menu.component.tsx
index c344e1384..44e12a3f1 100644
--- a/src/framework/ui/menu/menu.component.tsx
+++ b/src/framework/ui/menu/menu.component.tsx
@@ -58,268 +58,15 @@ export type MenuElement = React.ReactElement<MenuProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example MenuSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Menu } from 'react-native-ui-kitten';
+ * @overview-example MenuAppearance
  *
- * export class MenuShowcase extends React.Component {
+ * @overview-example MenuWithSubMenu
  *
- *   state = {
- *     selectedIndex: null,
- *   };
+ * @example MenuWithIcons
  *
- *   data = [
- *     { title: 'Item 1' },
- *     { title: 'Item 2' },
- *     { title: 'Item 3' },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         data={this.data}
- *         selectedItem={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Sub Menus
- *
- * ```
- * import React from 'react';
- * import { Menu } from 'react-native-ui-kitten';
- *
- * export class MenuShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: null,
- *   };
- *
- *   data = [
- *     { title: 'Item 1' },
- *     {
- *       title: 'Item 2',
- *       subItems: [
- *         { title: 'Item 21' },
- *         { title: 'Item 22' },
- *         { title: 'Item 23' },
- *       ],
- *     },
- *     { title: 'Item 3' },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         data={this.data}
- *         selectedItem={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Icons
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Menu, Icon } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Icon {...style} name='star' />
- * );
- *
- * export class MenuShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: null,
- *   };
- *
- *   data = [
- *     { title: 'Item 1', icon: StarIcon },
- *     { title: 'Item 2', icon: StarIcon },
- *     { title: 'Item 3', icon: StarIcon },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         data={this.data}
- *         selectedItem={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Menu } from 'react-native-ui-kitten';
- *
- * export class MenuShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: null,
- *   };
- *
- *   data = [
- *     { title: 'Item 1' },
- *     { title: 'Item 2' },
- *     { title: 'Item 3' },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         appearance='noDivider'
- *         data={this.data}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Disabled Item
- *
- * ```
- * import React from 'react';
- * import { Menu } from 'react-native-ui-kitten';
- *
- * export class MenuShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: null,
- *   };
- *
- *   data = [
- *     { title: 'Item 1', disabled: true },
- *     { title: 'Item 2' },
- *     { title: 'Item 3' },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         data={this.data}
- *         selectedItem={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Menu } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export class MenuShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: null,
- *   };
- *
- *   data = [
- *     { title: 'Item 1', icon: StarIcon },
- *     { title: 'Item 2', icon: StarIcon },
- *     { title: 'Item 3', icon: StarIcon },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         data={this.data}
- *         selectedItem={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Menu } from 'react-native-ui-kitten';
- *
- * export class MenuShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: null,
- *   };
- *
- *   data = [
- *     { title: 'Item 1', titleStyle: styles.menuItemTitle },
- *     { title: 'Item 2', titleStyle: styles.menuItemTitle },
- *     { title: 'Item 3', titleStyle: styles.menuItemTitle },
- *   ];
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <Menu
- *         data={this.data}
- *         selectedItem={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *       />
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   menuItemTitle: { color: 'black', fontSize: 18 },
- * });
- * ```
+ * @example MenuInlineStyling
  */
 class MenuComponent extends React.Component<MenuProps> {
 
diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index c8e141df3..4d3c47357 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -56,7 +56,7 @@ export type ModalElement = React.ReactElement<ModalProps>;
  * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop.
  * Default is `false`.
  *
- * @property {BackdropStyle} backdropStyle - Determines the style of backdrop.
+ * @property {StyleProp<ViewStyle>} backdropStyle - Determines the style of backdrop.
  *
  * @property {() => void} onBackdropPress - Determines component's behavior when the user is
  * tapping on back-drop.
diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
index 381abfe95..68853b258 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -62,233 +62,15 @@ export type OverflowMenuElement = React.ReactElement<OverflowMenuProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example OverflowMenuSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { OverflowMenu, Button } from 'react-native-ui-kitten';
+ * @overview-example OverflowMenuWithIcons
  *
- * export class OverflowMenuShowcase extends React.Component {
+ * @example OverflowMenuWithDisabledItems
  *
- *   data = [
- *     { title: 'Menu Item 1' },
- *     { title: 'Menu Item 2' },
- *     { title: 'Menu Item 3' },
- *   ];
+ * @example OverflowMenuWithoutDivider
  *
- *   state = {
- *     menuVisible: false,
- *     selectedIndex: null,
- *   };
- *
- *   onItemSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   toggleMenu = () => {
- *     const menuVisible = !this.state.menuVisible;
- *     this.setState({ menuVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <OverflowMenu
- *         data={this.data}
- *         visible={this.state.menuVisible}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *         onBackdropPress={this.toggleMenu}>
- *         <Button onPress={this.toggleMenu}>TOGGLE MENU/Button>
- *       </OverflowMenu>
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Icons
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { OverflowMenu, Button, Icon } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Icon {...style} name='star' />
- * );
- *
- * export class OverflowMenuShowcase extends React.Component {
- *
- *   data = [
- *     { title: 'Menu Item 1', icon: StarIcon },
- *     { title: 'Menu Item 2', icon: StarIcon },
- *     { title: 'Menu Item 3', icon: StarIcon },
- *   ];
- *
- *   state = {
- *     menuVisible: false,
- *     selectedIndex: null,
- *   };
- *
- *   onItemSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   toggleMenu = () => {
- *     const menuVisible = !this.state.menuVisible;
- *     this.setState({ menuVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <OverflowMenu
- *         data={this.data}
- *         visible={this.state.menuVisible}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *         onBackdropPress={this.toggleMenu}>
- *         <Button onPress={this.toggleMenu}>TOGGLE MENU</Button>
- *       </OverflowMenu>
- *     );
- *   }
- * }
- * ```
- *
- * @example Disabled Item
- *
- * ```
- * import React from 'react';
- * import { OverflowMenu, Button } from 'react-native-ui-kitten';
- *
- * export class OverflowMenuShowcase extends React.Component {
- *
- *   data = [
- *     { title: 'Menu Item 1' },
- *     { title: 'Menu Item 2', disabled: true },
- *     { title: 'Menu Item 3' },
- *   ];
- *
- *   state = {
- *     menuVisible: false,
- *     selectedIndex: null,
- *   };
- *
- *   onItemSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   toggleMenu = () => {
- *     const menuVisible = !this.state.menuVisible;
- *     this.setState({ menuVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <OverflowMenu
- *         data={this.data}
- *         visible={this.state.menuVisible}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *         onBackdropPress={this.toggleMenu}>
- *         <Button onPress={this.toggleMenu}>TOGGLE MENU</Button>
- *       </OverflowMenu>
- *     );
- *   }
- * }
- * ```
- *
- * @example Without Divider
- *
- * ```
- * import React from 'react';
- * import { OverflowMenu, Button } from 'react-native-ui-kitten';
- *
- * export class OverflowMenuShowcase extends React.Component {
- *
- *   data = [
- *     { title: 'Menu Item 1' },
- *     { title: 'Menu Item 2' },
- *     { title: 'Menu Item 3' },
- *   ];
- *
- *   state = {
- *     menuVisible: false,
- *     selectedIndex: null,
- *   };
- *
- *   onItemSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   toggleMenu = () => {
- *     const menuVisible = !this.state.menuVisible;
- *     this.setState({ menuVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <OverflowMenu
- *         appearance='noDivider'
- *         data={this.data}
- *         visible={this.state.menuVisible}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *         onBackdropPress={this.toggleMenu}>
- *         <Button onPress={this.toggleMenu}>TOGGLE MENU</Button>
- *       </OverflowMenu>
- *     );
- *   }
- * }
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { OverflowMenu, Button } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export class OverflowMenuShowcase extends React.Component {
- *
- *   data = [
- *     { title: 'Menu Item 1', icon: StarIcon },
- *     { title: 'Menu Item 2', icon: StarIcon },
- *     { title: 'Menu Item 3', icon: StarIcon },
- *   ];
- *
- *   state = {
- *     menuVisible: false,
- *     selectedIndex: null,
- *   };
- *
- *   onItemSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   toggleMenu = () => {
- *     const menuVisible = !this.state.menuVisible;
- *     this.setState({ menuVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <OverflowMenu
- *         data={this.data}
- *         visible={this.state.menuVisible}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onItemSelect}
- *         onBackdropPress={this.toggleMenu}>
- *         <Button onPress={this.toggleMenu}>TOGGLE MENU</Button>
- *       </OverflowMenu>
- *     );
- *   }
- * }
- * ```
+ * @example OverflowMenuExternalSourceIcons
  */
 class OverflowMenuComponent extends React.Component<OverflowMenuProps> {
 
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index 6c54df210..5f67c87be 100644
--- a/src/framework/ui/popover/popover.component.tsx
+++ b/src/framework/ui/popover/popover.component.tsx
@@ -86,46 +86,9 @@ const PLACEMENT_DEFAULT: PopoverPlacement = PopoverPlacements.BOTTOM;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example PopoverSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Popover, Layout, Button, Text } from 'react-native-ui-kitten';
- *
- * export class PopoverShowcase extends React.Component {
- *
- *   state = {
- *     popoverVisible: false,
- *   };
- *
- *   togglePopover = () => {
- *     const popoverVisible = !this.state.popoverVisible;
- *     this.setState({ popoverVisible });
- *   };
- *
- *   renderPopoverContentElement = () => (
- *     <Layout style={styles.popoverContent}>
- *       <Text>Hi! This is popover.</Text>
- *     </Layout>
- *   );
- *
- *   render() {
- *     return (
- *       <Popover
- *         visible={this.state.popoverVisible}
- *         content={this.renderPopoverContentElement()}
- *         onBackdropPress={this.togglePopover}>
- *         <Button onPress={this.togglePopover}>TOGGLE POPOVER</Button>
- *       </Popover>
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   popoverContent: { justifyContent: 'center', alignItems: 'center' },
- * });
- * ```
+ * @overview-example PopoverPlacement
  */
 export class PopoverComponent extends React.Component<PopoverProps> {
 
diff --git a/src/framework/ui/radio/radio.component.tsx b/src/framework/ui/radio/radio.component.tsx
index d99ec86b2..712e7a0f6 100644
--- a/src/framework/ui/radio/radio.component.tsx
+++ b/src/framework/ui/radio/radio.component.tsx
@@ -64,111 +64,14 @@ export type RadioElement = React.ReactElement<RadioProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example RadioSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Radio } from 'react-native-ui-kitten';
+ * @overview-example RadioStatus
  *
- * export class RadioShowcase extends React.Component {
+ * @overview-example RadioWithText
  *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Radio
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     )
- *   }
- * }
- *
- * ```
- * @overview-example With Text
- *
- * ```
- * import React from 'react';
- * import { Radio } from 'react-native-ui-kitten';
- *
- * export class RadioShowcase extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Radio
- *         text='Place your text'
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     )
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Radio } from 'react-native-ui-kitten';
- *
- * export class RadioShowcase extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Radio
- *         status='warning'
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     )
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Radio } from 'react-native-ui-kitten';
- *
- * export const RadioShowcase = (props) => (
- *   <Radio
- *     style={styles.radio}
- *     textStyle={styles.radioText}
- *     checked={true}
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   radio: { width: 32, height: 32 },
- *   radioText: { color: 'black' },
- * });
- * ```
+ * @example RadioInlineStyling
  */
-
 export class RadioComponent extends React.Component<RadioProps> {
 
   static styledComponentName: string = 'Radio';
diff --git a/src/framework/ui/radioGroup/radioGroup.component.tsx b/src/framework/ui/radioGroup/radioGroup.component.tsx
index 070b06899..c610b1e78 100644
--- a/src/framework/ui/radioGroup/radioGroup.component.tsx
+++ b/src/framework/ui/radioGroup/radioGroup.component.tsx
@@ -44,66 +44,7 @@ export type RadioGroupElement = React.ReactElement<RadioGroupProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
- *
- * ```
- * import React from 'react';
- * import { Radio, RadioGroup } from 'react-native-ui-kitten';
- *
- * export class RadioGroupShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onGroupSelectionChange = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <RadioGroup
- *         selectedIndex={this.state.selectedIndex}
- *         onChange={this.onGroupSelectionChange}>
- *         <Radio text='Option 1' />
- *         <Radio text='Option 2' />
- *         <Radio text='Option 3' />
- *       </RadioGroup>
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Radio, RadioGroup } from 'react-native-ui-kitten';
- *
- * export class RadioGroupShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onGroupSelectionChange = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <RadioGroup
- *         status='danger'
- *         selectedIndex={this.state.selectedIndex}
- *         onChange={this.onGroupSelectionChange}>
- *         <Radio text='Option 1' />
- *         <Radio text='Option 2' />
- *         <Radio text='Option 3' />
- *       </RadioGroup>
- *     );
- *   }
- * }
- * ```
+ * @overview-example RadioGroupSimpleUsage
  */
 class RadioGroupComponent extends React.Component<RadioGroupProps> {
 
diff --git a/src/framework/ui/select/select.component.tsx b/src/framework/ui/select/select.component.tsx
index e0950edbb..71fc74579 100644
--- a/src/framework/ui/select/select.component.tsx
+++ b/src/framework/ui/select/select.component.tsx
@@ -129,314 +129,17 @@ interface State {
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple usage example
+ * @overview-example SelectSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Select } from 'react-native-ui-kitten';
+ * @overview-example SelectStatus
  *
- * export class SelectContainer extends React.Component {
+ * @overview-example SelectMultiSelect
  *
- *   items = [
- *     { text: 'Option 1' },
- *     { text: 'Option 2' },
- *     { text: 'Option 3' },
- *   ];
+ * @overview-example SelectWithGroups
  *
- *   state = {
- *     selectedOption: null,
- *   };
+ * @example SelectCustomIcon
  *
- *   onSelect = (selectedOption) => {
- *     this.setState({ selectedOption });
- *   };
- *
- *   render() {
- *     return (
- *       <Select
- *         data={this.items}
- *         selectedOption={this.state.selectedOption}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example MultiSelect
- *
- * ```
- * import React from 'react';
- * import { Select } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *   items = [
- *     { text: 'Option 1' },
- *     { text: 'Option 2' },
- *     { text: 'Option 3' },
- *   ];
- *
- *   state = {
- *     selectedOption: [],
- *   };
- *
- *   onSelect = (selectedOption: SelectOption) => {
- *     this.setState({ selectedOption });
- *   };
- *
- *   render() {
- *     return (
- *       <Select
- *         data={this.items}
- *         multiSelect={true}
- *         selectedOption={this.state.selectedOption}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Select Groups
- *
- * ```
- * import React from 'react';
- * import { Select } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *   items = [
- *     { text: 'Option 1' },
- *     { text: 'Option 2' },
- *     { text: 'Option 3', items: [ { text: 'Option 31' }, { text: 'Option 32' }, { text: 'Option 33' } ] },
- *     { text: 'Option 4' },
- *   ];
- *
- *  state = {
- *    selectedOption: null,
- *  };
- *
- *  onSelect = (selectedOption) => {
- *    this.setState({ selectedOption });
- *  };
- *
- *  render() {
- *    return (
- *       <Select
- *         data={this.items}
- *         selectedOption={this.state.selectedOption}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Icon
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Select, Icon } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *  items = [
- *    { text: 'Option 1' },
- *    { text: 'Option 2' },
- *    { text: 'Option 3' },
- *  ];
- *
- *  state = {
- *    selectedOption: null,
- *  };
- *
- *  onSelect = (selectedOption) => {
- *    this.setState({ selectedOption });
- *  };
- *
- *  renderIcon = (style, visible) => {
- *    const iconName = visible ? 'arrow-ios-upward' : 'arrow-ios-downward';
- *    return (
- *      <Icon {...style} name={iconName} />
- *    );
- *  };
- *
- *  render() {
- *    return (
- *      <Select
- *        data={this.items}
- *        selectedOption={this.state.selectedOption}
- *        icon={this.renderIcon}
- *        onSelect={this.onSelect}
- *      />
- *    );
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Select } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *   items = [
- *     { text: 'Option 1' },
- *     { text: 'Option 2' },
- *     { text: 'Option 3' },
- *   ];
- *
- *   state = {
- *     selectedOption: null,
- *   };
- *
- *   onSelect = (selectedOption) => {
- *     this.setState({ selectedOption });
- *   };
- *
- *   render() {
- *     return (
- *       <Select
- *         data={this.items}
- *         status='warning'
- *         selectedOption={this.state.selectedOption}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Disabled Option
- *
- * ```
- * import React from 'react';
- * import { Select } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *  items = [
- *    { text: 'Option 1' },
- *    { text: 'Option 2', disabled: true },
- *    { text: 'Option 3' },
- *    { text: 'Option 4' },
- *  ];
- *
- *  state = {
- *    selectedOption: null,
- *  };
- *
- *  onSelect = (selectedOption) => {
- *    this.setState({ selectedOption });
- *  };
- *
- *  render() {
- *    return (
- *       <Select
- *         style={styles.select}
- *         labelStyle={styles.labelStyle}
- *         placeholderStyle={styles.placeholderStyle}
- *         controlStyle={styles.controlStyle}
- *         data={this.items}
- *         selectedOption={this.state.selectedOption}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Select } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *  items = [
- *    { text: 'Option 1' },
- *    { text: 'Option 2' },
- *    { text: 'Option 3' },
- *  ];
- *
- *  state = {
- *    selectedOption: null,
- *  };
- *
- *  onSelect = (selectedOption) => {
- *    this.setState({ selectedOption });
- *  };
- *
- *  renderIcon = (style, visible) => (
- *    <Image style={style} source={require('path-to-assets/local-image.png')} />
- *  );
- *
- *  render() {
- *    return (
- *      <Select
- *        data={this.items}
- *        selectedOption={this.state.selectedOption}
- *        icon={this.renderIcon}
- *        onSelect={this.onSelect}
- *      />
- *    );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Select } from 'react-native-ui-kitten';
- *
- * export class SelectContainer extends React.Component {
- *
- *  private items: SelectOptionType[] = [
- *    { text: 'Option 1' },
- *    { text: 'Option 2', textStyle: { color: 'red', fontSize: 18 } },
- *    { text: 'Option 3' },
- *  ];
- *
- *  state = {
- *    selectedOption: null,
- *  };
- *
- *  onSelect = (selectedOption) => {
- *    this.setState({ selectedOption });
- *  };
- *
- *  render() {
- *    return (
- *       <Select
- *         style={styles.select}
- *         labelStyle={styles.labelStyle}
- *         placeholderStyle={styles.placeholderStyle}
- *         controlStyle={styles.controlStyle}
- *         data={this.items}
- *         selectedOption={this.state.selectedOption}
- *         onSelect={this.onSelect}
- *       />
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   select: { borderRadius: 8 },
- *   labelStyle: { color: 'gray' },
- *   placeholderStyle: { color: 'gray' },
- *   controlStyle: { borderRadius: 8 },
- * });
- * ```
+ * @example SelectInlineStyling
  */
 class SelectComponent extends React.Component<SelectProps, State> {
 
diff --git a/src/framework/ui/spinner/spinner.component.tsx b/src/framework/ui/spinner/spinner.component.tsx
index 865e2d8f2..b45d64eec 100644
--- a/src/framework/ui/spinner/spinner.component.tsx
+++ b/src/framework/ui/spinner/spinner.component.tsx
@@ -47,88 +47,13 @@ export type SpinnerElement = React.ReactElement<SpinnerProps>;
  * Can be `primary`, `success`, `info`, `warning`, `danger` or `alternative`.
  * Default is `primary`.
  *
- * @overview-example Simple Usage
+ * @overview-example SpinnerSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Spinner } from 'react-native-ui-kitten';
+ * @overview-example SpinnerSizes
  *
- * export const SpinnerShowcase = () => (
- *   <Spinner />
- * );
- * ```
+ * @overview-example SpinnerStatuses
  *
- * @overview-example Loading Data
- *
- * ```
- * import React from 'react';
- * import { View, StyleSheet } from 'react-native';
- * import { Spinner, List, ListItem } from 'react-native-ui-kitten';
- *
- * export class SpinnerDataLoading extends React.Component {
- *
- *  state = {
- *    data: [],
- *  };
- *
- *  componentDidMount() {
- *    setTimeout(this.loadData, 3000);
- *  }
- *
- *  loadData = () => {
- *    const data = [
- *      {
- *        title: 'Item 1',
- *      },
- *      {
- *        title: 'Item 2',
- *      },
- *      {
- *        title: 'Item 3',
- *      },
- *    ];
- *    this.setState({ data });
- *  };
- *
- *  private renderLoading = () => (
- *    <View style={styles.loading}>
- *      <Spinner/>
- *    </View>
- *  );
- *
- *  renderDataItem = ({ item }) => (
- *    <ListItem title={item.title}/>
- *  );
- *
- *  renderData = () => (
- *    <List data={this.state.data} renderItem={this.renderDataItem}/>
- *  );
- *
- *  render() {
- *    const isLoaded: boolean = this.state.data.length > 0;
- *    return isLoaded ? this.renderData() : this.renderLoading();
- *  }
- *}
- *
- * const styles = StyleSheet.create({
- *   loading: {
- *     flex: 1,
- *     justifyContent: 'center',
- *     alignItems: 'center',
- *   },
- *});
- *```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Spinner } from 'react-native-ui-kitten';
- *
- * export const SpinnerShowcase = (props) => (
- *   <Spinner size='giant' status='danger' />
- * );
- * ```
+ * @example SpinnerDataLoading
  */
 export class SpinnerComponent extends React.PureComponent<SpinnerProps> {
 
diff --git a/src/framework/ui/tab/tab.component.tsx b/src/framework/ui/tab/tab.component.tsx
index 7a8f83450..43cf0b2f3 100644
--- a/src/framework/ui/tab/tab.component.tsx
+++ b/src/framework/ui/tab/tab.component.tsx
@@ -64,71 +64,13 @@ export type TabElement = React.ReactElement<TabProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example TabSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Tab } from 'react-native-ui-kitten';
+ * @overview-example TabWithIcon
  *
- * export const DashboardTab = (props) => (
- *   <Tab title='DASHBOARD' />
- * );
- * ```
+ * @example TabWithExternalSourceIcon
  *
- * @overview-example With Icon
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Tab, Icon } from 'react-native-ui-kitten';
- *
- * const DashboardIcon = (style) => (
- *   <Icon {...style} name='layout' />
- * );
- *
- * export const DashboardTab = (props) => (
- *   <Tab title='DASHBOARD' icon={DashboardIcon} />
- * );
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Tab } from 'react-native-ui-kitten';
- *
- * const DashboardIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const DashboardTab = (props) => (
- *   <Tab title='DASHBOARD' icon={DashboardIcon} />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Tab } from 'react-native-ui-kitten';
- *
- * export const TabShowcase = (props) => (
- *   <Tab
- *     style={styles.tab}
- *     titleStyle={styles.tabTitle}
- *     title='DASHBOARD'
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   tab: { backgroundColor: 'white' },
- *   tabTitle: { color: 'black' },
- * });
- * ```
+ * @example TabInlineStyling
  */
 export class TabComponent extends React.Component<TabProps> {
 
diff --git a/src/framework/ui/tab/tabBar.component.tsx b/src/framework/ui/tab/tabBar.component.tsx
index 27dfa4e50..1ffdd17d0 100644
--- a/src/framework/ui/tab/tabBar.component.tsx
+++ b/src/framework/ui/tab/tabBar.component.tsx
@@ -49,35 +49,7 @@ export type TabBarElement = React.ReactElement<TabBarProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
- *
- * ```
- * import React from 'react';
- * import { TabBar, Tab } from 'react-native-ui-kitten';
- *
- * export class TabBarShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onBarSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <TabBar
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onBarSelect}>
- *         <Tab title='Tab 1'/>
- *         <Tab title='Tab 2'/>
- *         <Tab title='Tab 3'/>
- *       </TabBar>
- *     );
- *   }
- * }
- * ```
+ * @overview-example TabBarSimpleUsage
  */
 export class TabBarComponent extends React.Component<TabBarProps> {
 
diff --git a/src/framework/ui/tab/tabView.component.tsx b/src/framework/ui/tab/tabView.component.tsx
index 31aca8fb5..cc684dd77 100644
--- a/src/framework/ui/tab/tabView.component.tsx
+++ b/src/framework/ui/tab/tabView.component.tsx
@@ -63,104 +63,11 @@ export type TabViewElement = React.ReactElement<TabViewProps>;
  *
  * @property ViewProps
  *
- * @overview-example Simple Usage
+ * @overview-example TabViewSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { TabView, Tab, Text } from 'react-native-ui-kitten';
+ * @overview-example TabViewLazyLoading
  *
- * export class TabViewShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <TabView
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onSelect}>
- *         <Tab title='DASHBOARD'>
- *           <Text>DASHBOARD</Text>
- *         </Tab>
- *         <Tab title='SETTINGS'>
- *           <Text>SETTINGS</Text>
- *         </Tab>
- *       </TabView>
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Lazy Loading
- *
- * ```
- * import React from 'react';
- * import { TabView, Tab, Text } from 'react-native-ui-kitten';
- *
- * export class TabViewShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onSelect = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   shouldLoadTabContent = (index) => {
- *     return index === this.state.selectedIndex;
- *   };
- *
- *   render() {
- *     return (
- *       <TabView
- *         selectedIndex={this.state.selectedIndex}
- *         shouldLoadComponent={this.shouldLoadTabContent}
- *         onSelect={this.onSelect}>
- *         <Tab title='DASHBOARD'>
- *           <Text>DASHBOARD</Text>
- *         </Tab>
- *         <Tab title='SETTINGS'>
- *           <Text>SETTINGS</Text>
- *         </Tab>
- *       </TabView>
- *     );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { TabView, Tab, Text } from 'react-native-ui-kitten';
- *
- * export const TabViewShowcase = (props) => (
- *   <TabView
- *     style={styles.tabView}
- *     tabBarStyle={styles.tabBar}
- *     indicatorStyle={styles.tabViewIndicator}>
- *     <Tab title='DASHBOARD'>
- *       <Text>DASHBOARD</Text>
- *     </Tab>
- *     <Tab title='SETTINGS'>
- *       <Text>SETTINGS</Text>
- *     </Tab>
- *   </TabView>
- * );
- *
- * const styles = StyleSheet.create({
- *   tabView: { backgroundColor: 'white' },
- *   tabBar: { backgroundColor: 'gray' },
- *   tabViewIndicator: { backgroundColor: 'blue' },
- * });
- * ```
+ * @example TabViewInlineStyling
  */
 export class TabView extends React.Component<TabViewProps> {
 
diff --git a/src/framework/ui/text/text.component.tsx b/src/framework/ui/text/text.component.tsx
index 5b8dea143..012a56394 100644
--- a/src/framework/ui/text/text.component.tsx
+++ b/src/framework/ui/text/text.component.tsx
@@ -47,48 +47,15 @@ export type TextElement = React.ReactElement<TextProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example TextSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Text } from 'react-native-ui-kitten';
+ * @overview-example TextAppearances
  *
- * export const TextShowcase = (props) => (
- *   <Text>Sample Text</Text>
- * );
- * ```
+ * @overview-example TextCategories
  *
- * @overview-example Eva Styling
+ * @overview-example TextStatuses
  *
- * ```
- * import React from 'react';
- * import { Text } from 'react-native-ui-kitten';
- *
- * export const TextShowcase = (props) => (
- *   <Text
- *     appearance='hint'
- *     category='p2'
- *     status='success'>
- *     Sample Text
- *   </Text>
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Text } from 'react-native-ui-kitten';
- *
- * export const TextShowcase = (props) => (
- *   <Text style={styles.text}>Sample Text</Text>
- * );
- *
- * const styles = StyleSheet.create({
- *   text: { color: 'black', fontSize: 18 },
- * });
- * ```
+ * @example TextInlineStyling
  */
 export class TextComponent extends React.Component<TextProps> {
 
diff --git a/src/framework/ui/toggle/toggle.component.tsx b/src/framework/ui/toggle/toggle.component.tsx
index 6563b472a..ce60aa50c 100644
--- a/src/framework/ui/toggle/toggle.component.tsx
+++ b/src/framework/ui/toggle/toggle.component.tsx
@@ -74,123 +74,15 @@ export type ToggleElement = React.ReactElement<ToggleProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example ToggleSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Toggle } from 'react-native-ui-kitten';
+ * @overview-example ToggleStatus
  *
- * export class ToggleShowcase extends React.Component {
+ * @overview-example ToggleSize
  *
- *   state = {
- *     checked: false,
- *   };
+ * @overview-example ToggleWithText
  *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Toggle
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Text
- *
- * ```
- * import React from 'react';
- * import { Toggle } from 'react-native-ui-kitten';
- *
- * export class ToggleShowcase extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Toggle
- *         text='Place your text'
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     )
- *   }
- * }
- * ```
- *
- * @overview-example Eva Styling
- *
- * ```
- * import React from 'react';
- * import { Toggle } from 'react-native-ui-kitten';
- *
- * export class ToggleShowcase extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Toggle
- *         size='small'
- *         status='info'
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Toggle } from 'react-native-ui-kitten';
- *
- * export class ToggleShowcase extends React.Component {
- *
- *   state = {
- *     checked: false,
- *   };
- *
- *   onChange = (checked) => {
- *     this.setState({ checked });
- *   };
- *
- *   render() {
- *     return (
- *       <Toggle
- *         textStyle={styles.toggleText}
- *         text='Place your Text'
- *         checked={this.state.checked}
- *         onChange={this.onChange}
- *       />
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   toggleText: { color: 'black' },
- * });
- * ```
+ * @example ToggleInlineStyling
  */
 export class ToggleComponent extends React.Component<ToggleProps> implements PanResponderCallbacks {
 
diff --git a/src/framework/ui/tooltip/tooltip.component.tsx b/src/framework/ui/tooltip/tooltip.component.tsx
index c239ad855..b513969d9 100644
--- a/src/framework/ui/tooltip/tooltip.component.tsx
+++ b/src/framework/ui/tooltip/tooltip.component.tsx
@@ -75,145 +75,15 @@ export type TooltipElement = React.ReactElement<TooltipProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example TooltipSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { Tooltip, Button } from 'react-native-ui-kitten';
+ * @overview-example TooltipWithIcon
  *
- * export class TooltipShowcase extends React.Component {
+ * @overview-example TooltipPlacement
  *
- *   state = {
- *     tooltipVisible: false,
- *   };
+ * @example TooltipWithExternalSourceIcon
  *
- *   toggleTooltip = () => {
- *     const tooltipVisible = !this.state.tooltipVisible;
- *     this.setState({ tooltipVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <Tooltip
- *         visible={this.state.tooltipVisible}
- *         text='Tooltip Text'
- *         onBackdropPress={this.toggleTooltip}>
- *         <Button onPress={this.toggleTooltip}>TOGGLE TOOLTIP</Button>
- *       </Tooltip>
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example With Icon
- *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { Tooltip, Button, Icon } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Icon {...style} name='star' />
- * );
- *
- * export class TooltipShowcase extends React.Component {
- *
- *   state = {
- *     tooltipVisible: false,
- *   };
- *
- *   toggleTooltip = () => {
- *     const tooltipVisible = !this.state.tooltipVisible;
- *     this.setState({ tooltipVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <Tooltip
- *         visible={this.state.tooltipVisible}
- *         text='Tooltip Text'
- *         icon={StarIcon}
- *         onBackdropPress={this.toggleTooltip}>
- *         <Button onPress={this.toggleTooltip}> TOGGLE TOOLTIP</Button>
- *       </Tooltip>
- *     );
- *   }
- * }
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native';
- * import { Tooltip, Button } from 'react-native-ui-kitten';
- *
- * const StarIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export class TooltipShowcase extends React.Component {
- *
- *   state = {
- *     tooltipVisible: false,
- *   };
- *
- *   toggleTooltip = () => {
- *     const tooltipVisible = !this.state.tooltipVisible;
- *     this.setState({ tooltipVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <Tooltip
- *         visible={this.state.tooltipVisible}
- *         text='Tooltip Text'
- *         icon={StarIcon}
- *         onBackdropPress={this.toggleTooltip}>
- *         <Button onPress={this.toggleTooltip}>TOGGLE TOOLTIP</Button>
- *       </Tooltip>
- *     );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Tooltip, Button } from 'react-native-ui-kitten';
- *
- * export class TooltipShowcase extends React.Component {
- *
- *   state = {
- *     tooltipVisible: false,
- *   };
- *
- *   toggleTooltip = () => {
- *     const tooltipVisible = !this.state.tooltipVisible;
- *     this.setState({ tooltipVisible });
- *   };
- *
- *   render() {
- *     return (
- *       <Tooltip
- *         visible={this.state.tooltipVisible}
- *         text='Tooltip Text'
- *         textStyle={styles.tooltipText}
- *         onBackdropPress={this.toggleTooltip}>
- *         <Button onPress={this.toggleTooltip}>TOGGLE TOOLTIP</Button>
- *       </Tooltip>
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   tooltipText: { color: 'white', fontSize: 18 },
- * });
- * ```
+ * @example TooltipInlineStyling
  */
 export class TooltipComponent extends React.Component<TooltipProps> {
 
diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx
index 1c0b58025..41814ed3c 100644
--- a/src/framework/ui/topNavigation/topNavigation.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigation.component.tsx
@@ -67,194 +67,15 @@ export type TopNavigationElement = React.ReactElement<TopNavigationProps>;
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example TopNavigationSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { TopNavigation } from 'react-native-ui-kitten';
+ * @overview-example TopNavigationActions
  *
- * export const AwesomeAppHeader = (props) => (
- *   <TopNavigation title='Awesome App' />
- * );
- * ```
+ * @overview-example TopNavigationAlignments
  *
- * @overview-example Actions
+ * @overview-example TopNavigationWithMenu
  *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
- *
- * import React from 'react';
- * import { TopNavigation, TopNavigationAction, Icon } from 'react-native-ui-kitten';
- *
- * const BackIcon = (style) => (
- *   <Icon {...style} name='arrow-back' />
- * );
- *
- * const EditIcon = (style) => (
- *   <Icon {...style} name='edit' />
- * );
- *
- * const MenuIcon = (style) => (
- *   <Icon {...style} name='more-vertical' />
- * );
- *
- * const BackAction = (props) => (
- *   <TopNavigationAction {...props} icon={BackIcon} />
- * );
- *
- * const EditAction = (props) => (
- *   <TopNavigationAction {...props} icon={EditIcon} />
- * );
- *
- * const MenuAction = (props) => (
- *   <TopNavigationAction {...props} icon={MenuIcon} />
- * );
- *
- * export const AwesomeAppHeader = (props) => {
- *
- *   const onBackPress = () => {};
- *
- *   const renderLeftControl = () => (
- *     <BackAction onPress={onBackPress} />
- *   );
- *
- *   const renderRightControls = () => [
- *     <EditAction />,
- *     <MenuAction />,
- *   ];
- *
- *   return (
- *     <TopNavigation
- *       title='Awesome App'
- *       leftControl={renderLeftControl()}
- *       rightControls={renderRightControls()}
- *     />
- *   );
- * };
- * ```
- *
- * @example With Menu
- *
- * ```
- * import React from 'react';
- * import { OverflowMenu, TopNavigation, TopNavigationAction, Icon } from 'react-native-ui-kitten';
- *
- * const BackIcon = (style) => (
- *   <Icon {...style} name='arrow-back'/>
- * );
- *
- * const MenuIcon = (style) => (
- *   <Icon {...style} name='more-vertical'/>
- * );
- *
- * export class TopNavigationWithMenu extends React.Component {
- *
- *   state = {
- *     menuVisible: false,
- *   };
- *
- *   toggleMenu = () => {
- *     const menuVisible = !this.state.menuVisible;
- *     this.setState({ menuVisible });
- *   };
- *
- *   onMenuItemSelect = (index) => {
- *     this.toggleMenu();
- *     this.props.onMenuItemSelect && this.props.onMenuItemSelect(index);
- *   };
- *
- *   renderMenuAction = () => (
- *     <OverflowMenu
- *       visible={this.state.menuVisible}
- *       data={this.props.menu}
- *       onSelect={this.onMenuItemSelect}
- *       onBackdropPress={this.toggleMenu}>
- *       <TopNavigationAction icon={MenuIcon} onPress={this.toggleMenu} />
- *     </OverflowMenu>
- *   );
- *
- *   renderBackAction = () => (
- *     <TopNavigationAction icon={BackIcon} onPress={this.props.onBackPress} />
- *   );
- *
- *   render() {
- *     const { menu, onBackPress, ...restProps } = this.props;
- *     return (
- *       <TopNavigation
- *         leftControl={onBackPress && this.renderBackAction()}
- *         rightControls={menu && this.renderMenuAction()}
- *         {...restProps}
- *       />
- *     );
- *   }
- * }
- *
- * // USAGE:
- *
- * const InfoIcon = (style) => (
- *   <Icon {...style} name='info'/>
- * );
- *
- * const LogoutIcon = (style) => (
- *   <Icon {...style} name='log-out'/>
- * );
- *
- * const navigationMenu = [
- *   { title: 'About', icon: InfoIcon },
- *   { title: 'Logout', icon: LogoutIcon },
- * ];
- *
- * export const HomeScreen = () => {
- *
- *   const onMenuItemSelect = () => {};
- *
- *   const onBackPress = () => {};
- *
- *   return (
- *     <TopNavigationWithMenu
- *       menu={navigationMenu}
- *       onMenuItemSelect={onMenuItemSelect}
- *       onBackPress={onBackPress}
- *     />
- *   );
- * };
- * ```
- *
- * @example Centered Title
- *
- * ```
- * import React from 'react';
- * import { TopNavigation } from 'react-native-ui-kitten';
- *
- * export const AwesomeAppHeader = (props) => (
- *   <TopNavigation alignment='center' title='Awesome App' />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { TopNavigation } from 'react-native-ui-kitten';
- *
- * export const AwesomeAppHeader = (props) => (
- *   <TopNavigation
- *     style={styles.header}
- *     title='Awesome App'
- *     subtitle='Subtitle'
- *     titleStyle={styles.headerTitle}
- *     subtitleStyle={styles.headerSubtitle}
- *   />
- * );
- *
- * const styles = StyleSheet.create({
- *   header: { backgroundColor: 'black' },
- *   headerTitle: { color: 'white' },
- *   headerSubtitle: { color: 'gray' },
- * });
- * ```
+ * @example TopNavigationInlineStyling
  */
 export class TopNavigationComponent extends React.Component<TopNavigationProps> {
 
diff --git a/src/framework/ui/topNavigation/topNavigationAction.component.tsx b/src/framework/ui/topNavigation/topNavigationAction.component.tsx
index 04ef40419..837e79de5 100644
--- a/src/framework/ui/topNavigation/topNavigationAction.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigationAction.component.tsx
@@ -45,55 +45,11 @@ export type TopNavigationActionElement = React.ReactElement<TopNavigationActionP
  *
  * @property StyledComponentProps
  *
- * @overview-example Simple Usage
+ * @overview-example TopNavigationActionSimpleUsage
  *
- * ```
- * // IMPORTANT: To use Icon component make sure to follow this guide:
- * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ * @example TopNavigationActionExternalSourceIcon
  *
- * import React from 'react';
- * import { TopNavigationAction, Icon } from 'react-native-ui-kitten';
- *
- * const BackIcon = (style) => (
- *   <Icon {...style} name='arrow-back' } />
- * );
- *
- * export const BackAction = (props) => (
- *   <TopNavigationAction {...props} icon={BackIcon} />
- * );
- * ```
- *
- * @example Using Asset Icons
- *
- * ```
- * import React from 'react';
- * import { Image } from 'react-native-ui-kitten';
- * import { TopNavigationAction } from 'react-native-ui-kitten';
- *
- * const BackIcon = (style) => (
- *   <Image style={style} source={require('path-to-assets/local-image.png')} />
- * );
- *
- * export const BackAction = (props) => (
- *   <TopNavigationAction {...props} icon={BackIcon} />
- * );
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { TopNavigationAction } from 'react-native-ui-kitten';
- *
- * export const BackAction = (props) => (
- *   <TopNavigationAction style={styles.action} />
- * );
- *
- * const styles = StyleSheet.create({
- *   action: { marginHorizontal: 4 },
- * });
- * ```
+ * @example TopNavigationActionInlineStyling
  */
 class TopNavigationActionComponent extends React.Component<TopNavigationActionProps> {
 
diff --git a/src/framework/ui/viewPager/viewPager.component.tsx b/src/framework/ui/viewPager/viewPager.component.tsx
index 7b674d56e..73655865e 100644
--- a/src/framework/ui/viewPager/viewPager.component.tsx
+++ b/src/framework/ui/viewPager/viewPager.component.tsx
@@ -53,115 +53,11 @@ export type ViewPagerElement = React.ReactElement<ViewPagerProps>;
  *
  * @property ScrollViewProps
  *
- * @overview-example Simple Usage
+ * @overview-example ViewPagerSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { ViewPager, Layout, Text } from 'react-native-ui-kitten';
+ * @overview-example ViewPagerLazyLoading
  *
- * export class ViewPagerShowcase extends React.Component {
- *
- *   state = {
- *      selectedIndex: 0,
- *    };
- *
- *   onIndexChange = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <ViewPager
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onIndexChange}>
- *         <Layout>
- *           <Text>Tab 1</Text>
- *         </Layout>
- *         <Layout>
- *           <Text>Tab 2</Text>
- *         </Layout>
- *       </ViewPager>
- *     );
- *   }
- * }
- * ```
- *
- * @overview-example Lazy Loading
- *
- * ```
- * import React from 'react';
- * import { ViewPager, Layout, Text } from 'react-native-ui-kitten';
- *
- * export class ViewPagerShowcase extends React.Component {
- *
- *   state = {
- *     selectedIndex: 0,
- *   };
- *
- *   onIndexChange = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   shouldLoadPageContent = (index) => {
- *     return index === this.state.selectedIndex;
- *   };
- *
- *   render() {
- *     return (
- *       <ViewPager
- *         selectedIndex={this.state.selectedIndex}
- *         shouldLoadComponent={this.shouldLoadPageContent}
- *         onSelect={this.onIndexChange}>
- *         <Layout>
- *           <Text>Tab 1</Text>
- *         </Layout>
- *         <Layout>
- *           <Text>Tab 2</Text>
- *         </Layout>
- *       </ViewPager>
- *     );
- *   }
- * }
- * ```
- *
- * @example Inline Styling
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { ViewPager, Layout, Text } from 'react-native-ui-kitten';
- *
- * export class ViewPagerShowcase extends React.Component {
- *
- *   state = {
- *      selectedIndex: 0,
- *    };
- *
- *   onIndexChange = (selectedIndex) => {
- *     this.setState({ selectedIndex });
- *   };
- *
- *   render() {
- *     return (
- *       <ViewPager
- *         style={styles.container}
- *         selectedIndex={this.state.selectedIndex}
- *         onSelect={this.onIndexChange}>
- *         <Layout>
- *           <Text>Tab 1</Text>
- *         </Layout>
- *         <Layout>
- *           <Text>Tab 2</Text>
- *         </Layout>
- *       </ViewPager>
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   container: { paddingHorizontal: 16 },
- * });
- * ```
+ * @example ViewPagerInlineStyling
  */
 export class ViewPager extends React.Component<ViewPagerProps> implements PanResponderCallbacks {
 
diff --git a/src/playground/.expo-shared/assets.json b/src/playground/.expo-shared/assets.json
new file mode 100644
index 000000000..17ad2288c
--- /dev/null
+++ b/src/playground/.expo-shared/assets.json
@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}
\ No newline at end of file
diff --git a/src/playground/.gitignore b/src/playground/.gitignore
new file mode 100644
index 000000000..54e5df0fa
--- /dev/null
+++ b/src/playground/.gitignore
@@ -0,0 +1,64 @@
+# OSX
+#
+.DS_Store
+
+# iOS
+#
+/ios/Pods/
+/ios/build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+*.p8
+*.p12
+*.mobileprovision
+
+# Android/IntelliJ
+#
+.idea
+.gradle
+local.properties
+*.iml
+*.jks
+*.key
+
+# Visual Studio Code
+#
+.vscode/
+
+# node.js
+#
+node_modules/**/*
+yarn-error.log
+npm-debug.*
+
+# BUCK
+#
+buck-out/
+\.buckd/
+*.keystore
+
+# Bundle artifact
+#
+*.jsbundle
+build/
+
+# Expo
+#
+.expo/*
+*.orig.*
+web-build/
+web-report/
diff --git a/src/playground/App.ts b/src/playground/App.tsx
similarity index 100%
rename from src/playground/App.ts
rename to src/playground/App.tsx
diff --git a/src/playground/app.json b/src/playground/app.json
index 6e45500f5..bd016a6fe 100644
--- a/src/playground/app.json
+++ b/src/playground/app.json
@@ -1,26 +1,33 @@
 {
   "expo": {
-    "name": "react-native-ui-kitten-playground",
-    "description": "react-native-ui-kitten-playground",
-    "slug": "playground",
-    "sdkVersion": "34.0.0",
+    "name": "AwesomeApp",
+    "slug": "awesome-app",
+    "privacy": "public",
+    "sdkVersion": "35.0.0",
     "platforms": [
-      "android",
       "ios",
+      "android",
       "web"
     ],
     "version": "1.0.0",
     "orientation": "portrait",
-    "packagerOpts": {
-      "config": "./metro.config.js"
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
     },
-    "androidStatusBarColor": "#3366FF",
-    "androidStatusBar": {
-      "barStyle": "light-content",
-      "backgroundColor": "#3366FF"
+    "updates": {
+      "fallbackToCacheTimeout": 0
     },
     "assetBundlePatterns": [
-      "./assets"
-    ]
-  }
-}
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "entryPoint": "node_modules/expo/AppEntry.js"
+  },
+  "displayName": "AwesomeApp",
+  "name": "AwesomeApp"
+}
\ No newline at end of file
diff --git a/src/playground/assets/icon.png b/src/playground/assets/icon.png
new file mode 100644
index 000000000..7f5e01c5e
Binary files /dev/null and b/src/playground/assets/icon.png differ
diff --git a/src/playground/assets/splash.png b/src/playground/assets/splash.png
new file mode 100644
index 000000000..4f9ade699
Binary files /dev/null and b/src/playground/assets/splash.png differ
diff --git a/src/playground/index.js b/src/playground/index.js
new file mode 100644
index 000000000..603481a99
--- /dev/null
+++ b/src/playground/index.js
@@ -0,0 +1,4 @@
+import { AppRegistry } from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('AwesomeApp', () => App);
diff --git a/src/playground/package-lock.json b/src/playground/package-lock.json
index 0433d00b4..679e40aea 100644
--- a/src/playground/package-lock.json
+++ b/src/playground/package-lock.json
@@ -1,5 +1,4 @@
 {
-  "name": "react-native-ui-kitten-playground",
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
@@ -1071,28 +1070,29 @@
       }
     },
     "@expo/webpack-config": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-0.5.19.tgz",
-      "integrity": "sha512-jQp/UAL+42GZhy4W+9W9IfzvU+UlAH3QduEl4WzevS10oUWiPxoVxyTP6r/ZWkBp9ldfISjLxhv16wuzbDOWpw==",
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-0.7.6.tgz",
+      "integrity": "sha512-zCYhUaZMdiaoA76A6P8oYYb5U6MF0FqRenCV45Ok3FdCGR4ml4OE0Ek7TUnpk+b00/lzroF0fcPDvMdMLSbruA==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.0.0",
         "@babel/polyfill": "^7.2.5",
         "@babel/runtime": "^7.3.4",
-        "@expo/config": "^2.0.4",
-        "@expo/webpack-pwa-manifest-plugin": "^1.1.5",
+        "@expo/config": "^2.1.5",
+        "@expo/webpack-pwa-manifest-plugin": "^1.2.5",
+        "@types/yup": "^0.26.24",
         "babel-loader": "^8.0.5",
-        "babel-preset-expo": "^5.1.1",
         "brotli-webpack-plugin": "^1.1.0",
         "case-sensitive-paths-webpack-plugin": "^2.2.0",
         "chalk": "^2.4.2",
         "clean-webpack-plugin": "^1.0.1",
         "compression-webpack-plugin": "^2.0.0",
-        "copy-webpack-plugin": "^5.0.0",
+        "copy-webpack-plugin": "5.0.0",
         "css-loader": "^2.1.1",
         "deep-diff": "^1.0.2",
         "file-loader": "^3.0.1",
         "find-yarn-workspace-root": "^1.2.1",
+        "getenv": "^0.7.0",
         "html-loader": "^0.5.5",
         "html-webpack-plugin": "4.0.0-alpha.2",
         "is-wsl": "^2.0.0",
@@ -1100,19 +1100,36 @@
         "optimize-css-assets-webpack-plugin": "^5.0.1",
         "pnp-webpack-plugin": "^1.2.1",
         "postcss-safe-parser": "^4.0.1",
+        "prettier": "^1.16.4",
         "progress-bar-webpack-plugin": "^1.12.1",
-        "react-dev-utils": "^7.0.3",
+        "react-dev-utils": "9.0.3",
         "style-loader": "^0.23.1",
         "terser-webpack-plugin": "^1.2.3",
         "url-loader": "^1.1.2",
-        "webpack": "4.24.0",
+        "webpack": "4.29.6",
         "webpack-bundle-analyzer": "^3.0.4",
-        "webpack-deep-scope-plugin": "^1.6.0",
+        "webpack-deep-scope-plugin": "1.6.0",
         "webpack-manifest-plugin": "^2.0.4",
         "webpack-merge": "^4.2.1",
-        "workbox-webpack-plugin": "^3.6.3"
+        "workbox-webpack-plugin": "^3.6.3",
+        "yup": "^0.27.0"
       },
       "dependencies": {
+        "html-webpack-plugin": {
+          "version": "4.0.0-alpha.2",
+          "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-alpha.2.tgz",
+          "integrity": "sha512-tyvhjVpuGqD7QYHi1l1drMQTg5i+qRxpQEGbdnYFREgOKy7aFDf/ocQ/V1fuEDlQx7jV2zMap3Hj2nE9i5eGXw==",
+          "dev": true,
+          "requires": {
+            "@types/tapable": "1.0.2",
+            "html-minifier": "^3.2.3",
+            "loader-utils": "^1.1.0",
+            "lodash": "^4.17.10",
+            "pretty-error": "^2.0.2",
+            "tapable": "^1.0.0",
+            "util.promisify": "1.0.0"
+          }
+        },
         "is-wsl": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz",
@@ -1275,6 +1292,19 @@
           "requires": {
             "react-is": "^16.7.0"
           }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
         }
       }
     },
@@ -1298,6 +1328,15 @@
         }
       }
     },
+    "@react-navigation/web": {
+      "version": "1.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/web/-/web-1.0.0-alpha.9.tgz",
+      "integrity": "sha512-1UugAcTbJ/yJNLVvEIJ+hAp/KcwBiRU76vPvNXD1NLrU0ZzK1+GrxvzR7p4effMTJgPRkRzvz8tRNklv8YLLHQ==",
+      "requires": {
+        "history": "^4.7.2",
+        "query-string": "^6.2.0"
+      }
+    },
     "@types/fbemitter": {
       "version": "2.0.32",
       "resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
@@ -1309,9 +1348,9 @@
       "integrity": "sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag=="
     },
     "@types/lodash": {
-      "version": "4.14.140",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.140.tgz",
-      "integrity": "sha512-OU57uYCUUv9s8lgQTYuQlL6xkttWtz8VLCJSnt8ikla9+UXqMGJ8adCprSw7egJHSHwGvFpGhfpQDtHm/NQ3Cw=="
+      "version": "4.14.141",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.141.tgz",
+      "integrity": "sha512-v5NYIi9qEbFEUpCyikmnOYe4YlP8BMUdTcNCAquAKzu+FA7rZ1onj9x80mbnDdOW/K5bFf3Tv5kJplP33+gAbQ=="
     },
     "@types/lodash.zipobject": {
       "version": "4.1.6",
@@ -1321,6 +1360,12 @@
         "@types/lodash": "*"
       }
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -1332,6 +1377,26 @@
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.5.3.tgz",
       "integrity": "sha512-Jugo5V/1bS0fRhy2z8+cUAHEyWOATaz4rbyLVvcFs7+dXp5HfwpEwzF1Q11bB10ApUqHf+yTauxI0UXQDwGrbA=="
     },
+    "@types/react": {
+      "version": "16.9.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.4.tgz",
+      "integrity": "sha512-ItGNmJvQ0IvWt8rbk5PLdpdQhvBVxAaXI9hDlx7UMd8Ie1iMIuwMNiKeTfmVN517CdplpyXvA22X4zm4jGGZnw==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-native": {
+      "version": "0.57.65",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.57.65.tgz",
+      "integrity": "sha512-7P5ulTb+/cnwbABWaAjzKmSYkRWeK7UCTfUwHhDpnwxdiL2X/KbdN1sPgo0B2E4zxfYE3MEoHv7FhB8Acfvf8A==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
@@ -1348,18 +1413,24 @@
       "resolved": "https://registry.npmjs.org/@types/websql/-/websql-0.0.27.tgz",
       "integrity": "sha1-Yhpman8CAY58u0q6uVaiVzbCfXE="
     },
+    "@types/yup": {
+      "version": "0.26.24",
+      "resolved": "https://registry.npmjs.org/@types/yup/-/yup-0.26.24.tgz",
+      "integrity": "sha512-x0bhHnYjH5mZit4HivUYbTMO4LouOTGwp/LLxSL1mbJYVwNJtHYESH0ed2bwM1lkI2yDmsoCDYJnWEgHeJDACg==",
+      "dev": true
+    },
     "@unimodules/core": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@unimodules/core/-/core-3.0.2.tgz",
-      "integrity": "sha512-EMZjVp+yrtoPKpDBPvj4+hyDWALl7gvpWeUsDz2Nb9MMBPLnhag1uNk3KC98StJdnjbSXKSdKrCMMidOXnyKcg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@unimodules/core/-/core-4.0.0.tgz",
+      "integrity": "sha512-lHxRmCG9DK3/aA2lnBKPS32K95NpYE10mZQRp5dycSptgN0DIeWWHuE01SndcSUACGyEP+tDO+DnGo8mhLlt4Q==",
       "requires": {
         "compare-versions": "^3.4.0"
       }
     },
     "@unimodules/react-native-adapter": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-3.0.0.tgz",
-      "integrity": "sha512-zkFFE0HQ2Flfx/aY3hBKDgMvQ1meUm3H6vMIacY1KywexCuKW8ivBobkOsHIet4jf7km0Eklt6WtB3LqQVw5yw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-4.0.0.tgz",
+      "integrity": "sha512-zGAyDhqAEWvshdSxc523srP6OAZaSr95Cv5EuxLJbFGcJENHhK8o/qxhwS7/LYTF3LqtOlnSlwQta3v3y6kF4A==",
       "requires": {
         "invariant": "^2.2.4",
         "lodash": "^4.5.0",
@@ -1367,175 +1438,179 @@
       }
     },
     "@webassemblyjs/ast": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
-      "integrity": "sha512-ZEzy4vjvTzScC+SH8RBssQUawpaInUdMTYwYYLh54/s8TuT0gBLuyUnppKsVyZEi876VmmStKsUs28UxPgdvrA==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
+      "integrity": "sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.7.11",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.11",
-        "@webassemblyjs/wast-parser": "1.7.11"
+        "@webassemblyjs/helper-module-context": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/wast-parser": "1.8.5"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.11.tgz",
-      "integrity": "sha512-zY8dSNyYcgzNRNT666/zOoAyImshm3ycKdoLsyDw/Bwo6+/uktb7p4xyApuef1dwEBo/U/SYQzbGBvV+nru2Xg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz",
+      "integrity": "sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==",
       "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.11.tgz",
-      "integrity": "sha512-7r1qXLmiglC+wPNkGuXCvkmalyEstKVwcueZRP2GNC2PAvxbLYwLLPr14rcdJaE4UtHxQKfFkuDFuv91ipqvXg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz",
+      "integrity": "sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==",
       "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.11.tgz",
-      "integrity": "sha512-MynuervdylPPh3ix+mKZloTcL06P8tenNH3sx6s0qE8SLR6DdwnfgA7Hc9NSYeob2jrW5Vql6GVlsQzKQCa13w==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz",
+      "integrity": "sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==",
       "dev": true
     },
     "@webassemblyjs/helper-code-frame": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.11.tgz",
-      "integrity": "sha512-T8ESC9KMXFTXA5urJcyor5cn6qWeZ4/zLPyWeEXZ03hj/x9weSokGNkVCdnhSabKGYWxElSdgJ+sFa9G/RdHNw==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz",
+      "integrity": "sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/wast-printer": "1.7.11"
+        "@webassemblyjs/wast-printer": "1.8.5"
       }
     },
     "@webassemblyjs/helper-fsm": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.11.tgz",
-      "integrity": "sha512-nsAQWNP1+8Z6tkzdYlXT0kxfa2Z1tRTARd8wYnc/e3Zv3VydVVnaeePgqUzFrpkGUyhUUxOl5ML7f1NuT+gC0A==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz",
+      "integrity": "sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==",
       "dev": true
     },
     "@webassemblyjs/helper-module-context": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.11.tgz",
-      "integrity": "sha512-JxfD5DX8Ygq4PvXDucq0M+sbUFA7BJAv/GGl9ITovqE+idGX+J3QSzJYz+LwQmL7fC3Rs+utvWoJxDb6pmC0qg==",
-      "dev": true
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz",
+      "integrity": "sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.8.5",
+        "mamacro": "^0.0.3"
+      }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.11.tgz",
-      "integrity": "sha512-cMXeVS9rhoXsI9LLL4tJxBgVD/KMOKXuFqYb5oCJ/opScWpkCMEz9EJtkonaNcnLv2R3K5jIeS4TRj/drde1JQ==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz",
+      "integrity": "sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.11.tgz",
-      "integrity": "sha512-8ZRY5iZbZdtNFE5UFunB8mmBEAbSI3guwbrsCl4fWdfRiAcvqQpeqd5KHhSWLL5wuxo53zcaGZDBU64qgn4I4Q==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz",
+      "integrity": "sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/helper-buffer": "1.7.11",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.11",
-        "@webassemblyjs/wasm-gen": "1.7.11"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-buffer": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/wasm-gen": "1.8.5"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.7.11.tgz",
-      "integrity": "sha512-Mmqx/cS68K1tSrvRLtaV/Lp3NZWzXtOHUW2IvDvl2sihAwJh4ACE0eL6A8FvMyDG9abes3saB6dMimLOs+HMoQ==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz",
+      "integrity": "sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==",
       "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.7.11.tgz",
-      "integrity": "sha512-vuGmgZjjp3zjcerQg+JA+tGOncOnJLWVkt8Aze5eWQLwTQGNgVLcyOTqgSCxWTR4J42ijHbBxnuRaL1Rv7XMdw==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.8.5.tgz",
+      "integrity": "sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==",
       "dev": true,
       "requires": {
-        "@xtuc/long": "4.2.1"
+        "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.7.11.tgz",
-      "integrity": "sha512-C6GFkc7aErQIAH+BMrIdVSmW+6HSe20wg57HEC1uqJP8E/xpMjXqQUxkQw07MhNDSDcGpxI9G5JSNOQCqJk4sA==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.8.5.tgz",
+      "integrity": "sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==",
       "dev": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.11.tgz",
-      "integrity": "sha512-FUd97guNGsCZQgeTPKdgxJhBXkUbMTY6hFPf2Y4OedXd48H97J+sOY2Ltaq6WGVpIH8o/TGOVNiVz/SbpEMJGg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz",
+      "integrity": "sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/helper-buffer": "1.7.11",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.11",
-        "@webassemblyjs/helper-wasm-section": "1.7.11",
-        "@webassemblyjs/wasm-gen": "1.7.11",
-        "@webassemblyjs/wasm-opt": "1.7.11",
-        "@webassemblyjs/wasm-parser": "1.7.11",
-        "@webassemblyjs/wast-printer": "1.7.11"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-buffer": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/helper-wasm-section": "1.8.5",
+        "@webassemblyjs/wasm-gen": "1.8.5",
+        "@webassemblyjs/wasm-opt": "1.8.5",
+        "@webassemblyjs/wasm-parser": "1.8.5",
+        "@webassemblyjs/wast-printer": "1.8.5"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.11.tgz",
-      "integrity": "sha512-U/KDYp7fgAZX5KPfq4NOupK/BmhDc5Kjy2GIqstMhvvdJRcER/kUsMThpWeRP8BMn4LXaKhSTggIJPOeYHwISA==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz",
+      "integrity": "sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.11",
-        "@webassemblyjs/ieee754": "1.7.11",
-        "@webassemblyjs/leb128": "1.7.11",
-        "@webassemblyjs/utf8": "1.7.11"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/ieee754": "1.8.5",
+        "@webassemblyjs/leb128": "1.8.5",
+        "@webassemblyjs/utf8": "1.8.5"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.11.tgz",
-      "integrity": "sha512-XynkOwQyiRidh0GLua7SkeHvAPXQV/RxsUeERILmAInZegApOUAIJfRuPYe2F7RcjOC9tW3Cb9juPvAC/sCqvg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz",
+      "integrity": "sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/helper-buffer": "1.7.11",
-        "@webassemblyjs/wasm-gen": "1.7.11",
-        "@webassemblyjs/wasm-parser": "1.7.11"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-buffer": "1.8.5",
+        "@webassemblyjs/wasm-gen": "1.8.5",
+        "@webassemblyjs/wasm-parser": "1.8.5"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.11.tgz",
-      "integrity": "sha512-6lmXRTrrZjYD8Ng8xRyvyXQJYUQKYSXhJqXOBLw24rdiXsHAOlvw5PhesjdcaMadU/pyPQOJ5dHreMjBxwnQKg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz",
+      "integrity": "sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/helper-api-error": "1.7.11",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.11",
-        "@webassemblyjs/ieee754": "1.7.11",
-        "@webassemblyjs/leb128": "1.7.11",
-        "@webassemblyjs/utf8": "1.7.11"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-api-error": "1.8.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
+        "@webassemblyjs/ieee754": "1.8.5",
+        "@webassemblyjs/leb128": "1.8.5",
+        "@webassemblyjs/utf8": "1.8.5"
       }
     },
     "@webassemblyjs/wast-parser": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.7.11.tgz",
-      "integrity": "sha512-lEyVCg2np15tS+dm7+JJTNhNWq9yTZvi3qEhAIIOaofcYlUp0UR5/tVqOwa/gXYr3gjwSZqw+/lS9dscyLelbQ==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz",
+      "integrity": "sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/floating-point-hex-parser": "1.7.11",
-        "@webassemblyjs/helper-api-error": "1.7.11",
-        "@webassemblyjs/helper-code-frame": "1.7.11",
-        "@webassemblyjs/helper-fsm": "1.7.11",
-        "@xtuc/long": "4.2.1"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/floating-point-hex-parser": "1.8.5",
+        "@webassemblyjs/helper-api-error": "1.8.5",
+        "@webassemblyjs/helper-code-frame": "1.8.5",
+        "@webassemblyjs/helper-fsm": "1.8.5",
+        "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.7.11",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.7.11.tgz",
-      "integrity": "sha512-m5vkAsuJ32QpkdkDOUPGSltrg8Cuk3KBx4YrmAGQwCZPRdUHXxG4phIOuuycLemHFr74sWL9Wthqss4fzdzSwg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz",
+      "integrity": "sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/wast-parser": "1.7.11",
-        "@xtuc/long": "4.2.1"
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/wast-parser": "1.8.5",
+        "@xtuc/long": "4.2.2"
       }
     },
     "@xtuc/ieee754": {
@@ -1545,9 +1620,9 @@
       "dev": true
     },
     "@xtuc/long": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.1.tgz",
-      "integrity": "sha512-FZdkNBDqBRHKQ2MEbSC17xnPFOhZxeJ2YGSfr2BKf3sujG49Qe3bB+rGCwQfIaA7WHnGeGkSijX4FuBCdrzW/g==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
     "absolute-path": {
@@ -1565,19 +1640,16 @@
       }
     },
     "acorn": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
+      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
       "dev": true
     },
     "acorn-dynamic-import": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz",
-      "integrity": "sha512-zVWV8Z8lislJoOKKqdNMOB+s6+XV5WERty8MnKBeFgwA+19XJjJHs2RP5dzM57FftIs+jQnRToLiWazKr6sSWg==",
-      "dev": true,
-      "requires": {
-        "acorn": "^5.0.0"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
+      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
+      "dev": true
     },
     "acorn-walk": {
       "version": "6.2.0",
@@ -1586,9 +1658,9 @@
       "dev": true
     },
     "address": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
-      "integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.1.0.tgz",
+      "integrity": "sha512-4diPfzWbLEIElVG4AnqP+00SULlPzNuyJFNnmMrLgyaxG6tZXJ1sn7mjBu4fHrJE+Yp/jgylOweJn2xsLMFggQ==",
       "dev": true
     },
     "ajv": {
@@ -2139,6 +2211,50 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
     "babel-extract-comments": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
@@ -2215,10 +2331,9 @@
       }
     },
     "babel-preset-expo": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-expo/-/babel-preset-expo-5.2.0.tgz",
-      "integrity": "sha512-yNHYwSFk7fvVCVJM3m3Vi/BVBNAeox1Iw1tHhCJGbLnpYkR94wst/I8IF9y+K01FhJ98epIK1S0Go3EmHJbbzA==",
-      "dev": true,
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-expo/-/babel-preset-expo-7.0.0.tgz",
+      "integrity": "sha512-lhQUlodOf1pJoDQ4X1SpLLiQQutvAJ3eB2xZtcqQFY0SAc7ifchtgWk/1T9SmI8lCOcllcPsFDyjbcPWav1FHQ==",
       "requires": {
         "@babel/core": "^7.1.0",
         "@babel/plugin-proposal-decorators": "^7.1.0",
@@ -2226,7 +2341,7 @@
         "@babel/preset-env": "^7.3.1",
         "babel-plugin-module-resolver": "^3.1.1",
         "babel-plugin-react-native-web": "^0.11.2",
-        "metro-react-native-babel-preset": "^0.51.1"
+        "metro-react-native-babel-preset": "^0.54.1"
       }
     },
     "babel-preset-fbjs": {
@@ -2384,9 +2499,9 @@
       }
     },
     "big-integer": {
-      "version": "1.6.45",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.45.tgz",
-      "integrity": "sha512-nmb9E7oEtVJ7SmSCH/DeJobXyuRmaofkpoQSimMFu3HKJ5MADtM825SPLhDuWhZ6TElLAQtgJbQmBZuHIRlZoA=="
+      "version": "1.6.46",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.46.tgz",
+      "integrity": "sha512-Vj2TNtZ8Y0XaL6HCkzJiEqfykjtv/9wVCWIutMe+QVIXLPe2tCLEzULtYvcX9WRtmNIj3Jqi5tNjIsR0N4QOsg=="
     },
     "big.js": {
       "version": "5.2.2",
@@ -2771,9 +2886,9 @@
           "dev": true
         },
         "yallist": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.0.tgz",
-          "integrity": "sha512-6gpP93MR+VOOehKbCPchro3wFZNSNmek8A2kbkOAZLIZAYx1KP/zAqwO0sOHi3xJEb+UBz8NaYt/17UNit1Q9w==",
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
           "dev": true
         }
       }
@@ -3203,9 +3318,9 @@
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
     },
     "commander": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.1.tgz",
+      "integrity": "sha512-cCuLsMhJeWQ/ZpsFTbE765kvVfoeSddc4nU3up4fV+fDBcfUXnbITJ+JzhkdjzOqhURjZgujxaioam4RM9yGUg=="
     },
     "common-tags": {
       "version": "1.8.0",
@@ -3334,8 +3449,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3398,46 +3512,23 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
     "copy-webpack-plugin": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.0.4.tgz",
-      "integrity": "sha512-YBuYGpSzoCHSSDGyHy6VJ7SHojKp6WHT4D7ItcQFNAYx2hrwkMe56e97xfVR0/ovDuMTrMffXUiltvQljtAGeg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.0.0.tgz",
+      "integrity": "sha512-iiDj+8nnZeW/i8vYJ3+ABSZkOefJnDYIGLojiZKKFDvf1wcEInABXH1+hN7axQMn04qvJxKjgVOee0e14XPtCg==",
       "dev": true,
       "requires": {
-        "cacache": "^11.3.3",
-        "find-cache-dir": "^2.1.0",
-        "glob-parent": "^3.1.0",
+        "cacache": "^11.3.1",
+        "find-cache-dir": "^2.0.0",
         "globby": "^7.1.1",
-        "is-glob": "^4.0.1",
-        "loader-utils": "^1.2.3",
+        "is-glob": "^4.0.0",
+        "loader-utils": "^1.1.0",
         "minimatch": "^3.0.4",
         "normalize-path": "^3.0.0",
-        "p-limit": "^2.2.0",
-        "schema-utils": "^1.0.0",
-        "serialize-javascript": "^1.7.0",
+        "p-limit": "^2.1.0",
+        "serialize-javascript": "^1.4.0",
         "webpack-log": "^2.0.0"
       },
       "dependencies": {
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-          "dev": true,
-          "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-              "dev": true,
-              "requires": {
-                "is-extglob": "^2.1.0"
-              }
-            }
-          }
-        },
         "is-extglob": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3812,6 +3903,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
+      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==",
+      "dev": true
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -3852,7 +3949,6 @@
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
       "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
       "dev": true,
-      "optional": true,
       "requires": {
         "mimic-response": "^2.0.0"
       }
@@ -3977,8 +4073,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
       "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "detect-port-alt": {
       "version": "1.1.6",
@@ -4146,9 +4241,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.267",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.267.tgz",
-      "integrity": "sha512-9Q2ixAJC+oHjWNtJV0MQ4vJMCWSowIrC6V6vcr+bwPddTDHj2ddv9xxXCzf4jT/fy6HP7maPoW0gifXkRxCttQ=="
+      "version": "1.3.270",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.270.tgz",
+      "integrity": "sha512-426qbfgLn0hVE4pDxok2dcAhA3u5lwXlBg2+i6VWQJvnMZNgevkC6s/qr91YH/avVMKXKwxnR5iBznpivg210A=="
     },
     "elliptic": {
       "version": "6.5.1",
@@ -4410,9 +4505,9 @@
       "optional": true
     },
     "expo": {
-      "version": "34.0.4",
-      "resolved": "https://registry.npmjs.org/expo/-/expo-34.0.4.tgz",
-      "integrity": "sha512-sZQQoZnN5ASrkSA4qSsk7HPBewHB6b3k9VPZvchT0FBZ1fP5vpmzfIbVOqOLRXHf2VdjNnQVme617TnpPlruJg==",
+      "version": "35.0.0",
+      "resolved": "https://registry.npmjs.org/expo/-/expo-35.0.0.tgz",
+      "integrity": "sha512-DnwcDiRds+y4C+XsfvFnyG8c/vJZWx9RYgcDn0yhu07LtQ2osxKnqSm5eko3uAU3jFYxGUxdlN1xs9p1u0MDXg==",
       "requires": {
         "@babel/runtime": "^7.1.2",
         "@expo/vector-icons": "^10.0.2",
@@ -4421,21 +4516,21 @@
         "@types/lodash.zipobject": "^4.1.4",
         "@types/qs": "^6.5.1",
         "@types/uuid-js": "^0.7.1",
-        "@unimodules/core": "~3.0.0",
-        "@unimodules/react-native-adapter": "~3.0.0",
-        "babel-preset-expo": "^6.0.0",
+        "@unimodules/core": "~4.0.0",
+        "@unimodules/react-native-adapter": "~4.0.0",
+        "babel-preset-expo": "~7.0.0",
         "cross-spawn": "^6.0.5",
-        "expo-app-loader-provider": "~6.0.0",
-        "expo-asset": "~6.0.0",
-        "expo-constants": "~6.0.0",
-        "expo-file-system": "~6.0.0",
-        "expo-font": "~6.0.1",
-        "expo-keep-awake": "~6.0.0",
-        "expo-linear-gradient": "~6.0.0",
-        "expo-location": "~6.0.0",
-        "expo-permissions": "~6.0.0",
-        "expo-sqlite": "~6.0.0",
-        "expo-web-browser": "~6.0.0",
+        "expo-app-loader-provider": "~7.0.0",
+        "expo-asset": "~7.0.0",
+        "expo-constants": "~7.0.0",
+        "expo-file-system": "~7.0.0",
+        "expo-font": "~7.0.0",
+        "expo-keep-awake": "~7.0.0",
+        "expo-linear-gradient": "~7.0.0",
+        "expo-location": "~7.0.0",
+        "expo-permissions": "~7.0.0",
+        "expo-sqlite": "~7.0.0",
+        "expo-web-browser": "~7.0.0",
         "fbemitter": "^2.1.1",
         "invariant": "^2.2.2",
         "lodash": "^4.6.0",
@@ -4447,44 +4542,28 @@
         "react-native-branch": "~3.0.1",
         "react-native-view-shot": "2.6.0",
         "serialize-error": "^2.1.0",
-        "unimodules-barcode-scanner-interface": "~3.0.0",
-        "unimodules-camera-interface": "~3.0.0",
-        "unimodules-constants-interface": "~3.0.0",
-        "unimodules-face-detector-interface": "~3.0.0",
-        "unimodules-file-system-interface": "~3.0.0",
-        "unimodules-font-interface": "~3.0.0",
-        "unimodules-image-loader-interface": "~3.0.0",
-        "unimodules-permissions-interface": "~3.0.0",
-        "unimodules-sensors-interface": "~3.0.0",
-        "unimodules-task-manager-interface": "~3.0.0",
+        "unimodules-barcode-scanner-interface": "~4.0.0",
+        "unimodules-camera-interface": "~4.0.0",
+        "unimodules-constants-interface": "~4.0.0",
+        "unimodules-face-detector-interface": "~4.0.0",
+        "unimodules-file-system-interface": "~4.0.0",
+        "unimodules-font-interface": "~4.0.0",
+        "unimodules-image-loader-interface": "~4.0.0",
+        "unimodules-permissions-interface": "~4.0.0",
+        "unimodules-sensors-interface": "~4.0.0",
+        "unimodules-task-manager-interface": "~4.0.0",
         "uuid-js": "^0.7.5"
-      },
-      "dependencies": {
-        "babel-preset-expo": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/babel-preset-expo/-/babel-preset-expo-6.0.0.tgz",
-          "integrity": "sha512-MvDy86afmCt4sFYkg7yXsZyGL0yONT5JQHZSK1r8cu26Zm1No0yQyll+w78e2OkkYwVFtC1u70GyBPdERG7BZg==",
-          "requires": {
-            "@babel/core": "^7.1.0",
-            "@babel/plugin-proposal-decorators": "^7.1.0",
-            "@babel/plugin-transform-modules-commonjs": "^7.4.4",
-            "@babel/preset-env": "^7.3.1",
-            "babel-plugin-module-resolver": "^3.1.1",
-            "babel-plugin-react-native-web": "^0.11.2",
-            "metro-react-native-babel-preset": "^0.51.1"
-          }
-        }
       }
     },
     "expo-app-loader-provider": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-app-loader-provider/-/expo-app-loader-provider-6.0.0.tgz",
-      "integrity": "sha512-GtpztJVxOz+vVwdLyHskpzVzFWMXZPIFC/zczHZPsTwjS+wXj6n8MVaLxX6GaTyhNEtYjp0VIQUw3b7eP+vO6w=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-app-loader-provider/-/expo-app-loader-provider-7.0.0.tgz",
+      "integrity": "sha512-C+5zpZN2T7PCj7weLs/ZgAC+y9dvu0VdTXD00Jf9Wo7Pxu/lsLh6ljg9JL91c+2tYDzMEODPNmT+JOUIxAr5zQ=="
     },
     "expo-asset": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-6.0.0.tgz",
-      "integrity": "sha512-M0sJphdCQ0mq+7kg6rQmq4rU5hbsL72AZCNrga565JchCLeevJhv6j72erh2viqDAPdvjZpGwc7pwI/dxu1+zg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-7.0.0.tgz",
+      "integrity": "sha512-MwWrlpzaZqT0NU0V3Wn8oA1pMb7Al49aYAWMPEUZ2UV5NyVAbzYPuS2duIfwX55ivczjJZHpwrhd0hb/3l9ngQ==",
       "requires": {
         "blueimp-md5": "^2.10.0",
         "path-browserify": "^1.0.0",
@@ -4492,66 +4571,66 @@
       }
     },
     "expo-constants": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-6.0.0.tgz",
-      "integrity": "sha512-O0yL3Ok0YUEWpAqsWjOdgFD/lMfg8PUGH/nq31CZ1s7cuFUlksD42i5YhIRlb0Pa/btK8X9LpfY3eWhx9eTmbg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-7.0.0.tgz",
+      "integrity": "sha512-oLINuMtGcAwfHGInSVhq6xGojp3atUpSIp7KImo9rqXhWwD5FNmqA5Jflo4J0ODPq590kN5ieiYCCqwls2/u0w==",
       "requires": {
         "ua-parser-js": "^0.7.19"
       }
     },
     "expo-file-system": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-6.0.2.tgz",
-      "integrity": "sha512-s+6oQpLhcT7MQp7fcoj1E+zttMr0WX6c0FrddzqB4dUfhIggV+nb35nQMASIiTHAj8VPUanTFliY5rETHRMHRA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-7.0.0.tgz",
+      "integrity": "sha512-ignf5Vf5cPDYO/4HgUkgnL574wMbCNxyazlOvBgV34rLGJzBbFsn++hqC7njr2VTpIIXh2G9vp1+8g6cvsQdqA==",
       "requires": {
         "uuid-js": "^0.7.5"
       }
     },
     "expo-font": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-6.0.1.tgz",
-      "integrity": "sha512-zQwGFTKSrsTWmFzS0l87i6TyqM0YFDK4ui4sSzpbdQsUHXpeG7wfa67i09roLS0xtp85nrR9Vm2bUJp9njV8JQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-7.0.0.tgz",
+      "integrity": "sha512-OVlUydfexjq1u57Xlymcx5egfFF2WZ5MXkg3GGjHyiSMfp09inZ7OzAu+O/TXjxjlaq9d6vBXiwVxqQoUIlx1Q==",
       "requires": {
         "fontfaceobserver": "^2.1.0"
       }
     },
     "expo-keep-awake": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-6.0.0.tgz",
-      "integrity": "sha512-MAtZknf6FtIC0ipkDS2FVa87al8YBsrpsQ2qMf+H/cI6FOd6aahaggN4x75xGnt5UzozgWfjhGNCi1XCr14rJw=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-7.0.0.tgz",
+      "integrity": "sha512-LjIudbftcZnoviujJUZEzLMdE3m9A2NOvxrRszYHUjySpNN1bAKKyx1gLJbg/yZIWcdEIQ+6uCYtLbuK74Wk2Q=="
     },
     "expo-linear-gradient": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-6.0.0.tgz",
-      "integrity": "sha512-TGHSK7MsoU1wZXx9uEivMggAR/KT4wTSE0xBfhB8qsziGXoHZdoT79/tZ3HyWtCG7+JVUEFXfUOBxtOlZOu5tg=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-7.0.0.tgz",
+      "integrity": "sha512-8VrFWR9tpXrDmk0kMyIpo6C5jKiDRzXPZN55JtyPhjuN1kF8Kle4d9ybNtV+bYd3Ql6PAZXY8Y/bhLAuWv0L9g=="
     },
     "expo-location": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-6.0.0.tgz",
-      "integrity": "sha512-5uSebmZos0DKJ/xpi+2e9myWVPUWk+fshFedi55wzlGqy2YpTG5MlDcCLlJlamgJ5Tm8+3ECdhbFX3g1pNRDVQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-7.0.0.tgz",
+      "integrity": "sha512-7iWg0j6+DXeO/bVLJEbGBmvebPSbIJNOewfHoyhvdo+13Q7L94SflcggT349WbqNsFJHVcAGC6Unr8VvXcUDbw==",
       "requires": {
         "invariant": "^2.2.4"
       }
     },
     "expo-permissions": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-permissions/-/expo-permissions-6.0.0.tgz",
-      "integrity": "sha512-O+RdyfGiq7i+5Vi9fE38DgKn436lNWiqhnS5/Z7CC00bmKahhjVMNDbZvNn/nrdRGyaPneJk1Co1s1sexSnv0A=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-permissions/-/expo-permissions-7.0.0.tgz",
+      "integrity": "sha512-C+qyVz+pdZO4YpVR2HSC3gsBZg0Qb8brCFgzmDmWcAtgrOiHClaLPdhI2XtQuGh8ubXcKPUGZp++UCEGiG0Jxg=="
     },
     "expo-sqlite": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-sqlite/-/expo-sqlite-6.0.0.tgz",
-      "integrity": "sha512-M8heovLeJoq7tb4f7PipDu0dqHSklbI2EqNvDM8XLjSZdSv6CqCMHg5Kvx0L9CLYTchjzktDPClZKjgvtGOVug==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/expo-sqlite/-/expo-sqlite-7.0.0.tgz",
+      "integrity": "sha512-mUA+YiE42sD7jI64kP+Zmhwzk13KoLVSFGJz5HeuAuIoO1EwVlAH4g+RQQye5/NsFM6clVRvKhIxv2L2XIVEcw==",
       "requires": {
         "@expo/websql": "^1.0.1",
         "@types/websql": "^0.0.27",
-        "lodash": "^4.17.11"
+        "lodash": "^4.17.15"
       }
     },
     "expo-web-browser": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-6.0.0.tgz",
-      "integrity": "sha512-7XkFPd4PRlVP6FscTnn78c0tY6+yLzb2Eai/ed+l+LB+hZWuhyY3ONzYM7/IKAiPmfhZr4Qs80vIa7iiavti8A=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-7.0.1.tgz",
+      "integrity": "sha512-THjqlMitUsjHUGYEfag2ybdhgZpp0C4ATixfNpWlS/8vTM4Sw/KGfwB0VuqtqLUMT2q2MTJSrlrWY8Boi4yvTg=="
     },
     "express": {
       "version": "4.17.1",
@@ -4606,12 +4685,6 @@
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
         },
-        "path-to-regexp": {
-          "version": "0.1.7",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-          "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-          "dev": true
-        },
         "qs": {
           "version": "6.7.0",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -5537,6 +5610,12 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "fn-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
+      "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=",
+      "dev": true
+    },
     "fontfaceobserver": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz",
@@ -5555,74 +5634,381 @@
         "for-in": "^1.0.1"
       }
     },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
-      "dev": true
-    },
-    "fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
-      "requires": {
-        "map-cache": "^0.2.2"
-      }
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-    },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true,
-      "optional": true
-    },
-    "fs-copy-file-sync": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/fs-copy-file-sync/-/fs-copy-file-sync-1.1.1.tgz",
-      "integrity": "sha512-2QY5eeqVv4m2PfyMiEuy9adxNP+ajf+8AR05cEi+OAzPcOj90hvFImeZhTmKLBgSd9EvG33jsD7ZRxsx9dThkQ==",
+    "fork-ts-checker-webpack-plugin": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz",
+      "integrity": "sha512-zEhg7Hz+KhZlBhILYpXy+Beu96gwvkROWJiTXOCyOOMMrdBIRPvsBpBqgTI4jfJGrJXcqGwJR8zsBGDmzY0jsA==",
       "dev": true,
-      "optional": true
-    },
-    "fs-extra": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
-      "integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=",
       "requires": {
-        "graceful-fs": "^4.1.2",
-        "jsonfile": "^2.1.0",
-        "klaw": "^1.0.0"
+        "babel-code-frame": "^6.22.0",
+        "chalk": "^2.4.1",
+        "chokidar": "^2.0.4",
+        "micromatch": "^3.1.10",
+        "minimatch": "^3.0.4",
+        "semver": "^5.6.0",
+        "tapable": "^1.0.0",
+        "worker-rpc": "^0.1.0"
       },
       "dependencies": {
-        "jsonfile": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        }
-      }
-    },
-    "fs-minipass": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
-      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
-      "dev": true,
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+          "dev": true
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "dev": true,
+          "requires": {
+            "debug": "^2.3.3",
+            "define-property": "^0.2.5",
+            "extend-shallow": "^2.0.1",
+            "posix-character-classes": "^0.1.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "^0.1.0"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "dev": true,
+              "requires": {
+                "kind-of": "^3.0.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "^1.1.5"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "dev": true,
+              "requires": {
+                "kind-of": "^3.0.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "^1.1.5"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "dev": true,
+              "requires": {
+                "is-accessor-descriptor": "^0.1.6",
+                "is-data-descriptor": "^0.1.4",
+                "kind-of": "^5.0.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+              "dev": true
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "dev": true,
+          "requires": {
+            "array-unique": "^0.3.2",
+            "define-property": "^1.0.0",
+            "expand-brackets": "^2.1.4",
+            "extend-shallow": "^2.0.1",
+            "fragment-cache": "^0.2.1",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "^1.0.0"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
+      "dev": true
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true,
+      "optional": true
+    },
+    "fs-copy-file-sync": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/fs-copy-file-sync/-/fs-copy-file-sync-1.1.1.tgz",
+      "integrity": "sha512-2QY5eeqVv4m2PfyMiEuy9adxNP+ajf+8AR05cEi+OAzPcOj90hvFImeZhTmKLBgSd9EvG33jsD7ZRxsx9dThkQ==",
+      "dev": true,
+      "optional": true
+    },
+    "fs-extra": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
+      "integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^2.1.0",
+        "klaw": "^1.0.0"
+      },
+      "dependencies": {
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        }
+      }
+    },
+    "fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "dev": true,
       "optional": true,
       "requires": {
         "minipass": "^2.6.0"
@@ -5657,22 +6043,25 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -5681,13 +6070,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5695,32 +6084,35 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "optional": true,
           "requires": {
             "ms": "^2.1.1"
@@ -5728,22 +6120,26 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -5751,12 +6147,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
             "aproba": "^1.0.3",
@@ -5771,7 +6169,8 @@
         },
         "glob": {
           "version": "7.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -5784,12 +6183,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
@@ -5797,7 +6198,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
             "minimatch": "^3.0.4"
@@ -5805,7 +6207,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
             "once": "^1.3.0",
@@ -5814,44 +6217,46 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "requires": {
             "number-is-nan": "^1.0.0"
           }
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "minipass": {
           "version": "2.3.5",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5859,7 +6264,8 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -5867,20 +6273,22 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "requires": {
             "minimist": "0.0.8"
           }
         },
         "ms": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "optional": true
         },
         "needle": {
           "version": "2.3.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
+          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
           "optional": true,
           "requires": {
             "debug": "^4.1.0",
@@ -5890,7 +6298,8 @@
         },
         "node-pre-gyp": {
           "version": "0.12.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
+          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
@@ -5907,7 +6316,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
             "abbrev": "1",
@@ -5916,12 +6326,14 @@
         },
         "npm-bundled": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
+          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
+          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
           "optional": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -5930,7 +6342,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
             "are-we-there-yet": "~1.1.2",
@@ -5941,35 +6354,39 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "requires": {
             "wrappy": "1"
           }
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
             "os-homedir": "^1.0.0",
@@ -5978,17 +6395,20 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "optional": true,
           "requires": {
             "deep-extend": "^0.6.0",
@@ -5999,14 +6419,16 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
           }
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
@@ -6020,7 +6442,8 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "optional": true,
           "requires": {
             "glob": "^7.1.3"
@@ -6028,38 +6451,43 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.7.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6068,7 +6496,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
@@ -6076,20 +6505,22 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
-          "optional": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "optional": true,
           "requires": {
             "chownr": "^1.1.1",
@@ -6103,12 +6534,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "optional": true,
           "requires": {
             "string-width": "^1.0.2 || 2"
@@ -6116,13 +6549,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
         }
       }
     },
@@ -6167,6 +6600,12 @@
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
     },
+    "getenv": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/getenv/-/getenv-0.7.0.tgz",
+      "integrity": "sha1-ObkYOHB+IIb9HPbvh3fRyT4UZJ4=",
+      "dev": true
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -6291,28 +6730,23 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
     "gzip-size": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
-      "integrity": "sha512-5iI7omclyqrnWw4XbXAmGhPsABkSIDQonv2K0h61lybgofWa6iZyvrI3r2zsJH4P8Nb64fFVzlvfhs0g7BBxAA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
+      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
       "dev": true,
       "requires": {
         "duplexer": "^0.1.1",
-        "pify": "^3.0.0"
+        "pify": "^4.0.1"
       },
       "dependencies": {
         "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
           "dev": true
         }
       }
     },
-    "hammerjs": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
-      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
-    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -6438,6 +6872,19 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6550,18 +6997,50 @@
       }
     },
     "html-webpack-plugin": {
-      "version": "4.0.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-alpha.2.tgz",
-      "integrity": "sha512-tyvhjVpuGqD7QYHi1l1drMQTg5i+qRxpQEGbdnYFREgOKy7aFDf/ocQ/V1fuEDlQx7jV2zMap3Hj2nE9i5eGXw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
+      "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
       "dev": true,
       "requires": {
-        "@types/tapable": "1.0.2",
         "html-minifier": "^3.2.3",
-        "loader-utils": "^1.1.0",
-        "lodash": "^4.17.10",
+        "loader-utils": "^0.2.16",
+        "lodash": "^4.17.3",
         "pretty-error": "^2.0.2",
         "tapable": "^1.0.0",
+        "toposort": "^1.0.0",
         "util.promisify": "1.0.0"
+      },
+      "dependencies": {
+        "big.js": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
+          "requires": {
+            "big.js": "^3.1.3",
+            "emojis-list": "^2.0.0",
+            "json5": "^0.5.0",
+            "object-assign": "^4.0.1"
+          }
+        },
+        "toposort": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
+          "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
+          "dev": true
+        }
       }
     },
     "htmlparser2": {
@@ -7059,9 +7538,9 @@
       "dev": true
     },
     "is-root": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.0.0.tgz",
-      "integrity": "sha512-F/pJIk8QD6OX5DNhRB7hWamLsUilmkDGho48KbgZ6xg/lmAZXHxzXQ91jzB3yRSw5kdQGGGc4yz8HYhTYIMWPg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
       "dev": true
     },
     "is-stream": {
@@ -7442,6 +7921,12 @@
         "tmpl": "1.0.x"
       }
     },
+    "mamacro": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
+      "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==",
+      "dev": true
+    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -7636,6 +8121,56 @@
             "ua-parser-js": "^0.7.18"
           }
         },
+        "metro-babel7-plugin-react-transform": {
+          "version": "0.51.1",
+          "resolved": "https://registry.npmjs.org/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.51.1.tgz",
+          "integrity": "sha512-wzn4X9KgmAMZ7Bi6v9KxA7dw+AHGL0RODPxU5NDJ3A6d0yERvzfZ3qkzWhz8jbFkVBK12cu5DTho3HBazKQDOw==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.0.0"
+          }
+        },
+        "metro-react-native-babel-preset": {
+          "version": "0.51.1",
+          "resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.51.1.tgz",
+          "integrity": "sha512-e9tsYDFhU70gar0jQWcZXRPJVCv4k7tEs6Pm74wXO2OO/T1MEumbvniDIGwGG8bG8RUnYdHhjcaiub2Vc5BRWw==",
+          "requires": {
+            "@babel/plugin-proposal-class-properties": "^7.0.0",
+            "@babel/plugin-proposal-export-default-from": "^7.0.0",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+            "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+            "@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
+            "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+            "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+            "@babel/plugin-syntax-export-default-from": "^7.0.0",
+            "@babel/plugin-transform-arrow-functions": "^7.0.0",
+            "@babel/plugin-transform-block-scoping": "^7.0.0",
+            "@babel/plugin-transform-classes": "^7.0.0",
+            "@babel/plugin-transform-computed-properties": "^7.0.0",
+            "@babel/plugin-transform-destructuring": "^7.0.0",
+            "@babel/plugin-transform-exponentiation-operator": "^7.0.0",
+            "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+            "@babel/plugin-transform-for-of": "^7.0.0",
+            "@babel/plugin-transform-function-name": "^7.0.0",
+            "@babel/plugin-transform-literals": "^7.0.0",
+            "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+            "@babel/plugin-transform-object-assign": "^7.0.0",
+            "@babel/plugin-transform-parameters": "^7.0.0",
+            "@babel/plugin-transform-react-display-name": "^7.0.0",
+            "@babel/plugin-transform-react-jsx": "^7.0.0",
+            "@babel/plugin-transform-react-jsx-source": "^7.0.0",
+            "@babel/plugin-transform-regenerator": "^7.0.0",
+            "@babel/plugin-transform-runtime": "^7.0.0",
+            "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+            "@babel/plugin-transform-spread": "^7.0.0",
+            "@babel/plugin-transform-sticky-regex": "^7.0.0",
+            "@babel/plugin-transform-template-literals": "^7.0.0",
+            "@babel/plugin-transform-typescript": "^7.0.0",
+            "@babel/plugin-transform-unicode-regex": "^7.0.0",
+            "@babel/template": "^7.0.0",
+            "metro-babel7-plugin-react-transform": "0.51.1",
+            "react-transform-hmr": "^1.0.4"
+          }
+        },
         "mime-db": {
           "version": "1.23.0",
           "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.23.0.tgz",
@@ -7696,9 +8231,9 @@
       }
     },
     "metro-babel7-plugin-react-transform": {
-      "version": "0.51.1",
-      "resolved": "https://registry.npmjs.org/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.51.1.tgz",
-      "integrity": "sha512-wzn4X9KgmAMZ7Bi6v9KxA7dw+AHGL0RODPxU5NDJ3A6d0yERvzfZ3qkzWhz8jbFkVBK12cu5DTho3HBazKQDOw==",
+      "version": "0.54.1",
+      "resolved": "https://registry.npmjs.org/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.54.1.tgz",
+      "integrity": "sha512-jWm5myuMoZAOhoPsa8ItfDxdTcOzKhTTzzhFlbZnRamE7i9qybeMdrZt8KHQpF7i2p/mKzE9Yhf4ouOz5K/jHg==",
       "requires": {
         "@babel/helper-module-imports": "^7.0.0"
       }
@@ -7774,9 +8309,9 @@
       }
     },
     "metro-react-native-babel-preset": {
-      "version": "0.51.1",
-      "resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.51.1.tgz",
-      "integrity": "sha512-e9tsYDFhU70gar0jQWcZXRPJVCv4k7tEs6Pm74wXO2OO/T1MEumbvniDIGwGG8bG8RUnYdHhjcaiub2Vc5BRWw==",
+      "version": "0.54.1",
+      "resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.54.1.tgz",
+      "integrity": "sha512-Hfr32+u5yYl3qhYQJU8NQ26g4kQlc3yFMg7keVR/3H8rwBIbFqXgsKt8oe0dOrv7WvrMqBHhDtVdU9ls3sSq8g==",
       "requires": {
         "@babel/plugin-proposal-class-properties": "^7.0.0",
         "@babel/plugin-proposal-export-default-from": "^7.0.0",
@@ -7786,6 +8321,7 @@
         "@babel/plugin-proposal-optional-chaining": "^7.0.0",
         "@babel/plugin-syntax-dynamic-import": "^7.0.0",
         "@babel/plugin-syntax-export-default-from": "^7.0.0",
+        "@babel/plugin-syntax-flow": "^7.2.0",
         "@babel/plugin-transform-arrow-functions": "^7.0.0",
         "@babel/plugin-transform-block-scoping": "^7.0.0",
         "@babel/plugin-transform-classes": "^7.0.0",
@@ -7811,7 +8347,7 @@
         "@babel/plugin-transform-typescript": "^7.0.0",
         "@babel/plugin-transform-unicode-regex": "^7.0.0",
         "@babel/template": "^7.0.0",
-        "metro-babel7-plugin-react-transform": "0.51.1",
+        "metro-babel7-plugin-react-transform": "0.54.1",
         "react-transform-hmr": "^1.0.4"
       }
     },
@@ -7902,6 +8438,12 @@
         "source-map": "^0.5.6"
       }
     },
+    "microevent.ts": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
+      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
+      "dev": true
+    },
     "micromatch": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
@@ -7959,8 +8501,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.0.0.tgz",
       "integrity": "sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "min-document": {
       "version": "2.19.0",
@@ -8007,53 +8548,31 @@
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
     },
     "minipass": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.8.6.tgz",
-      "integrity": "sha512-lFG7d6g3+/UaFDCOtqPiKAC9zngWWsQZl1g5q6gaONqrjq61SX2xFqXMleQiFVyDpYwa018E9hmlAFY22PCb+A==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "safe-buffer": "^5.1.2",
         "yallist": "^3.0.0"
       },
       "dependencies": {
         "yallist": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.0.tgz",
-          "integrity": "sha512-6gpP93MR+VOOehKbCPchro3wFZNSNmek8A2kbkOAZLIZAYx1KP/zAqwO0sOHi3xJEb+UBz8NaYt/17UNit1Q9w==",
-          "dev": true,
-          "optional": true
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
         }
       }
     },
     "minizlib": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.2.tgz",
-      "integrity": "sha512-lsNFqSHdJ21EwKzCp12HHJGxSMtHkCW1EMA9cceG3MkMNARjuWotZnMe3NKNshAvFXpm4loZqmYsCmRwhS2JMw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
       "dev": true,
       "optional": true,
       "requires": {
         "minipass": "^2.9.0"
-      },
-      "dependencies": {
-        "minipass": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
-          "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
-        },
-        "yallist": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.0.tgz",
-          "integrity": "sha512-6gpP93MR+VOOehKbCPchro3wFZNSNmek8A2kbkOAZLIZAYx1KP/zAqwO0sOHi3xJEb+UBz8NaYt/17UNit1Q9w==",
-          "dev": true,
-          "optional": true
-        }
       }
     },
     "mississippi": {
@@ -8349,9 +8868,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.32",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.32.tgz",
-      "integrity": "sha512-VhVknkitq8dqtWoluagsGPn3dxTvN9fwgR59fV3D7sLBHe0JfDramsMI8n8mY//ccq/Kkrf8ZRHRpsyVZ3qw1A==",
+      "version": "1.1.33",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.33.tgz",
+      "integrity": "sha512-I0V30bWQEoHb+10W8oedVoUrdjW5wIkYm0w7vvcrPO95pZY738m1k77GF5sO0vKg5eXYg9oGtrMAETbgZGm11A==",
       "requires": {
         "semver": "^5.3.0"
       }
@@ -8584,6 +9103,15 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "open": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+      "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+      "dev": true,
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
     "opener": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
@@ -8841,20 +9369,11 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
     },
-    "path-to-regexp": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
-      "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
-      "requires": {
-        "isarray": "0.0.1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        }
-      }
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+      "dev": true
     },
     "path-type": {
       "version": "2.0.0",
@@ -9540,6 +10059,12 @@
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
+    "prettier": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
+      "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
@@ -9655,6 +10180,12 @@
         "react-is": "^16.8.1"
       }
     },
+    "property-expr": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-1.5.1.tgz",
+      "integrity": "sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==",
+      "dev": true
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -9886,46 +10417,38 @@
       "integrity": "sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA=="
     },
     "react-dev-utils": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-7.0.5.tgz",
-      "integrity": "sha512-zJnqqb0x6gd63E3xoz5pXAxBPNaW75Hyz7GgQp0qPhMroBCRQtRvG67AoTZZY1z4yCYVJQZAfQJFdnea0Ujbug==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.3.tgz",
+      "integrity": "sha512-OyInhcwsvycQ3Zr2pQN+HV4gtRXrky5mJXIy4HnqrWa+mI624xfYfqGuC9dYbxp4Qq3YZzP8GSGQjv0AgNU15w==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "7.0.0",
-        "address": "1.0.3",
-        "browserslist": "4.4.1",
+        "@babel/code-frame": "7.5.5",
+        "address": "1.1.0",
+        "browserslist": "4.6.6",
         "chalk": "2.4.2",
         "cross-spawn": "6.0.5",
         "detect-port-alt": "1.1.6",
         "escape-string-regexp": "1.0.5",
         "filesize": "3.6.1",
         "find-up": "3.0.0",
+        "fork-ts-checker-webpack-plugin": "1.5.0",
         "global-modules": "2.0.0",
         "globby": "8.0.2",
-        "gzip-size": "5.0.0",
+        "gzip-size": "5.1.1",
         "immer": "1.10.0",
-        "inquirer": "6.2.1",
-        "is-root": "2.0.0",
+        "inquirer": "6.5.0",
+        "is-root": "2.1.0",
         "loader-utils": "1.2.3",
-        "opn": "5.4.0",
+        "open": "^6.3.0",
         "pkg-up": "2.0.0",
-        "react-error-overlay": "^5.1.4",
+        "react-error-overlay": "^6.0.1",
         "recursive-readdir": "2.2.2",
         "shell-quote": "1.6.1",
         "sockjs-client": "1.3.0",
-        "strip-ansi": "5.0.0",
+        "strip-ansi": "5.2.0",
         "text-table": "0.2.0"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
-          "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.0.0"
-          }
-        },
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
@@ -9933,14 +10456,14 @@
           "dev": true
         },
         "browserslist": {
-          "version": "4.4.1",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.4.1.tgz",
-          "integrity": "sha512-pEBxEXg7JwaakBXjATYw/D1YZh4QUSCX/Mnd/wnqSRPPSi1U39iDhDoKGoBUcraKdxDlrYqJxSI5nNvD+dWP2A==",
+          "version": "4.6.6",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.6.tgz",
+          "integrity": "sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30000929",
-            "electron-to-chromium": "^1.3.103",
-            "node-releases": "^1.1.3"
+            "caniuse-lite": "^1.0.30000984",
+            "electron-to-chromium": "^1.3.191",
+            "node-releases": "^1.1.25"
           }
         },
         "chardet": {
@@ -9995,23 +10518,23 @@
           }
         },
         "inquirer": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.1.tgz",
-          "integrity": "sha512-088kl3DRT2dLU5riVMKKr1DlImd6X7smDhpXUCkJDCKvTEJeRiXh0G132HG9u5a+6Ylw9plFRY7RuTnwohYSpg==",
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.0.tgz",
+          "integrity": "sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==",
           "dev": true,
           "requires": {
-            "ansi-escapes": "^3.0.0",
-            "chalk": "^2.0.0",
+            "ansi-escapes": "^3.2.0",
+            "chalk": "^2.4.2",
             "cli-cursor": "^2.1.0",
             "cli-width": "^2.0.0",
-            "external-editor": "^3.0.0",
+            "external-editor": "^3.0.3",
             "figures": "^2.0.0",
-            "lodash": "^4.17.10",
+            "lodash": "^4.17.12",
             "mute-stream": "0.0.7",
             "run-async": "^2.2.0",
-            "rxjs": "^6.1.0",
+            "rxjs": "^6.4.0",
             "string-width": "^2.1.0",
-            "strip-ansi": "^5.0.0",
+            "strip-ansi": "^5.1.0",
             "through": "^2.3.6"
           }
         },
@@ -10025,15 +10548,6 @@
             "path-exists": "^3.0.0"
           }
         },
-        "opn": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/opn/-/opn-5.4.0.tgz",
-          "integrity": "sha512-YF9MNdVy/0qvJvDtunAOzFw9iasOQHpVthTCvGzxt61Il64AYSGdK+rYwld7NAfk9qJ7dt+hymBNSc9LNYS+Sw==",
-          "dev": true,
-          "requires": {
-            "is-wsl": "^1.1.0"
-          }
-        },
         "p-limit": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
@@ -10080,12 +10594,12 @@
           "dev": true
         },
         "strip-ansi": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.0.0.tgz",
-          "integrity": "sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^4.0.0"
+            "ansi-regex": "^4.1.0"
           }
         }
       }
@@ -10117,41 +10631,31 @@
       }
     },
     "react-dom": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
-      "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
+      "version": "16.8.3",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.3.tgz",
+      "integrity": "sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.15.0"
-      },
-      "dependencies": {
-        "scheduler": {
-          "version": "0.15.0",
-          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
-          "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1"
-          }
-        }
+        "scheduler": "^0.13.3"
       }
     },
     "react-error-overlay": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
-      "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.2.tgz",
+      "integrity": "sha512-DHRuRk3K4Lg9obI6J4Y+nKvtwjasYRU9CFL3ud42x9YJG1HbQjSNublapC/WBJOA726gNUbqbj0U2df9+uzspQ==",
       "dev": true
     },
     "react-is": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
-      "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
+      "version": "16.10.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.1.tgz",
+      "integrity": "sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw=="
     },
     "react-native": {
-      "version": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-      "integrity": "sha512-/qr69tLChymCyNpTvBiHpepa1ufF43cCMtUzpaQxmCwG6Kz5Z9XqyoEP1lJaJ/BNFj/Bp9+l+LIHwvrDoPBnfQ==",
+      "version": "0.59.10",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.59.10.tgz",
+      "integrity": "sha512-guB9YW+pBqS1dnfZ4ntzjINopiCUAbdmshU2wMWD1W32fRczLAopi/7Q2iHKP8LTCdxuYZV3fa9Mew5PSuANAw==",
       "requires": {
         "@babel/runtime": "^7.0.0",
         "@react-native-community/cli": "^1.2.1",
@@ -10199,7 +10703,7 @@
         "semver": "^5.0.3",
         "serve-static": "^1.13.1",
         "shell-quote": "1.6.1",
-        "stacktrace-parser": "0.1.4",
+        "stacktrace-parser": "^0.1.3",
         "ws": "^1.1.5",
         "xmldoc": "^0.4.0",
         "yargs": "^9.0.0"
@@ -10270,20 +10774,19 @@
       "integrity": "sha512-vbcYxPZlpF5f39GAEUF8kuGQqCNeD3E6zEdvtOq8oCGZunHXlWlKgAS6dgBKCvsHvXgHuMtpvs39VgOp8DaKig=="
     },
     "react-native-gesture-handler": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.4.1.tgz",
-      "integrity": "sha512-Ffcs+SbEbkGaal0CClYL+v7A9y4OA5G5lW01qrzjxaqASp5C8BfnWSKuqYKE00s6bLwE5L4xnlHkG0yIxAtbrQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
+      "integrity": "sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==",
       "requires": {
-        "hammerjs": "^2.0.8",
         "hoist-non-react-statics": "^2.3.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.7.2"
+        "invariant": "^2.2.2",
+        "prop-types": "^15.5.10"
       }
     },
     "react-native-reanimated": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.3.0.tgz",
-      "integrity": "sha512-KFno6D0q09kx71IDuPa4qeC1t1msALsCMuli3/EN3YDf8XoM2CG53yzhVHMFtmcW0IUCySugHgxQiuT5BzwOPA=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.2.0.tgz",
+      "integrity": "sha512-vkWRHrPK5qfHP/ZawlRoo38oeYe9NZaaOH/lmFxRcsKzaSK6x3H5ZPXI8lK6MfTLveqwo1QhJje3zIKXO4nQQw=="
     },
     "react-native-safe-area-view": {
       "version": "0.14.8",
@@ -10309,6 +10812,137 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-native-unimodules": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/react-native-unimodules/-/react-native-unimodules-0.5.4.tgz",
+      "integrity": "sha512-47ZJzZriaVtvDJp24HLu6xcKBaDScDcx71yIDmahsKKJtbEHmXl7jPz1y/2FhAKSb174m9niu3F97Di5Bo+91g==",
+      "requires": {
+        "@unimodules/core": "~3.0.2",
+        "@unimodules/react-native-adapter": "~3.0.0",
+        "chalk": "^2.4.2",
+        "expo-app-loader-provider": "~6.0.0",
+        "expo-asset": "~6.0.0",
+        "expo-constants": "~6.0.0",
+        "expo-file-system": "~6.0.1",
+        "expo-permissions": "~6.0.0",
+        "unimodules-barcode-scanner-interface": "~3.0.0",
+        "unimodules-camera-interface": "~3.0.0",
+        "unimodules-constants-interface": "~3.0.0",
+        "unimodules-face-detector-interface": "~3.0.0",
+        "unimodules-file-system-interface": "~3.0.0",
+        "unimodules-font-interface": "~3.0.0",
+        "unimodules-image-loader-interface": "~3.0.0",
+        "unimodules-permissions-interface": "~3.0.0",
+        "unimodules-sensors-interface": "~3.0.0",
+        "unimodules-task-manager-interface": "~3.0.0"
+      },
+      "dependencies": {
+        "@unimodules/core": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/@unimodules/core/-/core-3.0.2.tgz",
+          "integrity": "sha512-EMZjVp+yrtoPKpDBPvj4+hyDWALl7gvpWeUsDz2Nb9MMBPLnhag1uNk3KC98StJdnjbSXKSdKrCMMidOXnyKcg==",
+          "requires": {
+            "compare-versions": "^3.4.0"
+          }
+        },
+        "@unimodules/react-native-adapter": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@unimodules/react-native-adapter/-/react-native-adapter-3.0.0.tgz",
+          "integrity": "sha512-zkFFE0HQ2Flfx/aY3hBKDgMvQ1meUm3H6vMIacY1KywexCuKW8ivBobkOsHIet4jf7km0Eklt6WtB3LqQVw5yw==",
+          "requires": {
+            "invariant": "^2.2.4",
+            "lodash": "^4.5.0",
+            "prop-types": "^15.6.1"
+          }
+        },
+        "expo-app-loader-provider": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/expo-app-loader-provider/-/expo-app-loader-provider-6.0.0.tgz",
+          "integrity": "sha512-GtpztJVxOz+vVwdLyHskpzVzFWMXZPIFC/zczHZPsTwjS+wXj6n8MVaLxX6GaTyhNEtYjp0VIQUw3b7eP+vO6w=="
+        },
+        "expo-asset": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-6.0.0.tgz",
+          "integrity": "sha512-M0sJphdCQ0mq+7kg6rQmq4rU5hbsL72AZCNrga565JchCLeevJhv6j72erh2viqDAPdvjZpGwc7pwI/dxu1+zg==",
+          "requires": {
+            "blueimp-md5": "^2.10.0",
+            "path-browserify": "^1.0.0",
+            "url-parse": "^1.4.4"
+          }
+        },
+        "expo-constants": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-6.0.0.tgz",
+          "integrity": "sha512-O0yL3Ok0YUEWpAqsWjOdgFD/lMfg8PUGH/nq31CZ1s7cuFUlksD42i5YhIRlb0Pa/btK8X9LpfY3eWhx9eTmbg==",
+          "requires": {
+            "ua-parser-js": "^0.7.19"
+          }
+        },
+        "expo-file-system": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-6.0.2.tgz",
+          "integrity": "sha512-s+6oQpLhcT7MQp7fcoj1E+zttMr0WX6c0FrddzqB4dUfhIggV+nb35nQMASIiTHAj8VPUanTFliY5rETHRMHRA==",
+          "requires": {
+            "uuid-js": "^0.7.5"
+          }
+        },
+        "expo-permissions": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/expo-permissions/-/expo-permissions-6.0.0.tgz",
+          "integrity": "sha512-O+RdyfGiq7i+5Vi9fE38DgKn436lNWiqhnS5/Z7CC00bmKahhjVMNDbZvNn/nrdRGyaPneJk1Co1s1sexSnv0A=="
+        },
+        "unimodules-barcode-scanner-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-barcode-scanner-interface/-/unimodules-barcode-scanner-interface-3.0.0.tgz",
+          "integrity": "sha512-EtJBfKU5VgZbyIfIZwyWfUo59pIgW6s7YGzlpj9jk4UWKyqqhYT/FoaZqudCJcPcfh2eYxkc9VxBGieRBpQrzg=="
+        },
+        "unimodules-camera-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-camera-interface/-/unimodules-camera-interface-3.0.0.tgz",
+          "integrity": "sha512-STjf1FAdYlN27ilJSR4kIUYyHTPrkQSR/mEg4S4pZX6tazmcuG2KzLCXCoV+xMWsrwmsMBjgLzw6yzg87N5Ydw=="
+        },
+        "unimodules-constants-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-constants-interface/-/unimodules-constants-interface-3.0.0.tgz",
+          "integrity": "sha512-S4ap11UJH7D+Y4fXC7DyMNAkqIWD8B7rNCTS30wAF9beHXMZa1Od66rkJgSHqFRURy06h+Jr7qfJm9H5mtMz8Q=="
+        },
+        "unimodules-face-detector-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-face-detector-interface/-/unimodules-face-detector-interface-3.0.0.tgz",
+          "integrity": "sha512-fMQ3ZnhdOjbQ5ZXW62s/t1bbqBaenxzVIcgVEcwvLIFek0mx/EMHFkySgFkFjU11icUvaPEXW1yJtkK4QEpLhg=="
+        },
+        "unimodules-file-system-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-file-system-interface/-/unimodules-file-system-interface-3.0.0.tgz",
+          "integrity": "sha512-LkLIKRE3CwsXLRFw8vx0++Cfjj+pAvvidVb7yhGWKFmNlVaWUW9Z8jkhFLBFXDsGFAOU69bUTrz25jmB2MRt0Q=="
+        },
+        "unimodules-font-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-font-interface/-/unimodules-font-interface-3.0.0.tgz",
+          "integrity": "sha512-DOQI0uTn7CGvA9lNUuiTWfQYuKQEM8LZKn6gNS8G+HVHVb+TZl/37qdhuoMBi5jkAZ4VOD/GpgnPv8qr0pJi1Q=="
+        },
+        "unimodules-image-loader-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-image-loader-interface/-/unimodules-image-loader-interface-3.0.0.tgz",
+          "integrity": "sha512-hC/VWdT33GkOZ4FLaqPoKGNKxhw+miFhM+7Re57snWIWYewSv0lRvCqqwc/hbGLocvd2qF3YYrBx9woqPI8NzA=="
+        },
+        "unimodules-permissions-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-permissions-interface/-/unimodules-permissions-interface-3.0.0.tgz",
+          "integrity": "sha512-rfyGDBMtO8IOlk9hJN44EKz7vk6nt/PXByAumsptRdgsd+knokMlaWGYatrxKW2g/08WUbEkgKspvMxjJ0M1Tg=="
+        },
+        "unimodules-sensors-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-sensors-interface/-/unimodules-sensors-interface-3.0.0.tgz",
+          "integrity": "sha512-1JJT/lqCfxHqUSJc3o6b0WUply/lFOJjcuzN0QcAfmdAW8d+lEXA7BJ7DV/Nn/OKpMlHriEyxkM+FoGoXKJJcg=="
+        },
+        "unimodules-task-manager-interface": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unimodules-task-manager-interface/-/unimodules-task-manager-interface-3.0.0.tgz",
+          "integrity": "sha512-og4UiUOxc7PqT8uQQqXY+pOBvdS204xmgyUG2AjM2L3kVsw/6WH4pIW084WG8/e9M5SLsSXdrjecIUBQ/zLf8w=="
+        }
+      }
+    },
     "react-native-view-shot": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz",
@@ -10921,6 +11555,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -11743,15 +12382,13 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.0.tgz",
       "integrity": "sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "simple-get": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz",
       "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "decompress-response": "^4.2.0",
         "once": "^1.3.1",
@@ -12049,9 +12686,12 @@
       "dev": true
     },
     "stacktrace-parser": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.4.tgz",
-      "integrity": "sha1-ATl5IuX2Ls8whFUiyVxP4dJefU4="
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.7.tgz",
+      "integrity": "sha512-Evm+NuZ2ZTwGazsbsZC+EV1EGsvyxgIvtNwbyFfeXaq/8L78M5Kdh0qpmQaTkUpbOAKbbPP7c7qZa7u8XFsrUA==",
+      "requires": {
+        "type-fest": "^0.7.1"
+      }
     },
     "static-extend": {
       "version": "0.1.2",
@@ -12319,6 +12959,12 @@
         }
       }
     },
+    "synchronous-promise": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.10.tgz",
+      "integrity": "sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A==",
+      "dev": true
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -12342,9 +12988,9 @@
       },
       "dependencies": {
         "yallist": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.0.tgz",
-          "integrity": "sha512-6gpP93MR+VOOehKbCPchro3wFZNSNmek8A2kbkOAZLIZAYx1KP/zAqwO0sOHi3xJEb+UBz8NaYt/17UNit1Q9w==",
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
           "dev": true,
           "optional": true
         }
@@ -12422,12 +13068,20 @@
         "temp-dir": "^1.0.0",
         "type-fest": "^0.3.1",
         "unique-string": "^1.0.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "dev": true
+        }
       }
     },
     "terser": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.3.3.tgz",
-      "integrity": "sha512-Nzr7dpRjSzMEUS+z2UYQBtzE0LDm5k0Yy8RgLRPy85QUo1TjU5lIOBwzS5/FVAMaVyHZ3WTTU2BuQcMn8KXnNQ==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.3.4.tgz",
+      "integrity": "sha512-Kcrn3RiW8NtHBP0ssOAzwa2MsIRQ8lJWiBG/K7JgqPlomA3mtb2DEmp4/hrUA+Jujx+WZ02zqd7GYD+QRBB/2Q==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -12505,9 +13159,9 @@
           "dev": true
         },
         "yallist": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.0.tgz",
-          "integrity": "sha512-6gpP93MR+VOOehKbCPchro3wFZNSNmek8A2kbkOAZLIZAYx1KP/zAqwO0sOHi3xJEb+UBz8NaYt/17UNit1Q9w==",
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
           "dev": true
         }
       }
@@ -12557,11 +13211,21 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-invariant": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
+      "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
+    },
     "tiny-queue": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
       "integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12638,6 +13302,12 @@
         "hoek": "4.x.x"
       }
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=",
+      "dev": true
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -12667,16 +13337,14 @@
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
-      "optional": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
     },
     "type-fest": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-      "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
-      "dev": true
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
+      "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
     },
     "type-is": {
       "version": "1.6.18",
@@ -12693,6 +13361,12 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typescript": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz",
+      "integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==",
+      "dev": true
+    },
     "ua-parser-js": {
       "version": "0.7.20",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
@@ -12719,139 +13393,6 @@
         }
       }
     },
-    "uglifyjs-webpack-plugin": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz",
-      "integrity": "sha512-ovHIch0AMlxjD/97j9AYovZxG5wnHOPkL7T1GKochBADp/Zwc44pEWNqpKl1Loupp1WhFg7SlYmHZRUfdAacgw==",
-      "dev": true,
-      "requires": {
-        "cacache": "^10.0.4",
-        "find-cache-dir": "^1.0.0",
-        "schema-utils": "^0.4.5",
-        "serialize-javascript": "^1.4.0",
-        "source-map": "^0.6.1",
-        "uglify-es": "^3.3.4",
-        "webpack-sources": "^1.1.0",
-        "worker-farm": "^1.5.2"
-      },
-      "dependencies": {
-        "cacache": {
-          "version": "10.0.4",
-          "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
-          "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
-          "dev": true,
-          "requires": {
-            "bluebird": "^3.5.1",
-            "chownr": "^1.0.1",
-            "glob": "^7.1.2",
-            "graceful-fs": "^4.1.11",
-            "lru-cache": "^4.1.1",
-            "mississippi": "^2.0.0",
-            "mkdirp": "^0.5.1",
-            "move-concurrently": "^1.0.1",
-            "promise-inflight": "^1.0.1",
-            "rimraf": "^2.6.2",
-            "ssri": "^5.2.4",
-            "unique-filename": "^1.1.0",
-            "y18n": "^4.0.0"
-          }
-        },
-        "find-cache-dir": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz",
-          "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^1.0.0",
-            "pkg-dir": "^2.0.0"
-          }
-        },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        },
-        "mississippi": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz",
-          "integrity": "sha512-zHo8v+otD1J10j/tC+VNoGK9keCuByhKovAvdn74dmxJl9+mWHnx6EMsDN4lgRoMI/eYo2nchAxniIbUPb5onw==",
-          "dev": true,
-          "requires": {
-            "concat-stream": "^1.5.0",
-            "duplexify": "^3.4.2",
-            "end-of-stream": "^1.1.0",
-            "flush-write-stream": "^1.0.0",
-            "from2": "^2.1.0",
-            "parallel-transform": "^1.1.0",
-            "pump": "^2.0.1",
-            "pumpify": "^1.3.3",
-            "stream-each": "^1.1.0",
-            "through2": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
-        },
-        "pkg-dir": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
-          "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
-          "dev": true,
-          "requires": {
-            "find-up": "^2.1.0"
-          }
-        },
-        "pump": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
-          "dev": true,
-          "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
-          }
-        },
-        "schema-utils": {
-          "version": "0.4.7",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
-          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "ssri": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
-          "integrity": "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "^5.1.1"
-          }
-        },
-        "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-          "dev": true
-        }
-      }
-    },
     "ultron": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
@@ -12882,54 +13423,54 @@
       "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw=="
     },
     "unimodules-barcode-scanner-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-barcode-scanner-interface/-/unimodules-barcode-scanner-interface-3.0.0.tgz",
-      "integrity": "sha512-EtJBfKU5VgZbyIfIZwyWfUo59pIgW6s7YGzlpj9jk4UWKyqqhYT/FoaZqudCJcPcfh2eYxkc9VxBGieRBpQrzg=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-barcode-scanner-interface/-/unimodules-barcode-scanner-interface-4.0.0.tgz",
+      "integrity": "sha512-XAW+8s7w/dQ514I/SPfBKHPmbaCOEpYAkdn1aaBoWocVfdvOKf8SqwHSIaP2W/SFUwWNRF4Wqv2HBt1dvuhSSg=="
     },
     "unimodules-camera-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-camera-interface/-/unimodules-camera-interface-3.0.0.tgz",
-      "integrity": "sha512-STjf1FAdYlN27ilJSR4kIUYyHTPrkQSR/mEg4S4pZX6tazmcuG2KzLCXCoV+xMWsrwmsMBjgLzw6yzg87N5Ydw=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-camera-interface/-/unimodules-camera-interface-4.0.0.tgz",
+      "integrity": "sha512-rEYD3mKarxzgiWWL8J0mPAxzV4i1WI9DsNMRxyV2T7qC/WWIucroZX72O1BkYjUbIKerGmJWeGYbWHheP4/rsA=="
     },
     "unimodules-constants-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-constants-interface/-/unimodules-constants-interface-3.0.0.tgz",
-      "integrity": "sha512-S4ap11UJH7D+Y4fXC7DyMNAkqIWD8B7rNCTS30wAF9beHXMZa1Od66rkJgSHqFRURy06h+Jr7qfJm9H5mtMz8Q=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-constants-interface/-/unimodules-constants-interface-4.0.0.tgz",
+      "integrity": "sha512-FTM64GP+uawURWhuExrsCMebpcu0DdREUCuUmes5qd3/uTM2gqmhbm/ZwSKviH/ar4h630Fdb6P6v9o4MDInbA=="
     },
     "unimodules-face-detector-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-face-detector-interface/-/unimodules-face-detector-interface-3.0.0.tgz",
-      "integrity": "sha512-fMQ3ZnhdOjbQ5ZXW62s/t1bbqBaenxzVIcgVEcwvLIFek0mx/EMHFkySgFkFjU11icUvaPEXW1yJtkK4QEpLhg=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-face-detector-interface/-/unimodules-face-detector-interface-4.0.0.tgz",
+      "integrity": "sha512-ZFzqcNnJkBxvfdKCupvtQUj1yVJkzKivPGV6nydKZc9eJRLUgSXCUWtvXd0vaet1NSQqr2R3r6Ilvj0DzuCzUA=="
     },
     "unimodules-file-system-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-file-system-interface/-/unimodules-file-system-interface-3.0.0.tgz",
-      "integrity": "sha512-LkLIKRE3CwsXLRFw8vx0++Cfjj+pAvvidVb7yhGWKFmNlVaWUW9Z8jkhFLBFXDsGFAOU69bUTrz25jmB2MRt0Q=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-file-system-interface/-/unimodules-file-system-interface-4.0.0.tgz",
+      "integrity": "sha512-dDcKjArDwY3CXLlCL8tf9/JJG25K2lgtAL+560kqrftLu3pi0x5V7JmSDz52pJ4pLd5xL8s1Rzse+rIr5OpM3g=="
     },
     "unimodules-font-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-font-interface/-/unimodules-font-interface-3.0.0.tgz",
-      "integrity": "sha512-DOQI0uTn7CGvA9lNUuiTWfQYuKQEM8LZKn6gNS8G+HVHVb+TZl/37qdhuoMBi5jkAZ4VOD/GpgnPv8qr0pJi1Q=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-font-interface/-/unimodules-font-interface-4.0.0.tgz",
+      "integrity": "sha512-RFD1H405kZy8oYcg7f9Krr+UTUn6EZTcqAb+wRL6Ex9TJmzmxJT6JZ0FsUMezOUEwrdvXRpArH4P1AadHlzzGA=="
     },
     "unimodules-image-loader-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-image-loader-interface/-/unimodules-image-loader-interface-3.0.0.tgz",
-      "integrity": "sha512-hC/VWdT33GkOZ4FLaqPoKGNKxhw+miFhM+7Re57snWIWYewSv0lRvCqqwc/hbGLocvd2qF3YYrBx9woqPI8NzA=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-image-loader-interface/-/unimodules-image-loader-interface-4.0.0.tgz",
+      "integrity": "sha512-tv7g1YmZq9ZnG/x9l3qSlpEn93ZuMD+FuQpOZj3/oGDkBlc27vtBSEi8lTySWb9U7UK+bNlHGFqf1lGZcFU1Ug=="
     },
     "unimodules-permissions-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-permissions-interface/-/unimodules-permissions-interface-3.0.0.tgz",
-      "integrity": "sha512-rfyGDBMtO8IOlk9hJN44EKz7vk6nt/PXByAumsptRdgsd+knokMlaWGYatrxKW2g/08WUbEkgKspvMxjJ0M1Tg=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-permissions-interface/-/unimodules-permissions-interface-4.0.0.tgz",
+      "integrity": "sha512-bVZ6JQMO12WvAv6YqcHaPV5KekV7WH606eRiMJq5Qwm2z9yGSM+KaOxOH/n2LVcYckForphsCLf58OGVUtM65Q=="
     },
     "unimodules-sensors-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-sensors-interface/-/unimodules-sensors-interface-3.0.0.tgz",
-      "integrity": "sha512-1JJT/lqCfxHqUSJc3o6b0WUply/lFOJjcuzN0QcAfmdAW8d+lEXA7BJ7DV/Nn/OKpMlHriEyxkM+FoGoXKJJcg=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-sensors-interface/-/unimodules-sensors-interface-4.0.0.tgz",
+      "integrity": "sha512-O7l+N2DLwviTc6gz/ptV7a930Sdo30AvzQLEJPHfqj4e9fCdbrHNrcPqiq0CLqHYYIsdpSDpC6wCWmepLaAgJQ=="
     },
     "unimodules-task-manager-interface": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-task-manager-interface/-/unimodules-task-manager-interface-3.0.0.tgz",
-      "integrity": "sha512-og4UiUOxc7PqT8uQQqXY+pOBvdS204xmgyUG2AjM2L3kVsw/6WH4pIW084WG8/e9M5SLsSXdrjecIUBQ/zLf8w=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unimodules-task-manager-interface/-/unimodules-task-manager-interface-4.0.0.tgz",
+      "integrity": "sha512-c7x5hgEtT+oIVd37TBn2jxlTw2+Bgb55XZ2Md0AV5NCjeRlKw2bIBPwUvSdI1iAziSQOIGOImNaaIUo3L3zW3w=="
     },
     "union-value": {
       "version": "1.0.1",
@@ -13184,6 +13725,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -13230,17 +13776,17 @@
       }
     },
     "webpack": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.24.0.tgz",
-      "integrity": "sha512-Xur0l8nBETnW+DjpFqSGME1jNXxEPVETl30k1lWAsbnukVJdq330/i3PDOLPUtVl/E/cciiOp5uW098hFfQLQA==",
+      "version": "4.29.6",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.29.6.tgz",
+      "integrity": "sha512-MwBwpiE1BQpMDkbnUUaW6K8RFZjljJHArC6tWQJoFm0oQtfoSebtg4Y7/QHnJ/SddtjYLHaKGX64CFjG5rehJw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.11",
-        "@webassemblyjs/helper-module-context": "1.7.11",
-        "@webassemblyjs/wasm-edit": "1.7.11",
-        "@webassemblyjs/wasm-parser": "1.7.11",
-        "acorn": "^5.6.2",
-        "acorn-dynamic-import": "^3.0.0",
+        "@webassemblyjs/ast": "1.8.5",
+        "@webassemblyjs/helper-module-context": "1.8.5",
+        "@webassemblyjs/wasm-edit": "1.8.5",
+        "@webassemblyjs/wasm-parser": "1.8.5",
+        "acorn": "^6.0.5",
+        "acorn-dynamic-import": "^4.0.0",
         "ajv": "^6.1.0",
         "ajv-keywords": "^3.1.0",
         "chrome-trace-event": "^1.0.0",
@@ -13254,9 +13800,9 @@
         "mkdirp": "~0.5.0",
         "neo-async": "^2.5.0",
         "node-libs-browser": "^2.0.0",
-        "schema-utils": "^0.4.4",
+        "schema-utils": "^1.0.0",
         "tapable": "^1.1.0",
-        "uglifyjs-webpack-plugin": "^1.2.4",
+        "terser-webpack-plugin": "^1.1.0",
         "watchpack": "^1.5.0",
         "webpack-sources": "^1.3.0"
       },
@@ -13549,16 +14095,6 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
-        },
-        "schema-utils": {
-          "version": "0.4.7",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
-          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-keywords": "^3.1.0"
-          }
         }
       }
     },
@@ -13583,12 +14119,6 @@
         "ws": "^6.0.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
-          "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
-          "dev": true
-        },
         "ws": {
           "version": "6.2.1",
           "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
@@ -13601,12 +14131,12 @@
       }
     },
     "webpack-deep-scope-plugin": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/webpack-deep-scope-plugin/-/webpack-deep-scope-plugin-1.6.2.tgz",
-      "integrity": "sha512-S5ZM1i7oTIVPIS1z/Fu41tqFzaXpy8vZnwEDC9I7NLj5XD8GGrDZbDXtG5FCGkHPGxtAzF4O21DKZZ76vpBGzw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/webpack-deep-scope-plugin/-/webpack-deep-scope-plugin-1.6.0.tgz",
+      "integrity": "sha512-ZYldKNeWQtk9SoV70x7Eb2NRmvHMtNBOjscs0wUdg/pfymntiF+0W/D9v2o76ztufjND6RNFjNVnyFQww25AZg==",
       "dev": true,
       "requires": {
-        "deep-scope-analyser": "^1.7.0"
+        "deep-scope-analyser": "^1.6.0"
       }
     },
     "webpack-log": {
@@ -13718,15 +14248,13 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
       "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "wide-align": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
@@ -13913,6 +14441,15 @@
         "errno": "~0.1.7"
       }
     },
+    "worker-rpc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
+      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
+      "dev": true,
+      "requires": {
+        "microevent.ts": "~0.1.1"
+      }
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
@@ -14040,6 +14577,20 @@
       "requires": {
         "camelcase": "^4.1.0"
       }
+    },
+    "yup": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.27.0.tgz",
+      "integrity": "sha512-v1yFnE4+u9za42gG/b/081E7uNW9mUj3qtkmelLbW5YPROZzSH/KUUyJu9Wt8vxFJcT9otL/eZopS0YK1L5yPQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "fn-name": "~2.0.1",
+        "lodash": "^4.17.11",
+        "property-expr": "^1.5.0",
+        "synchronous-promise": "^2.0.6",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }
diff --git a/src/playground/package.json b/src/playground/package.json
index d8a1ba393..afcfef536 100644
--- a/src/playground/package.json
+++ b/src/playground/package.json
@@ -1,23 +1,30 @@
 {
-  "name": "react-native-ui-kitten-playground",
-  "main": "./node_modules/expo/AppEntry.js",
-  "private": true,
   "scripts": {
-    "start": "expo start -c"
+    "start": "expo start -c",
+    "web": "expo start --dev --web",
+    "build:web": "expo build:web --no-pwa"
   },
   "dependencies": {
     "@eva-design/eva": "^1.2.0",
-    "expo": "^34.0.3",
+    "@react-navigation/web": "^1.0.0-alpha.9",
+    "expo": "^35.0.0",
     "react": "16.8.3",
-    "react-dom": "^16.8.6",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "react-native-gesture-handler": "^1.3.0",
-    "react-native-reanimated": "^1.1.0",
-    "react-native-web": "^0.11.4",
+    "react-dom": "16.8.3",
+    "react-native": "0.59.10",
+    "react-native-gesture-handler": "~1.3.0",
+    "react-native-reanimated": "~1.2.0",
+    "react-native-screens": "^1.0.0-alpha.23",
+    "react-native-unimodules": "~0.5.4",
+    "react-native-web": "^0.11.7",
     "react-navigation": "^3.11.1"
   },
   "devDependencies": {
-    "@expo/webpack-config": "^0.5.11",
-    "babel-preset-expo": "^5.2.0"
-  }
+    "@expo/webpack-config": "^0.7.6",
+    "@types/react": "^16.8.23",
+    "@types/react-native": "^0.57.65",
+    "babel-preset-expo": "^7.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "typescript": "^3.4.5"
+  },
+  "private": true
 }
diff --git a/src/playground/src/app.component.tsx b/src/playground/src/app.component.tsx
index 861706a4d..7f0a20471 100644
--- a/src/playground/src/app.component.tsx
+++ b/src/playground/src/app.component.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
-import { mapping } from '@eva-design/eva';
+import { mapping as evaMapping } from '@eva-design/eva';
 import { EvaIconsPack } from '@ui-kitten/eva-icons';
 import {
   ApplicationProvider,
-  ApplicationProviderElement,
-} from '@kitten/theme';
-import { IconRegistry } from '@kitten/ui';
+  ApplicationProviderProps,
+  IconPack,
+  IconRegistry,
+} from 'react-native-ui-kitten';
+import { Router } from './navigation';
 import {
   AntDesignIconsPack,
   FeatherIconsPack,
@@ -13,9 +15,9 @@ import {
   MaterialCommunityIconsPack,
   MaterialIconsPack,
 } from './icons';
-import { Router } from './navigation';
 import {
   ThemeContext,
+  ThemeContextType,
   ThemeKey,
   themes,
 } from './themes';
@@ -24,39 +26,51 @@ interface State {
   theme: ThemeKey;
 }
 
-export default class App extends React.Component {
+const icons: IconPack<any>[] = [
+  EvaIconsPack,
+  AntDesignIconsPack,
+  FeatherIconsPack,
+  FontAwesomeIconsPack,
+  MaterialIconsPack,
+  MaterialCommunityIconsPack,
+];
+
+export default class App extends React.Component<{}, State> {
 
   public state: State = {
     theme: 'Eva Light',
   };
 
-  private icons = [
-    EvaIconsPack,
-    AntDesignIconsPack,
-    FeatherIconsPack,
-    FontAwesomeIconsPack,
-    MaterialIconsPack,
-    MaterialCommunityIconsPack,
-  ];
+  private get appConfig(): ApplicationProviderProps {
+    const { [this.state.theme]: currentTheme } = themes;
+
+    return {
+      mapping: evaMapping,
+      theme: currentTheme,
+    };
+  }
+
+  private get themeContext(): ThemeContextType {
+    return {
+      name: this.state.theme,
+      toggleTheme: this.toggleTheme,
+    };
+  }
 
-  private toggleTheme = (theme: string) => {
+  private toggleTheme = (theme: ThemeKey): void => {
     this.setState({ theme });
   };
 
-  public render(): ApplicationProviderElement {
+  public render(): React.ReactFragment {
     return (
-      <ApplicationProvider
-        mapping={mapping}
-        theme={themes[this.state.theme]}>
-        <IconRegistry icons={this.icons}/>
-        <ThemeContext.Provider
-          value={{
-            name: this.state.theme,
-            toggleTheme: this.toggleTheme,
-          }}>
-          <Router/>
-        </ThemeContext.Provider>
-      </ApplicationProvider>
+      <React.Fragment>
+        <IconRegistry icons={icons}/>
+        <ApplicationProvider {...this.appConfig}>
+          <ThemeContext.Provider value={this.themeContext}>
+            <Router/>
+          </ThemeContext.Provider>
+        </ApplicationProvider>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/playground/src/assets/OpenSans-Regular.ttf b/src/playground/src/assets/OpenSans-Regular.ttf
new file mode 100755
index 000000000..29bfd35a2
Binary files /dev/null and b/src/playground/src/assets/OpenSans-Regular.ttf differ
diff --git a/src/playground/src/navigation/navigation.component.tsx b/src/playground/src/navigation/navigation.component.tsx
index d056754b6..dbd1e5991 100644
--- a/src/playground/src/navigation/navigation.component.tsx
+++ b/src/playground/src/navigation/navigation.component.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import { Platform } from 'react-native';
 import {
   createAppContainer,
   createDrawerNavigator,
   createStackNavigator,
   NavigationRouteConfigMap,
 } from 'react-navigation';
+import { createBrowserApp } from '@react-navigation/web';
 import {
   AvatarContainer,
   BottomNavigationContainer,
@@ -36,6 +38,7 @@ import {
   RangeCalendarContainer,
 } from '../ui/screen';
 import { DrawerNavigation } from './drawerNavigation.component';
+import { sharingHeightContainer } from './sharingHeight.container';
 
 export interface RouteType {
   name: string;
@@ -74,7 +77,11 @@ const routes: NavigationRouteConfigMap = {
 
 const MenuNavigator = createStackNavigator(routes, {
   initialRouteName: 'Home',
-  headerMode: 'screen',
+  headerMode: Platform.select({
+    ios: 'screen',
+    android: 'screen',
+    default: 'none',
+  }),
 });
 
 const DrawerNavigator = createDrawerNavigator({
@@ -85,4 +92,12 @@ const DrawerNavigator = createDrawerNavigator({
   initialRouteName: 'Home',
 });
 
-export const Router: any = createAppContainer(DrawerNavigator);
+export let Router: any;
+
+switch (Platform.OS) {
+  case 'web':
+    Router = createBrowserApp(MenuNavigator, { history: 'hash' });
+    break;
+  default:
+    Router = createAppContainer(DrawerNavigator);
+}
diff --git a/src/playground/src/navigation/sharingHeight.container.tsx b/src/playground/src/navigation/sharingHeight.container.tsx
new file mode 100644
index 000000000..2c6597cbd
--- /dev/null
+++ b/src/playground/src/navigation/sharingHeight.container.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  Button,
+  Layout,
+  LayoutProps,
+  OverflowMenu,
+  OverflowMenuItemType,
+  IconElement,
+  Icon,
+  Text,
+} from 'react-native-ui-kitten';
+import {
+  ThemeContext,
+  ThemeContextType,
+  ThemeKey,
+  themes,
+} from '../../src/themes';
+
+interface Props {
+  showcaseId: string;
+}
+
+export type SharingHeightContainerProps = LayoutProps & Props;
+
+const ColorPaletteIcon = (style): IconElement => (
+  <Icon {...style} name='color-palette' />
+);
+
+export const sharingHeightContainer = (Component: React.ComponentType,
+                                       showcaseId: string): React.ReactElement<SharingHeightContainerProps> => {
+
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const themeContext: ThemeContextType = React.useContext(ThemeContext);
+
+  const onThemesButtonPress = (): void => {
+    setMenuVisible(!menuVisible);
+  };
+
+  const onThemeSelect = (index: number): void => {
+    const { [index]: selectedTheme } = Object.keys(themes);
+
+    themeContext.toggleTheme(selectedTheme as ThemeKey);
+    setMenuVisible(false);
+  };
+
+  const onLayout = (event: LayoutChangeEvent): void => {
+    if (Platform.OS === 'web') {
+      postLayoutChangeEvent(event);
+    }
+  };
+
+  const postLayoutChangeEvent = ({ nativeEvent }: LayoutChangeEvent): void => {
+    const layoutChangeMessage: { height: number; id: string; } = {
+      id: showcaseId,
+      height: nativeEvent.layout.height,
+    };
+    window.parent.postMessage(layoutChangeMessage, '*');
+  };
+
+  const createThemeMenuItem = (theme: ThemeKey): OverflowMenuItemType => {
+    return {
+      title: theme,
+    };
+  };
+
+  const createThemesMenuItems = (): OverflowMenuItemType[] => {
+    return Object.keys(themes).map(createThemeMenuItem);
+  };
+
+  return (
+    <Layout
+      style={styles.container}
+      onLayout={onLayout}>
+      <View style={styles.optionsContainer}>
+        <Text
+          appearance='hint'
+          category='c1'>
+          Powered by React Native Web
+        </Text>
+        <OverflowMenu
+          visible={menuVisible}
+          onSelect={onThemeSelect}
+          data={createThemesMenuItems()}
+          onBackdropPress={onThemesButtonPress}>
+          <Button
+            appearance='ghost'
+            status='basic'
+            size='small'
+            icon={ColorPaletteIcon}
+            onPress={onThemesButtonPress}>
+            {themeContext.name}
+          </Button>
+        </OverflowMenu>
+      </View>
+      <Component/>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    minHeight: 170,
+  },
+  optionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
diff --git a/src/playground/src/ui/screen/home.component.tsx b/src/playground/src/ui/screen/home.component.tsx
index ac6b96cc6..25bd2baea 100644
--- a/src/playground/src/ui/screen/home.component.tsx
+++ b/src/playground/src/ui/screen/home.component.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {
-  Button,
   ListRenderItemInfo,
+  Platform,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
+import { Link } from '@react-navigation/web';
 import {
   ThemedComponentProps,
   ThemeType,
@@ -25,7 +26,7 @@ export const routes: RouteType[] = [
   { name: 'Calendar' },
   { name: 'Range Calendar' },
   { name: 'Checkbox' },
-  { name: 'Datepicker'},
+  { name: 'Datepicker' },
   { name: 'Drawer' },
   { name: 'Icon' },
   { name: 'Input' },
@@ -51,21 +52,37 @@ type Props = ThemedComponentProps & NavigationScreenProps;
 
 class HomeScreen extends React.Component<Props> {
 
-  private onItemPress = (index: number) => {
+  private onItemPressMobile = (index: number) => {
     const { [index]: route } = routes;
 
     this.props.navigation.navigate(route.name);
   };
 
-  private renderItem = (info: ListRenderItemInfo<RouteType>): ListItemElement => {
+  private renderWebListItem = (info: ListRenderItemInfo<RouteType>): ListItemElement => {
+    return (
+      <Link routeName={info.item.name}>
+        <ListItem title={info.item.name}/>
+      </Link>
+    );
+  };
+
+  private renderMobileListItem = (info: ListRenderItemInfo<RouteType>): ListItemElement => {
     return (
       <ListItem
         title={info.item.name}
-        onPress={this.onItemPress}
+        onPress={this.onItemPressMobile}
       />
     );
   };
 
+  private renderItem = (info: ListRenderItemInfo<RouteType>): ListItemElement => {
+    return Platform.select({
+      ios: this.renderMobileListItem(info),
+      android: this.renderMobileListItem(info),
+      default: this.renderWebListItem(info),
+    });
+  };
+
   public render(): ListElement {
     return (
       <List
diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts
index e48b9f339..5d838677b 100644
--- a/src/playground/src/ui/screen/index.ts
+++ b/src/playground/src/ui/screen/index.ts
@@ -25,4 +25,5 @@ export { ModalContainer } from './modal/modal.container';
 export { SelectContainer } from './select/select.container';
 export { DatepickerContainer } from './datepicker/datepicker.container';
 export { RangeCalendarContainer } from './rangeCalendar/rangeCalendar.container';
+
 export { default as Home } from './home.component';
diff --git a/src/playground/src/ui/screen/showcases/avatar/avatarInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/avatar/avatarInlineStyling.component.tsx
new file mode 100644
index 000000000..074dbe5fe
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/avatar/avatarInlineStyling.component.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const AvatarInlineStylingShowcase = () => (
+  <Layout style={styles.container}>
+    <Avatar
+      style={styles.avatar}
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  avatar: {
+    width: 96,
+    height: 96,
+    borderRadius: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/avatar/avatarRemoteImages.component.tsx b/src/playground/src/ui/screen/showcases/avatar/avatarRemoteImages.component.tsx
new file mode 100644
index 000000000..26993f197
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/avatar/avatarRemoteImages.component.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const AvatarRemoteImagesShowcase = () => (
+  <Layout style={styles.container}>
+    <Avatar source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}/>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/avatar/avatarShape.component.tsx b/src/playground/src/ui/screen/showcases/avatar/avatarShape.component.tsx
new file mode 100644
index 000000000..2f9cc9461
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/avatar/avatarShape.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const AvatarShapeShowcase = () => (
+  <Layout style={styles.container}>
+    <Avatar
+      style={styles.item}
+      shape='round'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+    <Avatar
+      style={styles.item}
+      shape='rounded'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+    <Avatar
+      style={styles.item}
+      shape='square'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  item: {
+    marginVertical: 8,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/avatar/avatarSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/avatar/avatarSimpleUsage.component.tsx
new file mode 100644
index 000000000..316996b8f
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/avatar/avatarSimpleUsage.component.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const AvatarSimpleUsageShowcase = () => (
+  <Layout style={styles.container}>
+    <Avatar source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}/>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/avatar/avatarSize.component.tsx b/src/playground/src/ui/screen/showcases/avatar/avatarSize.component.tsx
new file mode 100644
index 000000000..9e69d9a04
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/avatar/avatarSize.component.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const AvatarSizeShowcase = () => (
+  <Layout style={styles.container}>
+    <Avatar
+      style={styles.item}
+      size='tiny'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+    <Avatar
+      style={styles.item}
+      size='small'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+    <Avatar
+      style={styles.item}
+      size='medium'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+    <Avatar
+      style={styles.item}
+      size='large'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+    <Avatar
+      style={styles.item}
+      size='giant'
+      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
+    />
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  item: {
+    marginVertical: 8,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/avatar/index.ts b/src/playground/src/ui/screen/showcases/avatar/index.ts
new file mode 100644
index 000000000..31dd6c58c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/avatar/index.ts
@@ -0,0 +1,5 @@
+export { AvatarSimpleUsageShowcase } from './avatarSimpleUsage.component';
+export { AvatarRemoteImagesShowcase } from './avatarRemoteImages.component';
+export { AvatarSizeShowcase } from './avatarSize.component';
+export { AvatarShapeShowcase } from './avatarShape.component';
+export { AvatarInlineStylingShowcase } from './avatarInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationInlineStyling.component.tsx
new file mode 100644
index 000000000..283df7596
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationInlineStyling.component.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  BottomNavigation,
+  BottomNavigationTab,
+} from 'react-native-ui-kitten';
+
+export class BottomNavigationInlineStylingShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onTabSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <BottomNavigation
+        style={styles.bottomNavigation}
+        indicatorStyle={styles.indicator}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onTabSelect}>
+        <BottomNavigationTab title='DASHBOARD'/>
+        <BottomNavigationTab title='SETTINGS'/>
+      </BottomNavigation>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  bottomNavigation: { backgroundColor: 'white' },
+  indicator: { backgroundColor: 'black' },
+});
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationSimpleUsage.component.tsx
new file mode 100644
index 000000000..2970b732a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationSimpleUsage.component.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  BottomNavigation,
+  BottomNavigationTab,
+} from 'react-native-ui-kitten';
+
+export class BottomNavigationSimpleUsageShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onTabSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <BottomNavigation
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onTabSelect}>
+        <BottomNavigationTab title='DASHBOARD'/>
+        <BottomNavigationTab title='SETTINGS'/>
+      </BottomNavigation>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabInlineStyling.component.tsx
new file mode 100644
index 000000000..bf27607d5
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabInlineStyling.component.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { BottomNavigationTab } from 'react-native-ui-kitten';
+
+export const BottomNavigationTabInlineStylingShowcase = () => (
+  <BottomNavigationTab
+    style={styles.tab}
+    titleStyle={styles.tabTitle}
+    title='TAB 1'
+  />
+);
+
+const styles = StyleSheet.create({
+  tab: { backgroundColor: '#EDF1F7' },
+  tabTitle: { color: '#3366FF' },
+});
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabSimpleUsage.component.tsx
new file mode 100644
index 000000000..e54c37c0a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabSimpleUsage.component.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { BottomNavigationTab } from 'react-native-ui-kitten';
+
+export const BottomNavigationTabSimpleUsageShowcase = () => (
+  <BottomNavigationTab title='TAB 1'/>
+);
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabWithExternalSourceIcon.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabWithExternalSourceIcon.component.tsx
new file mode 100644
index 000000000..b8bf71ac9
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabWithExternalSourceIcon.component.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { BottomNavigationTab } from 'react-native-ui-kitten';
+
+const DashboardIcon = (style) => (
+  <Image
+    style={style}
+    source={{uri: 'https://akveo.github.io/eva-icons/fill/png/128/layout.png'}}
+  />
+);
+
+export const BottomNavigationTabWithExternalSourceIconShowcase = () => (
+  <BottomNavigationTab
+    title='DASHBOARD'
+    icon={DashboardIcon}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabWithIcon.component.tsx
new file mode 100644
index 000000000..e43c6afa4
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationTabWithIcon.component.tsx
@@ -0,0 +1,21 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  BottomNavigationTab,
+  Icon,
+} from 'react-native-ui-kitten';
+
+const DashboardIcon = (style) => (
+  <Icon {...style} name='layout'/>
+);
+
+export const BottomNavigationTabWithIconShowcase = () => (
+  <BottomNavigationTab
+    title='DASHBOARD'
+    icon={DashboardIcon}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationWithIcons.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationWithIcons.component.tsx
new file mode 100644
index 000000000..ec3265f3a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationWithIcons.component.tsx
@@ -0,0 +1,45 @@
+// IMPORTANT: To use Icon component make sure to follow this guide:
+// https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+
+import React from 'react';
+import {
+  BottomNavigation,
+  BottomNavigationTab,
+  Icon,
+} from 'react-native-ui-kitten';
+
+const DashboardIcon = (style) => (
+  <Icon {...style} name='layout'/>
+);
+
+const SettingsIcon = (style) => (
+  <Icon {...style} name='settings'/>
+);
+
+export class BottomNavigationWithIconsShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onTabSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <BottomNavigation
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onTabSelect}>
+        <BottomNavigationTab
+          title='DASHBOARD'
+          icon={DashboardIcon}
+        />
+        <BottomNavigationTab
+          title='SETTINGS'
+          icon={SettingsIcon}
+        />
+      </BottomNavigation>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationWithoutIndicator.component.tsx b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationWithoutIndicator.component.tsx
new file mode 100644
index 000000000..db24660f3
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/bottomNavigationWithoutIndicator.component.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  BottomNavigation,
+  BottomNavigationTab,
+} from 'react-native-ui-kitten';
+
+export class BottomNavigationWithoutIndicatorShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onTabSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <BottomNavigation
+        appearance='noIndicator'
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onTabSelect}>
+        <BottomNavigationTab title='DASHBOARD'/>
+        <BottomNavigationTab title='SETTINGS'/>
+      </BottomNavigation>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/bottomNavigation/index.ts b/src/playground/src/ui/screen/showcases/bottomNavigation/index.ts
new file mode 100644
index 000000000..b0dadab87
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/bottomNavigation/index.ts
@@ -0,0 +1,10 @@
+export { BottomNavigationInlineStylingShowcase } from './bottomNavigationInlineStyling.component';
+export { BottomNavigationSimpleUsageShowcase } from './bottomNavigationSimpleUsage.component';
+export { BottomNavigationTabInlineStylingShowcase } from './bottomNavigationTabInlineStyling.component';
+export { BottomNavigationTabSimpleUsageShowcase } from './bottomNavigationTabSimpleUsage.component';
+export {
+  BottomNavigationTabWithExternalSourceIconShowcase,
+}from './bottomNavigationTabWithExternalSourceIcon.component';
+export { BottomNavigationTabWithIconShowcase } from './bottomNavigationTabWithIcon.component';
+export { BottomNavigationWithIconsShowcase } from './bottomNavigationWithIcons.component';
+export { BottomNavigationWithoutIndicatorShowcase } from './bottomNavigationWithoutIndicator.component';
diff --git a/src/playground/src/ui/screen/showcases/button/buttonAppearances.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonAppearances.component.tsx
new file mode 100644
index 000000000..39e640250
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonAppearances.component.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonAppearancesShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button} appearance='filled'>FILLED</Button>
+    <Button style={styles.button} appearance='outline'>OUTLINE</Button>
+    <Button style={styles.button} appearance='ghost'>GHOST</Button>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/buttonGhost.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonGhost.component.tsx
new file mode 100644
index 000000000..57c1a64ad
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonGhost.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonGhostShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button} appearance='ghost' status='primary'>PRIMARY</Button>
+    <Button style={styles.button} appearance='ghost' status='success'>SUCCESS</Button>
+    <Button style={styles.button} appearance='ghost' status='info'>INFO</Button>
+    <Button style={styles.button} appearance='ghost' status='warning'>WARNING</Button>
+    <Button style={styles.button} appearance='ghost' status='danger'>DANGER</Button>
+    <Button style={styles.button} appearance='ghost' status='basic'>BASIC</Button>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/buttonOutline.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonOutline.component.tsx
new file mode 100644
index 000000000..05a7d24c2
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonOutline.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonOutlineShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button} appearance='outline' status='primary'>PRIMARY</Button>
+    <Button style={styles.button} appearance='outline' status='success'>SUCCESS</Button>
+    <Button style={styles.button} appearance='outline' status='info'>INFO</Button>
+    <Button style={styles.button} appearance='outline' status='warning'>WARNING</Button>
+    <Button style={styles.button} appearance='outline' status='danger'>DANGER</Button>
+    <Button style={styles.button} appearance='outline' status='basic'>BASIC</Button>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/buttonSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonSimpleUsage.component.tsx
new file mode 100644
index 000000000..d3ad92071
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonSimpleUsage.component.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonSimpleUsageShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button}>ACTIVE</Button>
+    <Button style={styles.button} disabled={true}>DISABLED</Button>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/buttonSize.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonSize.component.tsx
new file mode 100644
index 000000000..bcba0f364
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonSize.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonSizeShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button} size='tiny'>TINY</Button>
+    <Button style={styles.button} size='small'>SMALL</Button>
+    <Button style={styles.button} size='medium'>MEDIUM</Button>
+    <Button style={styles.button} size='large'>LARGE</Button>
+    <Button style={styles.button} size='giant'>GIANT</Button>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/buttonStatus.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonStatus.component.tsx
new file mode 100644
index 000000000..4cd1b4f36
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonStatus.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonStatusShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button} status='primary'>PRIMARY</Button>
+    <Button style={styles.button} status='success'>SUCCESS</Button>
+    <Button style={styles.button} status='info'>INFO</Button>
+    <Button style={styles.button} status='warning'>WARNING</Button>
+    <Button style={styles.button} status='danger'>DANGER</Button>
+    <Button style={styles.button} status='basic'>BASIC</Button>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/buttonWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/button/buttonWithIcon.component.tsx
new file mode 100644
index 000000000..08a4e15ff
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/buttonWithIcon.component.tsx
@@ -0,0 +1,38 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Icon,
+  Layout,
+} from 'react-native-ui-kitten';
+
+const StarIcon = (style) => (
+  <Icon {...style} name='star'/>
+);
+
+export const ButtonWithIconShowcase = () => (
+  <Layout style={styles.container}>
+    <Button style={styles.button} status='primary' icon={StarIcon}>PRIMARY</Button>
+    <Button style={styles.button} status='success' icon={StarIcon}>SUCCESS</Button>
+    <Button style={styles.button} status='danger' icon={StarIcon}/>
+    <Button style={styles.button} appearance='ghost' status='danger' icon={StarIcon}/>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  button: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/button/index.ts b/src/playground/src/ui/screen/showcases/button/index.ts
new file mode 100644
index 000000000..5827e29d2
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/button/index.ts
@@ -0,0 +1,7 @@
+export { ButtonAppearancesShowcase } from './buttonAppearances.component';
+export { ButtonGhostShowcase } from './buttonGhost.component';
+export { ButtonOutlineShowcase } from './buttonOutline.component';
+export { ButtonWithIconShowcase } from './buttonWithIcon.component';
+export { ButtonSimpleUsageShowcase } from './buttonSimpleUsage.component';
+export { ButtonSizeShowcase } from './buttonSize.component';
+export { ButtonStatusShowcase } from './buttonStatus.component';
diff --git a/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupAppearance.component.tsx b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupAppearance.component.tsx
new file mode 100644
index 000000000..e96630b5a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupAppearance.component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  ButtonGroup,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonGroupAppearanceShowcase = () => (
+  <Layout style={styles.container}>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      appearance='filled'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      appearance='outline'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  buttonGroup: {
+    marginVertical: 8,
+  },
+  button: {
+    flex: 1,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupInlineStyling.component.tsx
new file mode 100644
index 000000000..9474d5f10
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupInlineStyling.component.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  ButtonGroup,
+} from 'react-native-ui-kitten';
+
+export const ButtonGroupInlineStylingShowcase = () => (
+  <ButtonGroup style={styles.buttonGroup}>
+    <Button style={styles.button}>L</Button>
+    <Button style={styles.button}>M</Button>
+    <Button style={styles.button}>R</Button>
+  </ButtonGroup>
+);
+
+const styles = StyleSheet.create({
+  buttonGroup: {
+    margin: 16,
+    borderRadius: 8,
+  },
+  button: {
+    flex: 1,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupSimpleUsage.component.tsx
new file mode 100644
index 000000000..27c216e95
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupSimpleUsage.component.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  ButtonGroup,
+} from 'react-native-ui-kitten';
+
+export const ButtonGroupSimpleUsageShowcase = () => (
+  <ButtonGroup style={styles.container}>
+    <Button style={styles.button}>L</Button>
+    <Button style={styles.button}>M</Button>
+    <Button style={styles.button}>R</Button>
+  </ButtonGroup>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+  },
+  button: {
+    flex: 1,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupSize.component.tsx b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupSize.component.tsx
new file mode 100644
index 000000000..b5156545b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupSize.component.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  ButtonGroup,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonGroupSizeShowcase = () => (
+  <Layout style={styles.container}>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      size='tiny'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      size='small'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      size='medium'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      size='large'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      size='giant'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  buttonGroup: {
+    marginVertical: 8,
+  },
+  button: {
+    flex: 1,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupStatus.component.tsx b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupStatus.component.tsx
new file mode 100644
index 000000000..faee1c0a4
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/buttonGroup/buttonGroupStatus.component.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  ButtonGroup,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export const ButtonGroupStatusShowcase = () => (
+  <Layout style={styles.container}>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      status='primary'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      status='success'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      status='info'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      status='warning'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      style={styles.buttonGroup}
+      status='danger'>
+      <Button style={styles.button}>L</Button>
+      <Button style={styles.button}>M</Button>
+      <Button style={styles.button}>R</Button>
+    </ButtonGroup>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  buttonGroup: {
+    marginBottom: 10,
+  },
+  button: {
+    flex: 1,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/buttonGroup/index.ts b/src/playground/src/ui/screen/showcases/buttonGroup/index.ts
new file mode 100644
index 000000000..bc70c0137
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/buttonGroup/index.ts
@@ -0,0 +1,5 @@
+export { ButtonGroupAppearanceShowcase } from './buttonGroupAppearance.component';
+export { ButtonGroupInlineStylingShowcase } from './buttonGroupInlineStyling.component';
+export { ButtonGroupSimpleUsageShowcase } from './buttonGroupSimpleUsage.component';
+export { ButtonGroupSizeShowcase } from './buttonGroupSize.component';
+export { ButtonGroupStatusShowcase } from './buttonGroupStatus.component';
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx
new file mode 100644
index 000000000..3903caee7
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Calendar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class CalendarBoundingMonthShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          date={this.state.date}
+          boundingMonth={false}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx
new file mode 100644
index 000000000..9bea52ec7
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  Calendar,
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class CalendarCustomDayShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  renderDay = ({ date }, style) => (
+    <View
+      style={[styles.dayContainer, style.container]}>
+      <Text style={style.text}>{`${date.getDate()}`}</Text>
+      <Text style={[style.text, styles.value]}>
+        {`${100 * date.getDate() + Math.pow(date.getDate(), 2)}$`}
+      </Text>
+    </View>
+  );
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          date={this.state.date}
+          onSelect={this.onSelect}
+          renderDay={this.renderDay}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  dayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    aspectRatio: 1,
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: '400',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx
new file mode 100644
index 000000000..be68dec48
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Calendar,
+  Layout,
+  NativeDateService,
+} from 'react-native-ui-kitten';
+
+const i18n = {
+  dayNames: {
+    short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    long: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+  },
+  monthNames: {
+    short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    long: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+  },
+};
+
+export class CalendarCustomLocaleShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  dateService = new NativeDateService('zh', i18n);
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          date={this.state.date}
+          dateService={this.dateService}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx
new file mode 100644
index 000000000..d19baab34
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Calendar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class CalendarFilterShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  filter = (date) => {
+    return date.getDay() !== 0 && date.getDay() !== 6;
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          date={this.state.date}
+          onSelect={this.onSelect}
+          filter={this.filter}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx
new file mode 100644
index 000000000..bbc371742
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx
@@ -0,0 +1,46 @@
+/**
+ * IMPORTANT: To use Moment make sure to install Moment Date Service
+ * npm i @ui-kitten/moment
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import moment from 'moment';
+import {
+  Calendar,
+  Layout,
+} from 'react-native-ui-kitten';
+import { MomentDateService } from '@ui-kitten/moment';
+
+export class CalendarMomentShowcase extends React.Component {
+
+  state = {
+    date: moment(),
+  };
+
+  dateService = new MomentDateService();
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          date={this.state.date}
+          dateService={this.dateService}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx
new file mode 100644
index 000000000..3e24d7e10
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Calendar,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class CalendarSimpleUsageShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Calendar
+          date={this.state.date}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/calendar/index.ts b/src/playground/src/ui/screen/showcases/calendar/index.ts
new file mode 100644
index 000000000..80208c293
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/index.ts
@@ -0,0 +1,7 @@
+export { CalendarBoundingMonthShowcase } from './calendarBoundingMonth.component';
+export { CalendarCustomDayShowcase } from './calendarCustomDay.component';
+export { CalendarCustomLocaleShowcase } from './calendarCustomLocale.component';
+export { CalendarFilterShowcase } from './calendarFilterShowcase.component';
+export { CalendarMomentShowcase } from './calendarMoment.component';
+export { CalendarSimpleUsageShowcase } from './calendarSimpleUsage.component';
+export { RangeCalendarSimpleUsageShowcase } from './rangeCalendarSimpleUsage.component';
diff --git a/src/playground/src/ui/screen/showcases/calendar/rangeCalendarSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/calendar/rangeCalendarSimpleUsage.component.tsx
new file mode 100644
index 000000000..5ca682742
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/calendar/rangeCalendarSimpleUsage.component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  RangeCalendar,
+} from 'react-native-ui-kitten';
+
+export class RangeCalendarSimpleUsageShowcase extends React.Component {
+
+  state = {
+    range: {
+      startDate: null,
+      endDate: null,
+    },
+  };
+
+  onSelect = (range) => {
+    this.setState({ range });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <RangeCalendar
+          range={this.state.range}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/checkbox/checkboxIndeterminate.component.tsx b/src/playground/src/ui/screen/showcases/checkbox/checkboxIndeterminate.component.tsx
new file mode 100644
index 000000000..642180623
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/checkbox/checkboxIndeterminate.component.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  CheckBox,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class CheckboxIndeterminateShowcase extends React.Component {
+
+  state = {
+    mainCheckboxChecked: false,
+    mainCheckboxIndeterminate: false,
+    checkbox1Checked: false,
+    checkbox2Checked: false,
+    checkbox3Checked: false,
+  };
+
+  onMainCheckboxChange = (checked) => {
+    if (checked) {
+      this.setState({
+        checkbox1Checked: true,
+        checkbox2Checked: true,
+        checkbox3Checked: true,
+      });
+    } else {
+      this.setState({
+        checkbox1Checked: false,
+        checkbox2Checked: false,
+        checkbox3Checked: false,
+      });
+    }
+    this.setState({ mainCheckboxChecked: checked });
+  };
+
+  onCheckbox1Change = (checked) => {
+    this.setState({ checkbox1Checked: checked }, this.setMainCheckboxDependingState);
+  };
+
+  onCheckbox2Change = (checked) => {
+    this.setState({ checkbox2Checked: checked }, this.setMainCheckboxDependingState);
+  };
+
+  onCheckbox3Change = (checked) => {
+    this.setState({ checkbox3Checked: checked }, this.setMainCheckboxDependingState);
+  };
+
+  setMainCheckboxDependingState = () => {
+    const { checkbox1Checked, checkbox2Checked, checkbox3Checked } = this.state;
+    const states = [checkbox1Checked, checkbox2Checked, checkbox3Checked];
+    const someChecked = states.some((item) => item === true);
+    const everyChecked = states.every((item) => item === true);
+
+    if (someChecked && !everyChecked) {
+      this.setState({
+        mainCheckboxChecked: true,
+        mainCheckboxIndeterminate: true,
+      });
+    } else if (!someChecked && !everyChecked) {
+      this.setState({
+        mainCheckboxChecked: false,
+        mainCheckboxIndeterminate: false,
+      });
+    } else if (everyChecked) {
+      this.setState({
+        mainCheckboxChecked: true,
+        mainCheckboxIndeterminate: false,
+      });
+    }
+  };
+
+  render() {
+    const {
+      mainCheckboxChecked,
+      mainCheckboxIndeterminate,
+      checkbox1Checked,
+      checkbox2Checked,
+      checkbox3Checked,
+    } = this.state;
+
+    return (
+      <Layout style={styles.container}>
+        <CheckBox
+          style={styles.checkbox}
+          text='Main'
+          checked={mainCheckboxChecked}
+          indeterminate={mainCheckboxIndeterminate}
+          onChange={this.onMainCheckboxChange}
+        />
+        <CheckBox
+          text='Checkbox 1'
+          style={[styles.checkbox, styles.leftSpace]}
+          checked={checkbox1Checked}
+          onChange={this.onCheckbox1Change}
+        />
+        <CheckBox
+          text='Checkbox 2'
+          style={[styles.checkbox, styles.leftSpace]}
+          checked={checkbox2Checked}
+          onChange={this.onCheckbox2Change}
+        />
+        <CheckBox
+          text='Checkbox 3'
+          style={[styles.checkbox, styles.leftSpace]}
+          checked={checkbox3Checked}
+          onChange={this.onCheckbox3Change}
+        />
+      </Layout>
+    );
+  }
+}
+
+export const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  checkbox: {
+    marginVertical: 4,
+  },
+  leftSpace: {
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/checkbox/checkboxInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/checkbox/checkboxInlineStyling.component.tsx
new file mode 100644
index 000000000..a669b92cb
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/checkbox/checkboxInlineStyling.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { CheckBox } from 'react-native-ui-kitten';
+
+export class CheckboxInlineStylingShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onCheckedChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <CheckBox
+        style={styles.checkbox}
+        textStyle={styles.text}
+        checked={this.state.checked}
+        text='Place your Text'
+        onChange={this.onCheckedChange}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  checkbox: {
+    margin: 8,
+  },
+  text: {
+    color: '#3366FF',
+    fontSize: 18,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/checkbox/checkboxSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/checkbox/checkboxSimpleUsage.component.tsx
new file mode 100644
index 000000000..3070f1d33
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/checkbox/checkboxSimpleUsage.component.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  CheckBox,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class CheckboxSimpleUsageShowcase extends React.Component {
+
+  state = {
+    checked1: false,
+  };
+
+  onChecked1Change = (checked1) => {
+    this.setState({ checked1 });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <CheckBox
+          style={styles.checkbox}
+          text='Active'
+          checked={this.state.checked1}
+          onChange={this.onChecked1Change}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          text='Disabled'
+          disabled={true}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          text='Checked Disabled'
+          disabled={true}
+          checked={true}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  checkbox: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/checkbox/checkboxStatus.component.tsx b/src/playground/src/ui/screen/showcases/checkbox/checkboxStatus.component.tsx
new file mode 100644
index 000000000..d8e741edb
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/checkbox/checkboxStatus.component.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  CheckBox,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class CheckboxStatusShowcase extends React.Component {
+
+  state = {
+    primaryChecked: false,
+    successChecked: false,
+    infoChecked: false,
+    warningChecked: false,
+    dangerChecked: false,
+    basicChecked: false,
+  };
+
+  onPrimaryChange = (primaryChecked) => {
+    this.setState({ primaryChecked });
+  };
+
+  onSuccessChange = (successChecked) => {
+    this.setState({ successChecked });
+  };
+
+  onInfoChange = (infoChecked) => {
+    this.setState({ infoChecked });
+  };
+
+  onWarningChange = (warningChecked) => {
+    this.setState({ warningChecked });
+  };
+
+  onDangerChange = (dangerChecked) => {
+    this.setState({ dangerChecked });
+  };
+
+  onBasicChange = (basicChecked) => {
+    this.setState({ basicChecked });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <CheckBox
+          style={styles.checkbox}
+          status='primary'
+          text='Primary'
+          checked={this.state.primaryChecked}
+          onChange={this.onPrimaryChange}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          status='success'
+          text='Success'
+          checked={this.state.successChecked}
+          onChange={this.onSuccessChange}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          status='info'
+          text='Info'
+          checked={this.state.infoChecked}
+          onChange={this.onInfoChange}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          status='warning'
+          text='Warning'
+          checked={this.state.warningChecked}
+          onChange={this.onWarningChange}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          status='danger'
+          text='Danger'
+          checked={this.state.dangerChecked}
+          onChange={this.onDangerChange}
+        />
+        <CheckBox
+          style={styles.checkbox}
+          status='basic'
+          text='Basic'
+          checked={this.state.basicChecked}
+          onChange={this.onBasicChange}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  checkbox: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/checkbox/checkboxText.component.tsx b/src/playground/src/ui/screen/showcases/checkbox/checkboxText.component.tsx
new file mode 100644
index 000000000..e5e04eb1f
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/checkbox/checkboxText.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { CheckBox } from 'react-native-ui-kitten';
+
+export class CheckboxTextShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onCheckedChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <CheckBox
+        style={styles.checkbox}
+        checked={this.state.checked}
+        text='Place your Text'
+        onChange={this.onCheckedChange}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  checkbox: {
+    margin: 8,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/checkbox/index.ts b/src/playground/src/ui/screen/showcases/checkbox/index.ts
new file mode 100644
index 000000000..9a186d037
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/checkbox/index.ts
@@ -0,0 +1,5 @@
+export { CheckboxSimpleUsageShowcase } from './checkboxSimpleUsage.component';
+export { CheckboxStatusShowcase } from './checkboxStatus.component';
+export { CheckboxTextShowcase } from './checkboxText.component';
+export { CheckboxInlineStylingShowcase } from './checkboxInlineStyling.component';
+export { CheckboxIndeterminateShowcase } from './checkboxIndeterminate.component';
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datePickerBoundingMonth.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datePickerBoundingMonth.component.tsx
new file mode 100644
index 000000000..32b5fa703
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datePickerBoundingMonth.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Datepicker,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class DatepickerBoundingMonthShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          boundingMonth={false}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datepickerCustomDay.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datepickerCustomDay.component.tsx
new file mode 100644
index 000000000..d13c2c5dc
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datepickerCustomDay.component.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  Datepicker,
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class DatepickerCustomDayShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  renderDay = ({ date }, style) => (
+    <View
+      style={[styles.dayContainer, style.container]}>
+      <Text style={style.text}>{`${date.getDate()}`}</Text>
+      <Text style={[style.text, styles.value]}>
+        {`${100 * date.getDate() + Math.pow(date.getDate(), 2)}$`}
+      </Text>
+    </View>
+  );
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          onSelect={this.onSelect}
+          renderDay={this.renderDay}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+  dayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    aspectRatio: 1,
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: '400',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datepickerCustomLocale.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datepickerCustomLocale.component.tsx
new file mode 100644
index 000000000..2a792dde1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datepickerCustomLocale.component.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Datepicker,
+  Layout,
+  NativeDateService,
+} from 'react-native-ui-kitten';
+
+const i18n = {
+  dayNames: {
+    short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    long: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+  },
+  monthNames: {
+    short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    long: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+  },
+};
+
+export class DatepickerCustomLocaleShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  dateService = new NativeDateService('zh', i18n);
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          dateService={this.dateService}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datepickerFilter.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datepickerFilter.component.tsx
new file mode 100644
index 000000000..504a0d038
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datepickerFilter.component.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Datepicker,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class DatepickerFilterShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  filter = (date) => {
+    return date.getDay() !== 0 && date.getDay() !== 6;
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          filter={this.filter}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datepickerMoment.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datepickerMoment.component.tsx
new file mode 100644
index 000000000..dc2fe2dd5
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datepickerMoment.component.tsx
@@ -0,0 +1,45 @@
+/**
+ * IMPORTANT: To use Moment make sure to install Moment Date Service
+ * npm i @ui-kitten/moment
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import moment from 'moment';
+import {
+  Datepicker,
+  Layout,
+} from 'react-native-ui-kitten';
+import { MomentDateService } from '@ui-kitten/moment';
+
+export class DatepickerMomentShowcase extends React.Component {
+
+  dateService = new MomentDateService();
+
+  state = {
+    date: moment(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          dateService={this.dateService}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datepickerSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datepickerSimpleUsage.component.tsx
new file mode 100644
index 000000000..249f0cb8b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datepickerSimpleUsage.component.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Datepicker,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class DatepickerSimpleUsageShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/datepickerWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/datepickerWithIcon.component.tsx
new file mode 100644
index 000000000..a523252fd
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/datepickerWithIcon.component.tsx
@@ -0,0 +1,46 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Datepicker,
+  Icon,
+  Layout,
+} from 'react-native-ui-kitten';
+
+const CalendarIcon = (style) => (
+  <Icon {...style} name='calendar'/>
+);
+
+export class DatepickerWithIconShowcase extends React.Component {
+
+  state = {
+    date: new Date(),
+  };
+
+  onSelect = (date) => {
+    this.setState({ date });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Datepicker
+          date={this.state.date}
+          icon={CalendarIcon}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/datepicker/index.ts b/src/playground/src/ui/screen/showcases/datepicker/index.ts
new file mode 100644
index 000000000..cd4c99293
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/index.ts
@@ -0,0 +1,8 @@
+export { DatepickerBoundingMonthShowcase } from './datePickerBoundingMonth.component';
+export { DatepickerCustomDayShowcase } from './datepickerCustomDay.component';
+export { DatepickerFilterShowcase } from './datepickerFilter.component';
+export { DatepickerCustomLocaleShowcase } from './datepickerCustomLocale.component';
+export { DatepickerMomentShowcase } from './datepickerMoment.component';
+export { DatepickerSimpleUsageShowcase } from './datepickerSimpleUsage.component';
+export { DatepickerWithIconShowcase } from './datepickerWithIcon.component';
+export { RangeDatepickerSimpleUsageShowcase } from './rangeDatepickerSimpleUsage.component';
diff --git a/src/playground/src/ui/screen/showcases/datepicker/rangeDatepickerSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/datepicker/rangeDatepickerSimpleUsage.component.tsx
new file mode 100644
index 000000000..68f4caa70
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/datepicker/rangeDatepickerSimpleUsage.component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  RangeDatepicker,
+} from 'react-native-ui-kitten';
+
+export class RangeDatepickerSimpleUsageShowcase extends React.Component {
+
+  state = {
+    range: {
+      startDate: null,
+      endDate: null,
+    },
+  };
+
+  onSelect = (range) => {
+    this.setState({ range });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <RangeDatepicker
+          range={this.state.range}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 400,
+    padding: 16,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerCustomHeader.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerCustomHeader.component.tsx
new file mode 100644
index 000000000..9bd0f704d
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerCustomHeader.component.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import {
+  Drawer,
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class DrawerCustomHeaderShowcase extends React.Component {
+
+  drawerData = [
+    { title: 'Dashboard' },
+    { title: 'Messages' },
+    { title: 'Settings' },
+    { title: 'Articles' },
+    { title: 'Ecommerce' },
+    { title: 'Chat' },
+  ];
+
+  onRouteSelect = (index) => {
+    // const { [index]: route } = this.drawerData;
+    // navigate with React Navigation
+    // this.props.navigation.navigate(route.title);
+  };
+
+  renderHeader = () => (
+    <Layout level='2'>
+      <Text category='h6'>Drawer Header</Text>
+    </Layout>
+  );
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <SafeAreaView>
+          <Drawer
+            data={this.drawerData}
+            header={this.renderHeader}
+            onSelect={this.onRouteSelect}
+          />
+        </SafeAreaView>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerFooter.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerFooter.component.tsx
new file mode 100644
index 000000000..3e95e4b3a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerFooter.component.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import {
+  Drawer,
+  DrawerHeaderFooter,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class DrawerFooterShowcase extends React.Component {
+
+  drawerData = [
+    { title: 'Dashboard' },
+    { title: 'Messages' },
+    { title: 'Settings' },
+    { title: 'Articles' },
+    { title: 'Ecommerce' },
+    { title: 'Chat' },
+  ];
+
+  onRouteSelect = (index) => {
+    // const { [index]: route } = this.drawerData;
+    // navigate with React Navigation
+    // this.props.navigation.navigate(route.title);
+  };
+
+  renderFooter = () => (
+    <DrawerHeaderFooter description='Drawer Footer'/>
+  );
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <SafeAreaView>
+          <Drawer
+            data={this.drawerData}
+            footer={this.renderFooter}
+            onSelect={this.onRouteSelect}
+          />
+        </SafeAreaView>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerHeader.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerHeader.component.tsx
new file mode 100644
index 000000000..bddac21ca
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerHeader.component.tsx
@@ -0,0 +1,64 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import {
+  Drawer,
+  DrawerHeaderFooter,
+  Icon,
+  Layout,
+} from 'react-native-ui-kitten';
+
+const PersonIcon = (style) => (
+  <Icon {...style} name='person'/>
+);
+
+export class DrawerHeaderShowcase extends React.Component {
+
+  drawerData = [
+    { title: 'Dashboard' },
+    { title: 'Messages' },
+    { title: 'Settings' },
+    { title: 'Articles' },
+    { title: 'Ecommerce' },
+    { title: 'Chat' },
+  ];
+
+  onRouteSelect = (index) => {
+    // const { [index]: route } = this.drawerData;
+    // navigate with React Navigation
+    // this.props.navigation.navigate(route.title);
+  };
+
+  renderProfileHeader = () => (
+    <DrawerHeaderFooter
+      title='John Doe'
+      description='React Native Developer'
+      icon={PersonIcon}
+    />
+  );
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <SafeAreaView>
+          <Drawer
+            data={this.drawerData}
+            header={this.renderProfileHeader}
+            onSelect={this.onRouteSelect}
+          />
+        </SafeAreaView>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterInlineStyling.component.tsx
new file mode 100644
index 000000000..a6c758627
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterInlineStyling.component.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { DrawerHeaderFooter } from 'react-native-ui-kitten';
+
+export const DrawerHeaderFooterInlineStylingShowcase = () => (
+  <DrawerHeaderFooter
+    style={styles.drawerHeader}
+    titleStyle={styles.drawerHeaderTitle}
+    descriptionStyle={styles.drawerHeaderDescription}
+    title='John Doe'
+    description='React Native Developer'
+  />
+);
+
+const styles = StyleSheet.create({
+  drawerHeader: { backgroundColor: 'black' },
+  drawerHeaderTitle: { color: 'white' },
+  drawerHeaderDescription: { color: 'gray' },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterSimpleUsage.component.tsx
new file mode 100644
index 000000000..7bda5228a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterSimpleUsage.component.tsx
@@ -0,0 +1,22 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  DrawerHeaderFooter,
+  Icon,
+} from 'react-native-ui-kitten';
+
+const ProfileIcon = (style) => (
+  <Icon {...style} name='person'/>
+);
+
+export const DrawerHeaderFooterSimpleUsageShowcase = () => (
+  <DrawerHeaderFooter
+    title='John Doe'
+    description='React Native Developer'
+    icon={ProfileIcon}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterWithAccessory.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterWithAccessory.component.tsx
new file mode 100644
index 000000000..a092ea9a1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterWithAccessory.component.tsx
@@ -0,0 +1,27 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Button,
+  DrawerHeaderFooter,
+  Icon,
+} from 'react-native-ui-kitten';
+
+const LogoutIcon = (style) => (
+  <Icon {...style} name='log-out'/>
+);
+
+const LogoutButton = (style) => (
+  <Button style={style} icon={LogoutIcon}/>
+);
+
+export const DrawerHeaderFooterWithAccessoryShowcase = () => (
+  <DrawerHeaderFooter
+    title='John Doe'
+    description='React Native Developer'
+    accessory={LogoutButton}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterWithExternalSourceIcons.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterWithExternalSourceIcons.component.tsx
new file mode 100644
index 000000000..e8e287893
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerHeaderFooterWithExternalSourceIcons.component.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { DrawerHeaderFooter } from 'react-native-ui-kitten';
+
+const ProfileIcon = (style) => (
+  <Image style={style} source={{uri: 'https://akveo.github.io/eva-icons/fill/png/128/profile.png'}}/>
+);
+
+export const DrawerHeaderFooterWithExternalSourceIconShowcase = () => (
+  <DrawerHeaderFooter
+    title='John Doe'
+    description='React Native Developer'
+    icon={ProfileIcon}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerNotificationBadgeItem.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerNotificationBadgeItem.component.tsx
new file mode 100644
index 000000000..21f6610cd
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerNotificationBadgeItem.component.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import {
+  Drawer,
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+const NotificationBadge = (style) => (
+  <Layout style={[style, styles.badge]}>
+    <Text>NEW</Text>
+  </Layout>
+);
+
+export class DrawerNotificationBadgeItemShowcase extends React.Component {
+
+  drawerData = [
+    { title: 'Dashboard' },
+    { title: 'Messages', accessory: NotificationBadge },
+    { title: 'Settings' },
+    { title: 'Articles' },
+  ];
+
+  onRouteSelect = (index) => {
+    // const { [index]: route } = this.drawerData;
+    // navigate with React Navigation
+    // this.props.navigation.navigate(route.title);
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <SafeAreaView>
+          <Drawer
+            data={this.drawerData}
+            onSelect={this.onRouteSelect}
+          />
+        </SafeAreaView>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  badge: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 24,
+    width: 48,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    backgroundColor: 'orange',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerSimpleUsage.component.tsx
new file mode 100644
index 000000000..e79ebbe8c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerSimpleUsage.component.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import {
+  Drawer,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class DrawerSimpleUsageShowcase extends React.Component {
+
+  drawerData = [
+    { title: 'Dashboard' },
+    { title: 'Messages' },
+    { title: 'Settings' },
+    { title: 'Articles' },
+    { title: 'Ecommerce' },
+    { title: 'Chat' },
+  ];
+
+  onRouteSelect = (index) => {
+    // const { [index]: route } = this.drawerData;
+    // navigate with React Navigation
+    // this.props.navigation.navigate(route.title);
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <SafeAreaView>
+          <Drawer
+            data={this.drawerData}
+            onSelect={this.onRouteSelect}
+          />
+        </SafeAreaView>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/drawerWithIcons.component.tsx b/src/playground/src/ui/screen/showcases/drawer/drawerWithIcons.component.tsx
new file mode 100644
index 000000000..d53bf1e09
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/drawerWithIcons.component.tsx
@@ -0,0 +1,59 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import {
+  Drawer,
+  Icon,
+  Layout,
+} from 'react-native-ui-kitten';
+
+const DashboardIcon = (style) => (
+  <Icon {...style} name='layout'/>
+);
+
+const MessagesIcon = (style) => (
+  <Icon {...style} name='email'/>
+);
+
+const SettingsIcon = (style) => (
+  <Icon {...style} name='settings'/>
+);
+
+export class DrawerWithIconsShowcase extends React.Component {
+
+  drawerData = [
+    { title: 'Dashboard', icon: DashboardIcon },
+    { title: 'Messages', icon: MessagesIcon },
+    { title: 'Settings', icon: SettingsIcon },
+  ];
+
+  onRouteSelect = (index) => {
+    // const { [index]: route } = this.drawerData;
+    // navigate with React Navigation
+    // this.props.navigation.navigate(route.title);
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <SafeAreaView>
+          <Drawer
+            data={this.drawerData}
+            onSelect={this.onRouteSelect}
+          />
+        </SafeAreaView>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/drawer/index.ts b/src/playground/src/ui/screen/showcases/drawer/index.ts
new file mode 100644
index 000000000..d0f03a7d6
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/drawer/index.ts
@@ -0,0 +1,12 @@
+export { DrawerSimpleUsageShowcase } from './drawerSimpleUsage.component';
+export { DrawerWithIconsShowcase } from './drawerWithIcons.component';
+export { DrawerHeaderShowcase } from './drawerHeader.component';
+export { DrawerHeaderFooterInlineStylingShowcase } from './drawerHeaderFooterInlineStyling.component';
+export { DrawerHeaderFooterSimpleUsageShowcase } from './drawerHeaderFooterSimpleUsage.component';
+export { DrawerHeaderFooterWithAccessoryShowcase } from './drawerHeaderFooterWithAccessory.component';
+export {
+  DrawerHeaderFooterWithExternalSourceIconShowcase,
+}from './drawerHeaderFooterWithExternalSourceIcons.component';
+export { DrawerFooterShowcase } from './drawerFooter.component';
+export { DrawerCustomHeaderShowcase } from './drawerCustomHeader.component';
+export { DrawerNotificationBadgeItemShowcase } from './drawerNotificationBadgeItem.component';
diff --git a/src/playground/src/ui/screen/showcases/icon/iconAnimation.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconAnimation.component.tsx
new file mode 100644
index 000000000..6ca60aba1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconAnimation.component.tsx
@@ -0,0 +1,38 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Button,
+  Icon,
+} from 'react-native-ui-kitten';
+
+export class IconAnimationShowcase extends React.Component {
+
+  iconRef = React.createRef();
+
+  onPress = () => {
+    this.iconRef.current.startAnimation();
+  };
+
+  renderIcon = (style) => (
+    <Icon
+      {...style}
+      ref={this.iconRef}
+      name='star'
+      animation='shake'
+    />
+  );
+
+  render() {
+    return (
+      <Button
+        icon={this.renderIcon}
+        onPress={this.onPress}>
+        START ANIMATION
+      </Button>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/icon/iconAnimationInfinite.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconAnimationInfinite.component.tsx
new file mode 100644
index 000000000..7077f3724
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconAnimationInfinite.component.tsx
@@ -0,0 +1,39 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Button,
+  Icon,
+} from 'react-native-ui-kitten';
+
+export class IconAnimationInfiniteShowcase extends React.Component {
+
+  iconRef = React.createRef();
+
+  onPress = () => {
+    this.iconRef.current.startAnimation();
+  };
+
+  renderIcon = (style) => (
+    <Icon
+      {...style}
+      ref={this.iconRef}
+      name='star'
+      animation='shake'
+      animationConfig={{ cycles: -1 }}
+    />
+  );
+
+  render() {
+    return (
+      <Button
+        icon={this.renderIcon}
+        onPress={this.onPress}>
+        START ANIMATION
+      </Button>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/icon/iconExternalSource.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconExternalSource.component.tsx
new file mode 100644
index 000000000..845d6b4d4
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconExternalSource.component.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { Button } from 'react-native-ui-kitten';
+
+const RemoteBulbIcon = (style) => (
+  <Image
+    style={style}
+    source={{ uri: 'https://akveo.github.io/eva-icons/outline/png/128/bulb-outline.png' }}
+  />
+);
+
+export const IconExternalSourceShowcase = (props) => (
+  <Button icon={RemoteBulbIcon}>
+    Login with Facebook
+  </Button>
+);
diff --git a/src/playground/src/ui/screen/showcases/icon/iconInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconInlineStyling.component.tsx
new file mode 100644
index 000000000..0737aae69
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconInlineStyling.component.tsx
@@ -0,0 +1,16 @@
+/**
+ * Visit react-native-svg documentation for more details on styling
+ * https://github.com/react-native-community/react-native-svg#common-props
+ */
+
+import React from 'react';
+import { Icon } from 'react-native-ui-kitten';
+
+export const IconInlineStylingShowcase = (props) => (
+  <Icon
+    name='github'
+    width={32}
+    height={32}
+    fill='#FF7E6D'
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/icon/iconSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconSimpleUsage.component.tsx
new file mode 100644
index 000000000..677104839
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconSimpleUsage.component.tsx
@@ -0,0 +1,14 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ *
+ * Visit react-native-svg documentation for more details on styling
+ * https://github.com/react-native-community/react-native-svg#common-props
+ */
+
+import React from 'react';
+import { Icon } from 'react-native-ui-kitten';
+
+export const IconSimpleUsageShowcase = () => (
+  <Icon name='star' width={32} height={32} fill='#3366FF' />
+);
diff --git a/src/playground/src/ui/screen/showcases/icon/iconWithinButton.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconWithinButton.component.tsx
new file mode 100644
index 000000000..2552466c7
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconWithinButton.component.tsx
@@ -0,0 +1,39 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Button,
+  Icon,
+} from 'react-native-ui-kitten';
+
+export class IconWithinButtonShowcase extends React.Component {
+
+  state = {
+    liked: false,
+  };
+
+  onPress = () => {
+    const liked = !this.state.liked;
+    this.setState({ liked });
+  };
+
+  renderIcon = (style) => (
+    <Icon
+      name={this.state.liked ? 'heart' : 'heart-outline'}
+      {...style}
+    />
+  );
+
+  render() {
+    return (
+      <Button
+        icon={this.renderIcon}
+        onPress={this.onPress}>
+        LIKE
+      </Button>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/icon/iconWithinInput.component.tsx b/src/playground/src/ui/screen/showcases/icon/iconWithinInput.component.tsx
new file mode 100644
index 000000000..273c5901b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/iconWithinInput.component.tsx
@@ -0,0 +1,47 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  Input,
+} from 'react-native-ui-kitten';
+
+export class IconWithinInputShowcase extends React.Component {
+
+  state = {
+    value: '',
+    secureTextEntry: true,
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  onIconPress = () => {
+    const secureTextEntry = !this.state.secureTextEntry;
+    this.setState({ secureTextEntry });
+  };
+
+  renderIcon = (style) => (
+    <Icon
+      {...style}
+      name={!this.state.secureTextEntry ? 'eye' : 'eye-off'}
+    />
+  );
+
+  render() {
+    return (
+      <Input
+        placeholder='Password'
+        value={this.state.value}
+        secureTextEntry={this.state.secureTextEntry}
+        onChangeText={this.onChangeText}
+        icon={this.renderIcon}
+        onIconPress={this.onIconPress}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/icon/index.ts b/src/playground/src/ui/screen/showcases/icon/index.ts
new file mode 100644
index 000000000..cce0af5ec
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/icon/index.ts
@@ -0,0 +1,7 @@
+export { IconSimpleUsageShowcase } from './iconSimpleUsage.component';
+export { IconWithinButtonShowcase } from './iconWithinButton.component';
+export { IconWithinInputShowcase } from './iconWithinInput.component';
+export { IconExternalSourceShowcase } from './iconExternalSource.component';
+export { IconAnimationShowcase } from './iconAnimation.component';
+export { IconAnimationInfiniteShowcase } from './iconAnimationInfinite.component';
+export { IconInlineStylingShowcase } from './iconInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/input/index.ts b/src/playground/src/ui/screen/showcases/input/index.ts
new file mode 100644
index 000000000..91421c1dd
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/index.ts
@@ -0,0 +1,8 @@
+export { InputInlineStylingShowcase } from './inputInlineStyling.component';
+export { InputSimpleUsageShowcase } from './inputSimpleUsage.component';
+export { InputSizeShowcase } from './inputSize.component';
+export { InputStatusShowcase } from './inputStatus.component';
+export { InputWithCaptionShowcase } from './inputWithCaption.component';
+export { InputWithIconShowcase } from './inputWithIcon.component';
+export { InputWithExternalSourceIconShowcase } from './inputWithExternalSourceIcon.component';
+export { InputWithLabelShowcase } from './inputWithLabel.component';
diff --git a/src/playground/src/ui/screen/showcases/input/inputInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/input/inputInlineStyling.component.tsx
new file mode 100644
index 000000000..2484f348a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputInlineStyling.component.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Input } from 'react-native-ui-kitten';
+
+export class InputInlineStylingShowcase extends React.Component {
+
+  state = {
+    inputValue: '',
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    return (
+      <Input
+        value={this.state.inputValue}
+        placeholder='Place your Text'
+        style={styles.input}
+        textStyle={styles.inputText}
+        labelStyle={styles.inputLabel}
+        captionTextStyle={styles.inputCaption}
+        onChangeText={this.onChangeText}
+        label='LABEL'
+        caption='CAPTION'
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  input: { borderRadius: 24 },
+  inputText: { color: '#3366FF' },
+  inputLabel: { color: '#3366FF' },
+  inputCaption: { color: '#3366FF' },
+});
diff --git a/src/playground/src/ui/screen/showcases/input/inputSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/input/inputSimpleUsage.component.tsx
new file mode 100644
index 000000000..07fea8ec8
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputSimpleUsage.component.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Input,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class InputSimpleUsageShowcase extends React.Component {
+
+  state = {
+    value: '',
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Input
+          style={styles.input}
+          value={this.state.value}
+          onChangeText={this.onChangeText}
+          placeholder='Active'
+        />
+        <Input
+          style={styles.input}
+          disabled={true}
+          placeholder='Disabled'
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  input: {
+    flex: 1,
+    marginHorizontal: 4,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/input/inputSize.component.tsx b/src/playground/src/ui/screen/showcases/input/inputSize.component.tsx
new file mode 100644
index 000000000..d6a4c51cd
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputSize.component.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Input,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class InputSizeShowcase extends React.Component {
+
+  state = {
+    smallValue: '',
+    mediumValue: '',
+    largeValue: '',
+  };
+
+  onSmallTextChange = (smallValue) => {
+    this.setState({ smallValue });
+  };
+
+  onMediumTextChange = (mediumValue) => {
+    this.setState({ mediumValue });
+  };
+
+  onLargeTextChange = (largeValue) => {
+    this.setState({ largeValue });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Input
+          style={styles.input}
+          size='small'
+          placeholder='Small'
+          value={this.state.smallValue}
+          onChangeText={this.onSmallTextChange}
+        />
+        <Input
+          style={styles.input}
+          size='medium'
+          placeholder='Medium'
+          value={this.state.mediumValue}
+          onChangeText={this.onMediumTextChange}
+        />
+        <Input
+          style={styles.input}
+          size='large'
+          placeholder='Large'
+          value={this.state.largeValue}
+          onChangeText={this.onLargeTextChange}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  input: {
+    marginVertical: 4,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/input/inputStatus.component.tsx b/src/playground/src/ui/screen/showcases/input/inputStatus.component.tsx
new file mode 100644
index 000000000..dc9006c64
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputStatus.component.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Input,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class InputStatusShowcase extends React.Component {
+
+  state = {
+    primaryValue: '',
+    successValue: '',
+    infoValue: '',
+    warningValue: '',
+    dangerValue: '',
+    basicValue: '',
+  };
+
+  onPrimaryTextChange = (primaryValue) => {
+    this.setState({ primaryValue });
+  };
+
+  onSuccessTextChange = (successValue) => {
+    this.setState({ successValue });
+  };
+
+  onInfoTextChange = (infoValue) => {
+    this.setState({ infoValue });
+  };
+
+  onWarningTextChange = (warningValue) => {
+    this.setState({ warningValue });
+  };
+
+  onDangerTextChange = (dangerValue) => {
+    this.setState({ dangerValue });
+  };
+
+  onBasicTextChange = (basicValue) => {
+    this.setState({ basicValue });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Input
+          style={styles.input}
+          status='primary'
+          placeholder='Primary'
+          value={this.state.primaryValue}
+          onChangeText={this.onPrimaryTextChange}
+        />
+        <Input
+          style={styles.input}
+          status='success'
+          placeholder='Success'
+          value={this.state.successValue}
+          onChangeText={this.onSuccessTextChange}
+        />
+        <Input
+          style={styles.input}
+          status='info'
+          placeholder='Info'
+          value={this.state.infoValue}
+          onChangeText={this.onInfoTextChange}
+        />
+        <Input
+          style={styles.input}
+          status='warning'
+          placeholder='Warning'
+          value={this.state.warningValue}
+          onChangeText={this.onWarningTextChange}
+        />
+        <Input
+          style={styles.input}
+          status='danger'
+          placeholder='Danger'
+          value={this.state.dangerValue}
+          onChangeText={this.onDangerTextChange}
+        />
+        <Input
+          style={styles.input}
+          status='basic'
+          placeholder='Basic'
+          value={this.state.basicValue}
+          onChangeText={this.onBasicTextChange}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  input: {
+    marginVertical: 4,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/input/inputWithCaption.component.tsx b/src/playground/src/ui/screen/showcases/input/inputWithCaption.component.tsx
new file mode 100644
index 000000000..9b2bf1959
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputWithCaption.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Input } from 'react-native-ui-kitten';
+
+export class InputWithCaptionShowcase extends React.Component {
+
+  state = {
+    value: '',
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  isValidValue = () => {
+    return this.state.value.length >= 6;
+  };
+
+  render() {
+    const isValidInputValue = this.isValidValue();
+    return (
+      <Input
+        placeholder='Place your Text'
+        status={isValidInputValue ? 'success' : 'danger'}
+        caption={isValidInputValue ? '' : 'Invalid value'}
+        value={this.state.value}
+        onChangeText={this.onChangeText}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/input/inputWithExternalSourceIcon.component.tsx b/src/playground/src/ui/screen/showcases/input/inputWithExternalSourceIcon.component.tsx
new file mode 100644
index 000000000..a5840e254
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputWithExternalSourceIcon.component.tsx
@@ -0,0 +1,40 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { Icon, Input } from 'react-native-ui-kitten';
+import { Image } from 'react-native';
+
+export class InputWithExternalSourceIconShowcase extends React.Component {
+
+  state = {
+    value: '',
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  renderIcon = (style) => {
+    return (
+      <Image
+        style={style}
+        source={{uri: 'https://akveo.github.io/eva-icons/fill/png/128/eye-off.png'}}
+      />
+    );
+  };
+
+  render() {
+    return (
+      <Input
+        value={this.state.value}
+        placeholder='Place your Text'
+        icon={this.renderIcon}
+        secureTextEntry={true}
+        onChangeText={this.onChangeText}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/input/inputWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/input/inputWithIcon.component.tsx
new file mode 100644
index 000000000..272a0ea98
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputWithIcon.component.tsx
@@ -0,0 +1,44 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { Icon, Input } from 'react-native-ui-kitten';
+
+export class InputWithIconShowcase extends React.Component {
+
+  state = {
+    value: '',
+    secureTextEntry: true,
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  onIconPress = () => {
+    const secureTextEntry = !this.state.secureTextEntry;
+    this.setState({ secureTextEntry });
+  };
+
+  renderIcon = (style) => {
+    const iconName = this.state.secureTextEntry ? 'eye-off' : 'eye';
+    return (
+      <Icon {...style} name={iconName}/>
+    );
+  };
+
+  render() {
+    return (
+      <Input
+        value={this.state.value}
+        placeholder='Place your Text'
+        icon={this.renderIcon}
+        secureTextEntry={this.state.secureTextEntry}
+        onIconPress={this.onIconPress}
+        onChangeText={this.onChangeText}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/input/inputWithLabel.component.tsx b/src/playground/src/ui/screen/showcases/input/inputWithLabel.component.tsx
new file mode 100644
index 000000000..05e63a9a1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/input/inputWithLabel.component.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input } from 'react-native-ui-kitten';
+
+export class InputWithLabelShowcase extends React.Component {
+
+  state = {
+    value: '',
+  };
+
+  onChangeText = (value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    return (
+      <Input
+        label='LABEL'
+        placeholder='Place your Text'
+        value={this.state.value}
+        onChangeText={this.onChangeText}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/layout/index.ts b/src/playground/src/ui/screen/showcases/layout/index.ts
new file mode 100644
index 000000000..9139cd4a5
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/layout/index.ts
@@ -0,0 +1,3 @@
+export { LayoutSimpleUsageShowcase } from './layoutSimpleUsage.component';
+export { LayoutLevelShowcase } from './layoutLevel.component';
+export { LayoutInlineStylingShowcase } from './layoutInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/layout/layoutInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/layout/layoutInlineStyling.component.tsx
new file mode 100644
index 000000000..7c5c62fe7
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/layout/layoutInlineStyling.component.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const LayoutInlineStylingShowcase = () => {
+
+  return (
+    <Layout style={[styles.container, styles.additionalContainerStyle]}>
+      <Text>Welcome To React Native UI Kitten!</Text>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  additionalContainerStyle: {
+    borderColor: 'red',
+    borderWidth: 2,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/layout/layoutLevel.component.tsx b/src/playground/src/ui/screen/showcases/layout/layoutLevel.component.tsx
new file mode 100644
index 000000000..fa4b9045d
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/layout/layoutLevel.component.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const LayoutLevelShowcase = () => {
+
+  return (
+    <Layout style={styles.container} level='4'>
+      <Layout style={styles.container} level='3'>
+        <Layout style={styles.container} level='2'>
+          <Layout style={[styles.container, styles.contentContainer]}>
+            <Text>Welcome To React Native UI Kitten!</Text>
+          </Layout>
+        </Layout>
+      </Layout>
+    </Layout>
+
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/layout/layoutSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/layout/layoutSimpleUsage.component.tsx
new file mode 100644
index 000000000..424f1e069
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/layout/layoutSimpleUsage.component.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const LayoutSimpleUsageShowcase = () => {
+
+  return (
+    <Layout style={styles.container}>
+      <Text>Welcome To React Native UI Kitten!</Text>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/list/index.ts b/src/playground/src/ui/screen/showcases/list/index.ts
new file mode 100644
index 000000000..35e8704d9
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/index.ts
@@ -0,0 +1,8 @@
+export { ListCompositeItemShowcase } from './listCompositeItem.component';
+export { ListInlineStylingShowcase } from './listInlineStyling.component';
+export { ListItemInlineStylingShowcase } from './listItemInlineStyling.component';
+export { ListItemSimpleUsageShowcase } from './listItemSimpleUsage.component';
+export { ListItemWithAccessoryShowcase } from './listItemWithAccessory.component';
+export { ListItemWithExternalIconShowcase } from './listItemWithExternalIcon.component';
+export { ListItemWithIconShowcase } from './listItemWithIcon.component';
+export { ListSimpleUsageShowcase } from './listSimpleUsage.component';
diff --git a/src/playground/src/ui/screen/showcases/list/listCompositeItem.component.tsx b/src/playground/src/ui/screen/showcases/list/listCompositeItem.component.tsx
new file mode 100644
index 000000000..d3a44c4a4
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listCompositeItem.component.tsx
@@ -0,0 +1,57 @@
+/**
+ * This example demonstrates how simply could be composed List Item
+ * with classic layouts like icon at the left, forward button at the right, etc.
+ *
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+} from 'react-native-ui-kitten';
+
+const SAMPLE_DATA = {
+  title: 'Title for Item',
+  description: 'Description for Item',
+};
+
+export const ListCompositeItemShowcase = () => {
+
+  const data = new Array(8).fill(SAMPLE_DATA);
+
+  const renderItemAccessory = (style) => (
+    <Button style={style}>FOLLOW</Button>
+  );
+
+  const renderItemIcon = (style) => (
+    <Icon {...style} name='person' />
+  );
+
+  const renderItem = ({ item, index }) => (
+    <ListItem
+      title={`${item.title} ${index + 1}`}
+      description={`${item.description} ${index + 1}`}
+      icon={renderItemIcon}
+      accessory={renderItemAccessory}
+    />
+  );
+
+  return (
+    <List
+      style={styles.list}
+      data={data}
+      renderItem={renderItem}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    height: 150,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/list/listInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/list/listInlineStyling.component.tsx
new file mode 100644
index 000000000..8ed5ce0c6
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listInlineStyling.component.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  List,
+  ListItem,
+} from 'react-native-ui-kitten';
+
+const SAMPLE_DATA = {
+  title: 'Title for Item',
+  description: 'Description for Item',
+};
+
+export const ListInlineStylingShowcase = (props) => {
+
+  const data = new Array(8).fill(SAMPLE_DATA);
+
+  const renderItem = ({ item, index }) => (
+    <ListItem
+      title={`${item.title} ${index + 1}`}
+      description={`${item.description} ${index + 1}`}
+    />
+  );
+
+  return (
+    <List
+      contentContainerStyle={styles.contentContainer}
+      data={data}
+      renderItem={renderItem}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: { paddingHorizontal: 8 },
+});
diff --git a/src/playground/src/ui/screen/showcases/list/listItemInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/list/listItemInlineStyling.component.tsx
new file mode 100644
index 000000000..e47942006
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listItemInlineStyling.component.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { ListItem } from 'react-native-ui-kitten';
+
+export const ListItemInlineStylingShowcase = (props) => (
+  <ListItem
+    style={styles.listItem}
+    titleStyle={styles.listItemTitle}
+    descriptionStyle={styles.listItemDescription}
+    title='Title'
+    description='Description'
+  />
+);
+
+const styles = StyleSheet.create({
+  listItem: { borderRadius: 8 },
+  listItemTitle: { color: '#3366ff' },
+  listItemDescription: { color: '#2E3A59' },
+});
diff --git a/src/playground/src/ui/screen/showcases/list/listItemSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/list/listItemSimpleUsage.component.tsx
new file mode 100644
index 000000000..3da7c1f6a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listItemSimpleUsage.component.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { ListItem } from 'react-native-ui-kitten';
+
+export const ListItemSimpleUsageShowcase = (props) => (
+  <ListItem title='Title' />
+);
diff --git a/src/playground/src/ui/screen/showcases/list/listItemWithAccessory.component.tsx b/src/playground/src/ui/screen/showcases/list/listItemWithAccessory.component.tsx
new file mode 100644
index 000000000..bd146f559
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listItemWithAccessory.component.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  CheckBox,
+  ListItem,
+} from 'react-native-ui-kitten';
+
+export class ListItemWithAccessoryShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onCheckBoxCheckedChange = (index) => {
+    const checked = !this.state.checked;
+    this.setState({ checked });
+  };
+
+  renderAccessory = (style, index) => (
+    <CheckBox
+      style={style}
+      checked={this.state.checked}
+      onChange={() => this.onCheckBoxCheckedChange(index)}
+    />
+  );
+
+  render() {
+    return (
+      <ListItem
+        title='Title'
+        description='Description'
+        accessory={this.renderAccessory}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/list/listItemWithExternalIcon.component.tsx b/src/playground/src/ui/screen/showcases/list/listItemWithExternalIcon.component.tsx
new file mode 100644
index 000000000..070814978
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listItemWithExternalIcon.component.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { ListItem } from 'react-native-ui-kitten';
+
+const RemoteStarIcon = (style) => (
+  <Image
+    style={style}
+    source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
+  />
+);
+
+export const ListItemWithExternalIconShowcase = (props) => (
+  <ListItem
+    title='Title'
+    description='Description'
+    icon={RemoteStarIcon}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/list/listItemWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/list/listItemWithIcon.component.tsx
new file mode 100644
index 000000000..3a4f1c3a8
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listItemWithIcon.component.tsx
@@ -0,0 +1,22 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  ListItem,
+} from 'react-native-ui-kitten';
+
+const StarIcon = (style) => (
+  <Icon {...style} name='star'/>
+);
+
+export const ListItemWithIconShowcase = (props) => (
+  <ListItem
+    title='Title'
+    description='Description'
+    icon={StarIcon}
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/list/listSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/list/listSimpleUsage.component.tsx
new file mode 100644
index 000000000..83ced2880
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/list/listSimpleUsage.component.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  List,
+  ListItem,
+} from 'react-native-ui-kitten';
+
+const SAMPLE_DATA = {
+  title: 'Item',
+};
+
+export const ListSimpleUsageShowcase = (props) => {
+
+  const data = new Array(8).fill(SAMPLE_DATA);
+
+  const renderItem = ({ item, index }) => (
+    <ListItem title={`${item.title} ${index + 1}`} />
+  );
+
+  return (
+    <List
+      style={styles.list}
+      data={data}
+      renderItem={renderItem}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    height: 150,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/menu/index.ts b/src/playground/src/ui/screen/showcases/menu/index.ts
new file mode 100644
index 000000000..ad1c4e41e
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/menu/index.ts
@@ -0,0 +1,5 @@
+export { MenuSimpleUsageShowcase } from './menuSimpleUsage.component';
+export { MenuWithSubMenuShowcase } from './menuWithSubMenu.component';
+export { MenuAppearanceShowcase } from './menuAppearance.component';
+export { MenuWithIconsShowcase } from './menuWithIcons.component';
+export { MenuInlineStylingShowcase } from './menuInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/menu/menuAppearance.component.tsx b/src/playground/src/ui/screen/showcases/menu/menuAppearance.component.tsx
new file mode 100644
index 000000000..e04a841ff
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/menu/menuAppearance.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Menu } from 'react-native-ui-kitten';
+
+export class MenuAppearanceShowcase extends React.Component {
+
+  state = {
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Item 1' },
+    { title: 'Item 2' },
+    { title: 'Item 3' },
+    { title: 'Item 4' },
+  ];
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <Menu
+        appearance='noDivider'
+        data={this.data}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/menu/menuInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/menu/menuInlineStyling.component.tsx
new file mode 100644
index 000000000..7a2519c95
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/menu/menuInlineStyling.component.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Menu } from 'react-native-ui-kitten';
+
+export class MenuInlineStylingShowcase extends React.Component {
+
+  state = {
+    selectedIndex: null,
+  };
+
+  data = [
+    {
+      title: 'Item 1',
+      titleStyle: styles.menuItemTitle,
+    },
+    { title: 'Item 2' },
+    {
+      title: 'Item 3',
+      titleStyle: styles.menuItemTitle,
+    },
+    { title: 'Item 4' },
+  ];
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <Menu
+        data={this.data}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  menuItemTitle: {
+    color: 'black',
+    fontSize: 18,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/menu/menuSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/menu/menuSimpleUsage.component.tsx
new file mode 100644
index 000000000..d79677a98
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/menu/menuSimpleUsage.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Menu } from 'react-native-ui-kitten';
+
+export class MenuSimpleUsageShowcase extends React.Component {
+
+  state = {
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Item 1' },
+    { title: 'Item 2', disabled: true },
+    { title: 'Item 3' },
+    { title: 'Item 4' },
+  ];
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <Menu
+        data={this.data}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/menu/menuWithIcons.component.tsx b/src/playground/src/ui/screen/showcases/menu/menuWithIcons.component.tsx
new file mode 100644
index 000000000..6cf5f820f
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/menu/menuWithIcons.component.tsx
@@ -0,0 +1,54 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  Menu,
+} from 'react-native-ui-kitten';
+
+const StarIcon = (style) => (
+  <Icon {...style} name='star'/>
+);
+
+export class MenuWithIconsShowcase extends React.Component {
+
+  state = {
+    selectedIndex: null,
+  };
+
+  data = [
+    {
+      title: 'Item 1',
+      icon: StarIcon,
+    },
+    {
+      title: 'Item 2',
+      icon: StarIcon,
+    },
+    {
+      title: 'Item 3',
+      icon: StarIcon,
+    },
+    {
+      title: 'Item 4',
+      icon: StarIcon,
+    },
+  ];
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <Menu
+        data={this.data}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/menu/menuWithSubMenu.component.tsx b/src/playground/src/ui/screen/showcases/menu/menuWithSubMenu.component.tsx
new file mode 100644
index 000000000..6720c06cf
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/menu/menuWithSubMenu.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Menu } from 'react-native-ui-kitten';
+
+export class MenuWithSubMenuShowcase extends React.Component {
+
+  state = {
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Item 1' },
+    {
+      title: 'Item 2',
+      subItems: [
+        { title: 'Sub Item 1' },
+        { title: 'Sub Item 2' },
+      ],
+    },
+    { title: 'Item 3' },
+    { title: 'Item 4' },
+  ];
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <Menu
+        data={this.data}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/overflowMenu/index.ts b/src/playground/src/ui/screen/showcases/overflowMenu/index.ts
new file mode 100644
index 000000000..5a9d06142
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/overflowMenu/index.ts
@@ -0,0 +1,5 @@
+export { OverflowMenuWithoutDividerShowcase } from './overflowMenuAppearance.component';
+export { OverflowMenuExternalSourceIconsShowcase } from './overflowMenuExternalSourceIcons.component';
+export { OverflowMenuSimpleUsageShowcase } from './overflowMenuSimpleUsage.component';
+export { OverflowMenuWithDisabledItemsShowcase } from './overflowMenuWithDisabledItems.component';
+export { OverflowMenuWithIconsShowcase } from './overflowMenuWithIcons.component';
diff --git a/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuAppearance.component.tsx b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuAppearance.component.tsx
new file mode 100644
index 000000000..88cb00570
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuAppearance.component.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+  OverflowMenu,
+} from 'react-native-ui-kitten';
+
+export class OverflowMenuWithoutDividerShowcase extends React.Component {
+
+  state = {
+    menuVisible: false,
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Menu Item 1' },
+    { title: 'Menu Item 2' },
+    { title: 'Menu Item 3' },
+    { title: 'Menu Item 4' },
+  ];
+
+  onItemSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  onToggleButtonPress = () => {
+    const menuVisible = !this.state.menuVisible;
+    this.setState({ menuVisible });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <OverflowMenu
+          appearance='noDivider'
+          data={this.data}
+          visible={this.state.menuVisible}
+          selectedIndex={this.state.selectedIndex}
+          onSelect={this.onItemSelect}
+          onBackdropPress={this.onToggleButtonPress}>
+          <Button onPress={this.onToggleButtonPress}>
+            TOGGLE MENU
+          </Button>
+        </OverflowMenu>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuExternalSourceIcons.component.tsx b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuExternalSourceIcons.component.tsx
new file mode 100644
index 000000000..3d56c0be8
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuExternalSourceIcons.component.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+} from 'react-native';
+import {
+  Button,
+  Layout,
+  OverflowMenu,
+} from 'react-native-ui-kitten';
+
+const RemoteStarIcon = (style) => (
+  <Image
+    style={style}
+    source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
+  />
+);
+
+export class OverflowMenuExternalSourceIconsShowcase extends React.Component {
+
+  state = {
+    menuVisible: false,
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Menu Item 1', icon: RemoteStarIcon },
+    { title: 'Menu Item 2', icon: RemoteStarIcon },
+    { title: 'Menu Item 3', icon: RemoteStarIcon },
+    { title: 'Menu Item 4', icon: RemoteStarIcon },
+  ];
+
+  onItemSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  onToggleButtonPress = () => {
+    const menuVisible = !this.state.menuVisible;
+    this.setState({ menuVisible });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <OverflowMenu
+          data={this.data}
+          visible={this.state.menuVisible}
+          selectedIndex={this.state.selectedIndex}
+          onSelect={this.onItemSelect}
+          onBackdropPress={this.onToggleButtonPress}>
+          <Button onPress={this.onToggleButtonPress}>
+            TOGGLE MENU
+          </Button>
+        </OverflowMenu>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuSimpleUsage.component.tsx
new file mode 100644
index 000000000..d13a9071c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuSimpleUsage.component.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+  OverflowMenu,
+} from 'react-native-ui-kitten';
+
+export class OverflowMenuSimpleUsageShowcase extends React.Component {
+
+  state = {
+    menuVisible: false,
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Menu Item 1' },
+    { title: 'Menu Item 2' },
+    { title: 'Menu Item 3' },
+    { title: 'Menu Item 4' },
+  ];
+
+  onItemSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  onToggleButtonPress = () => {
+    const menuVisible = !this.state.menuVisible;
+    this.setState({ menuVisible });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <OverflowMenu
+          data={this.data}
+          visible={this.state.menuVisible}
+          selectedIndex={this.state.selectedIndex}
+          onSelect={this.onItemSelect}
+          onBackdropPress={this.onToggleButtonPress}>
+          <Button onPress={this.onToggleButtonPress}>
+            TOGGLE MENU
+          </Button>
+        </OverflowMenu>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuWithDisabledItems.component.tsx b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuWithDisabledItems.component.tsx
new file mode 100644
index 000000000..ea1e56c1c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuWithDisabledItems.component.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+  OverflowMenu,
+} from 'react-native-ui-kitten';
+
+export class OverflowMenuWithDisabledItemsShowcase extends React.Component {
+
+  state = {
+    menuVisible: false,
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Menu Item 1' },
+    { title: 'Menu Item 2', disabled: true },
+    { title: 'Menu Item 3' },
+    { title: 'Menu Item 4' },
+  ];
+
+  onItemSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  onToggleButtonPress = () => {
+    const menuVisible = !this.state.menuVisible;
+    this.setState({ menuVisible });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <OverflowMenu
+          data={this.data}
+          visible={this.state.menuVisible}
+          selectedIndex={this.state.selectedIndex}
+          onSelect={this.onItemSelect}
+          onBackdropPress={this.onToggleButtonPress}>
+          <Button onPress={this.onToggleButtonPress}>
+            TOGGLE MENU
+          </Button>
+        </OverflowMenu>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuWithIcons.component.tsx b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuWithIcons.component.tsx
new file mode 100644
index 000000000..23501aabb
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/overflowMenu/overflowMenuWithIcons.component.tsx
@@ -0,0 +1,64 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Icon,
+  Layout,
+  OverflowMenu,
+} from 'react-native-ui-kitten';
+
+const StarIcon = (style) => (
+  <Icon {...style} name='star'/>
+);
+
+export class OverflowMenuWithIconsShowcase extends React.Component {
+
+  state = {
+    menuVisible: false,
+    selectedIndex: null,
+  };
+
+  data = [
+    { title: 'Menu Item 1', icon: StarIcon },
+    { title: 'Menu Item 2', icon: StarIcon },
+    { title: 'Menu Item 3', icon: StarIcon },
+    { title: 'Menu Item 4', icon: StarIcon },
+  ];
+
+  onItemSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  onToggleButtonPress = () => {
+    const menuVisible = !this.state.menuVisible;
+    this.setState({ menuVisible });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <OverflowMenu
+          data={this.data}
+          visible={this.state.menuVisible}
+          selectedIndex={this.state.selectedIndex}
+          onSelect={this.onItemSelect}
+          onBackdropPress={this.onToggleButtonPress}>
+          <Button onPress={this.onToggleButtonPress}>
+            TOGGLE MENU
+          </Button>
+        </OverflowMenu>
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/popover/index.ts b/src/playground/src/ui/screen/showcases/popover/index.ts
new file mode 100644
index 000000000..51fa57121
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/popover/index.ts
@@ -0,0 +1,2 @@
+export { PopoverSimpleUsageShowcase } from './popoverSimpleUsage.component';
+export { PopoverPlacementShowcase } from './popoverPlacement.component';
diff --git a/src/playground/src/ui/screen/showcases/popover/popoverPlacement.component.tsx b/src/playground/src/ui/screen/showcases/popover/popoverPlacement.component.tsx
new file mode 100644
index 000000000..4acfb82a1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/popover/popoverPlacement.component.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+} from 'react-native';
+import {
+  Popover,
+  Button,
+  Text,
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class PopoverPlacementShowcase extends React.Component {
+
+  state = {
+    visible: false,
+    placement: { text: 'top' },
+  };
+
+  placements = [
+    { text: 'top' },
+    { text: 'top start' },
+    { text: 'top end' },
+    { text: 'left' },
+    { text: 'left start' },
+    { text: 'left end' },
+    { text: 'right' },
+    { text: 'right start' },
+    { text: 'right end' },
+    { text: 'bottom' },
+    { text: 'bottom start' },
+    { text: 'bottom end' },
+  ];
+
+  setVisible = () => {
+    const visible = !this.state.visible;
+
+    this.setState({ visible });
+  };
+
+  setPlacement = (placement) => {
+    this.setState({ placement });
+  };
+
+  renderPopoverContent = () => (
+    <Layout style={styles.popoverContent}>
+      <Text>Hi! This is popover.</Text>
+    </Layout>
+  );
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Select
+          label='Select Popover Placement'
+          data={this.placements}
+          selectedOption={this.state.placement}
+          onSelect={this.setPlacement}
+        />
+        <View style={styles.subContainer}>
+          <Popover
+            visible={this.state.visible}
+            placement={this.state.placement.text}
+            content={this.renderPopoverContent()}
+            onBackdropPress={this.setVisible}>
+            <Button
+              size='giant'
+              onPress={this.setVisible}>
+              SHOW POPOVER
+            </Button>
+          </Popover>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  subContainer: {
+    height: 400,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    width: 150,
+  },
+  popoverContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  select: {
+    position: 'absolute',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/popover/popoverSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/popover/popoverSimpleUsage.component.tsx
new file mode 100644
index 000000000..783fd4894
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/popover/popoverSimpleUsage.component.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+  Popover,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class PopoverSimpleUsageShowcase extends React.Component {
+
+  state = {
+    popoverVisible: false,
+  };
+
+  onToggleButtonPress = () => {
+    const popoverVisible = !this.state.popoverVisible;
+    this.setState({ popoverVisible });
+  };
+
+  renderPopoverContent = () => (
+    <Layout style={styles.popoverContent}>
+      <Text>Hi! This is popover.</Text>
+    </Layout>
+  );
+
+  render() {
+    return (
+      <Popover
+        visible={this.state.popoverVisible}
+        content={this.renderPopoverContent()}
+        onBackdropPress={this.onToggleButtonPress}>
+        <Button onPress={this.onToggleButtonPress}>
+          TOGGLE POPOVER
+        </Button>
+      </Popover>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  popoverContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/radio/index.ts b/src/playground/src/ui/screen/showcases/radio/index.ts
new file mode 100644
index 000000000..451bec765
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radio/index.ts
@@ -0,0 +1,4 @@
+export { RadioSimpleUsageShowcase } from './radioSimpleUsage.component';
+export { RadioWithTextShowcase } from './radioWithText.component';
+export { RadioStatusShowcase } from './radioStatus.component';
+export { RadioInlineStylingShowcase } from './radioInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/radio/radioInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/radio/radioInlineStyling.component.tsx
new file mode 100644
index 000000000..b795bdac1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radio/radioInlineStyling.component.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Radio } from 'react-native-ui-kitten';
+
+export class RadioInlineStylingShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <Radio
+        style={styles.radio}
+        textStyle={styles.radioText}
+        checked={this.state.checked}
+        text='Place your text'
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  radio: {
+    width: 32,
+    height: 32,
+  },
+  radioText: { color: '#3366FF' },
+});
diff --git a/src/playground/src/ui/screen/showcases/radio/radioSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/radio/radioSimpleUsage.component.tsx
new file mode 100644
index 000000000..0c32ffcb8
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radio/radioSimpleUsage.component.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Radio,
+} from 'react-native-ui-kitten';
+
+export class RadioSimpleUsageShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Radio
+          style={styles.radio}
+          text='Active'
+          checked={this.state.checked}
+          onChange={this.onChange}
+        />
+        <Radio
+          style={styles.radio}
+          text='Disabled'
+          disabled={true}
+        />
+        <Radio
+          style={styles.radio}
+          text='Checked Disabled'
+          checked={true}
+          disabled={true}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  radio: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/radio/radioStatus.component.tsx b/src/playground/src/ui/screen/showcases/radio/radioStatus.component.tsx
new file mode 100644
index 000000000..be4585a4c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radio/radioStatus.component.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Radio,
+} from 'react-native-ui-kitten';
+
+export class RadioStatusShowcase extends React.Component {
+
+  state = {
+    primaryChecked: false,
+    successChecked: false,
+    infoChecked: false,
+    warningChecked: false,
+    dangerChecked: false,
+    basicChecked: false,
+  };
+
+  onPrimaryChange = (primaryChecked) => {
+    this.setState({ primaryChecked });
+  };
+
+  onSuccessChange = (successChecked) => {
+    this.setState({ successChecked });
+  };
+
+  onInfoChange = (infoChecked) => {
+    this.setState({ infoChecked });
+  };
+
+  onWarningChange = (warningChecked) => {
+    this.setState({ warningChecked });
+  };
+
+  onDangerChange = (dangerChecked) => {
+    this.setState({ dangerChecked });
+  };
+
+  onBasicChange = (basicChecked) => {
+    this.setState({ basicChecked });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Radio
+          style={styles.radio}
+          status='primary'
+          text='Primary'
+          checked={this.state.primaryChecked}
+          onChange={this.onPrimaryChange}
+        />
+        <Radio
+          style={styles.radio}
+          status='success'
+          text='Success'
+          checked={this.state.successChecked}
+          onChange={this.onSuccessChange}
+        />
+        <Radio
+          style={styles.radio}
+          status='info'
+          text='Info'
+          checked={this.state.infoChecked}
+          onChange={this.onInfoChange}
+        />
+        <Radio
+          style={styles.radio}
+          status='warning'
+          text='Warning'
+          checked={this.state.warningChecked}
+          onChange={this.onWarningChange}
+        />
+        <Radio
+          style={styles.radio}
+          status='danger'
+          text='Danger'
+          checked={this.state.dangerChecked}
+          onChange={this.onDangerChange}
+        />
+        <Radio
+          style={styles.radio}
+          status='basic'
+          text='Basic'
+          checked={this.state.basicChecked}
+          onChange={this.onBasicChange}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  radio: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/radio/radioWithText.component.tsx b/src/playground/src/ui/screen/showcases/radio/radioWithText.component.tsx
new file mode 100644
index 000000000..69b89faaf
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radio/radioWithText.component.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Radio } from 'react-native-ui-kitten';
+
+export class RadioWithTextShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <Radio
+        text='Place your Text'
+        checked={this.state.checked}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/radioGroup/index.ts b/src/playground/src/ui/screen/showcases/radioGroup/index.ts
new file mode 100644
index 000000000..a044e3a51
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radioGroup/index.ts
@@ -0,0 +1 @@
+export { RadioGroupSimpleUsageShowcase } from './radioGroupSimpleUsage.component';
diff --git a/src/playground/src/ui/screen/showcases/radioGroup/radioGroupSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/radioGroup/radioGroupSimpleUsage.component.tsx
new file mode 100644
index 000000000..ecc4d53ea
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/radioGroup/radioGroupSimpleUsage.component.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Radio,
+  RadioGroup,
+} from 'react-native-ui-kitten';
+
+export class RadioGroupSimpleUsageShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onChange = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <RadioGroup
+        style={styles.container}
+        selectedIndex={this.state.selectedIndex}
+        onChange={this.onChange}>
+        <Radio style={styles.radio} text='Option 1' />
+        <Radio style={styles.radio} text='Option 2' />
+        <Radio style={styles.radio} text='Option 3' />
+      </RadioGroup>
+    );
+  }
+}
+
+export const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  radio: {
+    marginVertical: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/select/index.ts b/src/playground/src/ui/screen/showcases/select/index.ts
new file mode 100644
index 000000000..acfeab6d2
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/index.ts
@@ -0,0 +1,6 @@
+export { SelectSimpleUsageShowcase } from './selectSimpleUsage.component';
+export { SelectMultiSelectShowcase } from './selectMultiSelect.component';
+export { SelectWithGroupsShowcase } from './selectWithGroups.component';
+export { SelectCustomIconShowcase } from './selectCustomIcon.component';
+export { SelectStatusShowcase } from './selectStatus.component';
+export { SelectInlineStylingShowcase } from './selectInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/select/selectCustomIcon.component.tsx b/src/playground/src/ui/screen/showcases/select/selectCustomIcon.component.tsx
new file mode 100644
index 000000000..07c1c5f35
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/selectCustomIcon.component.tsx
@@ -0,0 +1,56 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Select,
+  Icon,
+  Layout,
+} from 'react-native-ui-kitten';
+
+export class SelectCustomIconShowcase extends React.Component {
+
+  data = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    { text: 'Option 3' },
+  ];
+
+  state = {
+    selectedOption: null,
+  };
+
+  onSelect = (selectedOption) => {
+    this.setState({ selectedOption });
+  };
+
+  renderIcon = (style, visible) => {
+    const iconName = visible ? 'arrow-ios-upward' : 'arrow-ios-downward';
+    return (
+      <Icon {...style} name={iconName}/>
+    );
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          data={this.data}
+          selectedOption={this.state.selectedOption}
+          icon={this.renderIcon}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 230,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/select/selectInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/select/selectInlineStyling.component.tsx
new file mode 100644
index 000000000..0acebc94e
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/selectInlineStyling.component.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class SelectInlineStylingShowcase extends React.Component {
+
+  private data = [
+    { text: 'Option 1' },
+    { text: 'Option 2', textStyle: styles.option2 },
+    { text: 'Option 3' },
+  ];
+
+  state = {
+    selectedOption: null,
+  };
+
+  onSelect = (selectedOption) => {
+    this.setState({ selectedOption });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          labelStyle={styles.labelStyle}
+          placeholderStyle={styles.placeholderStyle}
+          controlStyle={styles.controlStyle}
+          data={this.data}
+          selectedOption={this.state.selectedOption}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 230,
+    padding: 16,
+  },
+  labelStyle: {
+    color: 'gray',
+  },
+  placeholderStyle: {
+    color: 'gray',
+  },
+  controlStyle: {
+    borderRadius: 8,
+  },
+  option2: {
+    color: 'red',
+    fontSize: 18,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/select/selectMultiSelect.component.tsx b/src/playground/src/ui/screen/showcases/select/selectMultiSelect.component.tsx
new file mode 100644
index 000000000..c5e7e025b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/selectMultiSelect.component.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class SelectMultiSelectShowcase extends React.Component {
+
+  data = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    { text: 'Option 3' },
+  ];
+
+  state = {
+    selectedOption: [],
+  };
+
+  onSelect = (selectedOption) => {
+    this.setState({ selectedOption });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          data={this.data}
+          multiSelect={true}
+          selectedOption={this.state.selectedOption}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 230,
+    padding: 16,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/select/selectSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/select/selectSimpleUsage.component.tsx
new file mode 100644
index 000000000..4c965e796
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/selectSimpleUsage.component.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class SelectSimpleUsageShowcase extends React.Component {
+
+  data = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    { text: 'Option 3', disabled: true },
+    { text: 'Option 4' },
+  ];
+
+  state = {
+    selectedOption: null,
+  };
+
+  onSelect = (selectedOption) => {
+    this.setState({ selectedOption });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          style={styles.select}
+          data={this.data}
+          placeholder='Active'
+          selectedOption={this.state.selectedOption}
+          onSelect={this.onSelect}
+        />
+        <Select
+          style={styles.select}
+          data={this.data}
+          placeholder='Disabled'
+          disabled={true}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 230,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  select: {
+    flex: 1,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/select/selectStatus.component.tsx b/src/playground/src/ui/screen/showcases/select/selectStatus.component.tsx
new file mode 100644
index 000000000..671a0582c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/selectStatus.component.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class SelectStatusShowcase extends React.Component {
+
+  data = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    { text: 'Option 3' },
+  ];
+
+  state = {
+    selectedOptionPrimary: null,
+    selectedOptionSuccess: null,
+    selectedOptionInfo: null,
+    selectedOptionDanger: null,
+    selectedOptionWarning: null,
+    selectedOptionBasic: null,
+  };
+
+  onPrimarySelect = (selectedOptionPrimary) => {
+    this.setState({ selectedOptionPrimary });
+  };
+
+  onSuccessSelect = (selectedOptionSuccess) => {
+    this.setState({ selectedOptionSuccess });
+  };
+
+  onInfoSelect = (selectedOptionInfo) => {
+    this.setState({ selectedOptionInfo });
+  };
+
+  onDangerSelect = (selectedOptionDanger) => {
+    this.setState({ selectedOptionDanger });
+  };
+
+  onWarningSelect = (selectedOptionWarning) => {
+    this.setState({ selectedOptionWarning });
+  };
+
+  onBasicSelect = (selectedOptionBasic) => {
+    this.setState({ selectedOptionBasic });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          data={this.data}
+          status='primary'
+          placeholder='Primary'
+          selectedOption={this.state.selectedOptionPrimary}
+          onSelect={this.onPrimarySelect}
+        />
+        <Select
+          data={this.data}
+          status='success'
+          placeholder='Success'
+          selectedOption={this.state.selectedOptionSuccess}
+          onSelect={this.onSuccessSelect}
+        />
+        <Select
+          data={this.data}
+          status='info'
+          placeholder='Info'
+          selectedOption={this.state.selectedOptionInfo}
+          onSelect={this.onInfoSelect}
+        />
+        <Select
+          data={this.data}
+          status='warning'
+          placeholder='Warning'
+          selectedOption={this.state.selectedOptionWarning}
+          onSelect={this.onWarningSelect}
+        />
+        <Select
+          data={this.data}
+          status='danger'
+          placeholder='Danger'
+          selectedOption={this.state.selectedOptionDanger}
+          onSelect={this.onDangerSelect}
+        />
+        <Select
+          data={this.data}
+          status='basic'
+          placeholder='Basic'
+          selectedOption={this.state.selectedOptionBasic}
+          onSelect={this.onBasicSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/select/selectWithGroups.component.tsx b/src/playground/src/ui/screen/showcases/select/selectWithGroups.component.tsx
new file mode 100644
index 000000000..f25cf1c4b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/select/selectWithGroups.component.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class SelectWithGroupsShowcase extends React.Component {
+
+  items = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    {
+      text: 'Option 3',
+      items: [
+        { text: 'SubOption 1' },
+        { text: 'SubOption 2' },
+      ],
+    },
+  ];
+
+  state = {
+    selectedOption: null,
+  };
+
+  onSelect = (selectedOption) => {
+    this.setState({ selectedOption });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          data={this.items}
+          selectedOption={this.state.selectedOption}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 280,
+    padding: 16,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/spinner/index.ts b/src/playground/src/ui/screen/showcases/spinner/index.ts
new file mode 100644
index 000000000..080b2a572
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/spinner/index.ts
@@ -0,0 +1,4 @@
+export { SpinnerDataLoadingShowcase } from './spinnerLoadingData.component';
+export { SpinnerSimpleUsageShowcase } from './spinnerSimpleUsage.component';
+export { SpinnerSizesShowcase } from './spinnerSizes.component';
+export { SpinnerStatusesShowcase } from './spinnerStatuses.component';
diff --git a/src/playground/src/ui/screen/showcases/spinner/spinnerLoadingData.component.tsx b/src/playground/src/ui/screen/showcases/spinner/spinnerLoadingData.component.tsx
new file mode 100644
index 000000000..fbf64ebcc
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/spinner/spinnerLoadingData.component.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  List,
+  ListItem,
+  Spinner,
+} from 'react-native-ui-kitten';
+
+const SAMPLE_DATA = {
+  title: 'Title for Item',
+};
+
+export class SpinnerDataLoadingShowcase extends React.Component {
+
+  state = {
+    data: [],
+  };
+
+  componentDidMount() {
+    setTimeout(this.loadData, 5000);
+  }
+
+  loadData = () => {
+    const data = new Array(8).fill(SAMPLE_DATA);
+    this.setState({ data });
+  };
+
+  private renderLoading = () => (
+    <View style={styles.loading}>
+      <Spinner/>
+    </View>
+  );
+
+  renderDataItem = ({ item, index }) => (
+    <ListItem title={`${item.title} ${index + 1}`}/>
+  );
+
+  renderData = () => (
+    <List
+      data={this.state.data}
+      renderItem={this.renderDataItem}
+    />
+  );
+
+  render() {
+    const isLoaded: boolean = this.state.data.length > 0;
+    return isLoaded ? this.renderData() : this.renderLoading();
+  }
+}
+
+const styles = StyleSheet.create({
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/spinner/spinnerSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/spinner/spinnerSimpleUsage.component.tsx
new file mode 100644
index 000000000..2d4c00751
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/spinner/spinnerSimpleUsage.component.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Spinner } from 'react-native-ui-kitten';
+
+export const SpinnerSimpleUsageShowcase = () => (
+  <Spinner/>
+);
diff --git a/src/playground/src/ui/screen/showcases/spinner/spinnerSizes.component.tsx b/src/playground/src/ui/screen/showcases/spinner/spinnerSizes.component.tsx
new file mode 100644
index 000000000..596821f33
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/spinner/spinnerSizes.component.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Spinner,
+} from 'react-native-ui-kitten';
+
+export const SpinnerSizesShowcase = () => (
+  <Layout style={styles.container}>
+    <Spinner size='tiny'/>
+    <Spinner size='small'/>
+    <Spinner size='medium'/>
+    <Spinner size='large'/>
+    <Spinner size='giant'/>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/spinner/spinnerStatuses.component.tsx b/src/playground/src/ui/screen/showcases/spinner/spinnerStatuses.component.tsx
new file mode 100644
index 000000000..2cfa1489b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/spinner/spinnerStatuses.component.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Spinner,
+} from 'react-native-ui-kitten';
+
+export const SpinnerStatusesShowcase = () => (
+  <Layout style={styles.container}>
+    <Spinner status='primary'/>
+    <Spinner status='success'/>
+    <Spinner status='info'/>
+    <Spinner status='warning'/>
+    <Spinner status='danger'/>
+    <Spinner status='alternative'/>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/tab/index.ts b/src/playground/src/ui/screen/showcases/tab/index.ts
new file mode 100644
index 000000000..4f541787e
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/index.ts
@@ -0,0 +1,8 @@
+export { TabBarSimpleUsageShowcase } from './tabBarSimpleUsage.component';
+export { TabInlineStylingShowcase } from './tabInlineStyling.component';
+export { TabSimpleUsageShowcase } from './tabSimpleUsage.component';
+export { TabViewInlineStylingShowcase } from './tabViewInlineStyling.component';
+export { TabViewLazyLoadingShowcase } from './tabViewLazyLoading.component';
+export { TabViewSimpleUsageShowcase } from './tabViewSimpleUsage.component';
+export { TabWithExternalSourceIconShowcase } from './tabWithExternalSourceIcon.component';
+export { TabWithIconShowcase } from './tabWithIcon.component';
diff --git a/src/playground/src/ui/screen/showcases/tab/tabBarSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabBarSimpleUsage.component.tsx
new file mode 100644
index 000000000..8e70ac07c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabBarSimpleUsage.component.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  Tab,
+  TabBar,
+} from 'react-native-ui-kitten';
+
+export class TabBarSimpleUsageShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onBarSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <TabBar
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onBarSelect}>
+        <Tab title='Tab 1'/>
+        <Tab title='Tab 2'/>
+        <Tab title='Tab 3'/>
+      </TabBar>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/tab/tabInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabInlineStyling.component.tsx
new file mode 100644
index 000000000..3ed211500
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabInlineStyling.component.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Tab } from 'react-native-ui-kitten';
+
+export const TabInlineStylingShowcase = (props) => (
+  <Tab
+    style={styles.tab}
+    titleStyle={styles.tabTitle}
+    title='DASHBOARD'
+  />
+);
+
+const styles = StyleSheet.create({
+  tab: { backgroundColor: '#EDF1F7' },
+  tabTitle: { color: '#3366FF' },
+});
diff --git a/src/playground/src/ui/screen/showcases/tab/tabSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabSimpleUsage.component.tsx
new file mode 100644
index 000000000..d6e4090b8
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabSimpleUsage.component.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Tab } from 'react-native-ui-kitten';
+
+export const TabSimpleUsageShowcase = (props) => (
+  <Tab title='Tab Title' />
+);
diff --git a/src/playground/src/ui/screen/showcases/tab/tabViewInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabViewInlineStyling.component.tsx
new file mode 100644
index 000000000..7c624fdff
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabViewInlineStyling.component.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Tab,
+  TabView,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const TabViewInlineStylingShowcase = (props) => (
+  <TabView
+    style={styles.tabView}
+    tabBarStyle={styles.tabBar}
+    indicatorStyle={styles.tabViewIndicator}>
+    <Tab title='DASHBOARD'>
+      <Text>DASHBOARD</Text>
+    </Tab>
+    <Tab title='SETTINGS'>
+      <Text>SETTINGS</Text>
+    </Tab>
+  </TabView>
+);
+
+const styles = StyleSheet.create({
+  tabView: { backgroundColor: '#EDF1F7' },
+  tabBar: { backgroundColor: '#C5CEE0' },
+  tabViewIndicator: { backgroundColor: '#3366FF' },
+});
diff --git a/src/playground/src/ui/screen/showcases/tab/tabViewLazyLoading.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabViewLazyLoading.component.tsx
new file mode 100644
index 000000000..3762452a5
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabViewLazyLoading.component.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Tab,
+  TabView,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class TabViewLazyLoadingShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  shouldLoadTabContent = (index) => {
+    return index === this.state.selectedIndex;
+  };
+
+  render() {
+    return (
+      <TabView
+        selectedIndex={this.state.selectedIndex}
+        shouldLoadComponent={this.shouldLoadTabContent}
+        onSelect={this.onSelect}>
+        <Tab title='DASHBOARD'>
+          <Text>DASHBOARD</Text>
+        </Tab>
+        <Tab title='SETTINGS'>
+          <Text>SETTINGS</Text>
+        </Tab>
+      </TabView>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/tab/tabViewSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabViewSimpleUsage.component.tsx
new file mode 100644
index 000000000..93a4b1eca
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabViewSimpleUsage.component.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Tab,
+  TabView,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class TabViewSimpleUsageShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <TabView
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}>
+        <Tab title='DASHBOARD'>
+          <Text>DASHBOARD</Text>
+        </Tab>
+        <Tab title='SETTINGS'>
+          <Text>SETTINGS</Text>
+        </Tab>
+      </TabView>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/tab/tabWithExternalSourceIcon.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabWithExternalSourceIcon.component.tsx
new file mode 100644
index 000000000..8ab38e4b3
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabWithExternalSourceIcon.component.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { Tab } from 'react-native-ui-kitten';
+
+const DashboardIcon = (style) => (
+  <Image style={style} source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/layout.png' }}/>
+);
+
+export const TabWithExternalSourceIconShowcase = (props) => (
+  <Tab title='DASHBOARD' icon={DashboardIcon}/>
+);
diff --git a/src/playground/src/ui/screen/showcases/tab/tabWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/tab/tabWithIcon.component.tsx
new file mode 100644
index 000000000..41bd82eda
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tab/tabWithIcon.component.tsx
@@ -0,0 +1,18 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  Tab,
+} from 'react-native-ui-kitten';
+
+const DashboardIcon = (style) => (
+  <Icon {...style} name='layout'/>
+);
+
+export const TabWithIconShowcase = (props) => (
+  <Tab title='DASHBOARD' icon={DashboardIcon}/>
+);
diff --git a/src/playground/src/ui/screen/showcases/text/index.ts b/src/playground/src/ui/screen/showcases/text/index.ts
new file mode 100644
index 000000000..eef55bfc5
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/text/index.ts
@@ -0,0 +1,5 @@
+export { TextAppearancesShowcase } from './textAppearances.component';
+export { TextCategoriesShowcase } from './textCategories.component';
+export { TextInlineStylingShowcase } from './textInlineStyling.component';
+export { TextSimpleUsageShowcase } from './textSimpleUsage.component';
+export { TextStatusesShowcase } from './textStatuses.component';
diff --git a/src/playground/src/ui/screen/showcases/text/textAppearances.component.tsx b/src/playground/src/ui/screen/showcases/text/textAppearances.component.tsx
new file mode 100644
index 000000000..1a888f15d
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/text/textAppearances.component.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import {
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const TextAppearancesShowcase = () => (
+  <Layout>
+    <Text appearance='default'>Default</Text>
+    <Text appearance='alternative'>Alternative</Text>
+    <Text appearance='hint'>Hint</Text>
+  </Layout>
+);
diff --git a/src/playground/src/ui/screen/showcases/text/textCategories.component.tsx b/src/playground/src/ui/screen/showcases/text/textCategories.component.tsx
new file mode 100644
index 000000000..f47b4b1bd
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/text/textCategories.component.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const TextCategoriesShowcase = () => (
+  <Layout>
+    <Text category='h1'>H1</Text>
+    <Text category='h2'>H2</Text>
+    <Text category='h3'>H3</Text>
+    <Text category='h4'>H4</Text>
+    <Text category='h5'>H5</Text>
+    <Text category='h6'>H6</Text>
+    <Text category='s1'>S1</Text>
+    <Text category='s2'>S2</Text>
+    <Text category='p1'>P1</Text>
+    <Text category='p2'>P2</Text>
+    <Text category='c1'>C1</Text>
+    <Text category='c2'>C2</Text>
+    <Text category='label'>LABEL</Text>
+  </Layout>
+);
diff --git a/src/playground/src/ui/screen/showcases/text/textInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/text/textInlineStyling.component.tsx
new file mode 100644
index 000000000..17b686414
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/text/textInlineStyling.component.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from 'react-native-ui-kitten';
+
+export const TextInlineStylingShowcase = () => (
+  <Text style={styles.text}>Sample Text</Text>
+);
+
+const styles = StyleSheet.create({
+  text: {
+    color: '#3366FF',
+    fontSize: 18,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/text/textSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/text/textSimpleUsage.component.tsx
new file mode 100644
index 000000000..03f2a0f4e
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/text/textSimpleUsage.component.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Text } from 'react-native-ui-kitten';
+
+export const TextSimpleUsageShowcase = () => (
+  <Text>Sample Text</Text>
+);
diff --git a/src/playground/src/ui/screen/showcases/text/textStatuses.component.tsx b/src/playground/src/ui/screen/showcases/text/textStatuses.component.tsx
new file mode 100644
index 000000000..deb480757
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/text/textStatuses.component.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import {
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const TextStatusesShowcase = () => (
+  <Layout>
+    <Text status='primary'>Primary</Text>
+    <Text status='success'>Success</Text>
+    <Text status='info'>Info</Text>
+    <Text status='warning'>Warning</Text>
+    <Text status='danger'>Danger</Text>
+  </Layout>
+);
diff --git a/src/playground/src/ui/screen/showcases/toggle/index.ts b/src/playground/src/ui/screen/showcases/toggle/index.ts
new file mode 100644
index 000000000..169f5129d
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/toggle/index.ts
@@ -0,0 +1,5 @@
+export { ToggleSimpleUsageShowcase } from './toggleSimpleUsage.component';
+export { ToggleStatusShowcase } from './toggleStatus.component';
+export { ToggleSizeShowcase } from './toggleSize.component';
+export { ToggleWithTextShowcase } from './toggleWithText.component';
+export { ToggleInlineStylingShowcase } from './toggleInlineStyling.component';
diff --git a/src/playground/src/ui/screen/showcases/toggle/toggleInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/toggle/toggleInlineStyling.component.tsx
new file mode 100644
index 000000000..9f2d317c4
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/toggle/toggleInlineStyling.component.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Toggle } from 'react-native-ui-kitten';
+
+export class ToggleInlineStylingShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onToggleValueChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <Toggle
+        checked={this.state.checked}
+        text='Place your Text'
+        textStyle={styles.text}
+        onChange={this.onToggleValueChange}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: '#3366FF',
+    fontSize: 18,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/toggle/toggleSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/toggle/toggleSimpleUsage.component.tsx
new file mode 100644
index 000000000..26e284dce
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/toggle/toggleSimpleUsage.component.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Toggle,
+} from 'react-native-ui-kitten';
+
+export class ToggleSimpleUsageShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onToggleValueChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Toggle
+          style={styles.toggle}
+          text='Active'
+          checked={this.state.checked}
+          onChange={this.onToggleValueChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          text='Disabled'
+          disabled={true}
+        />
+        <Toggle
+          style={styles.toggle}
+          text='Checked Disabled'
+          checked={true}
+          disabled={true}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  toggle: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/toggle/toggleSize.component.tsx b/src/playground/src/ui/screen/showcases/toggle/toggleSize.component.tsx
new file mode 100644
index 000000000..71f1711ec
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/toggle/toggleSize.component.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Toggle,
+} from 'react-native-ui-kitten';
+
+export class ToggleSizeShowcase extends React.Component {
+
+  state = {
+    tinyChecked: false,
+    smallChecked: false,
+    mediumChecked: false,
+    largeChecked: false,
+    giantChecked: false,
+  };
+
+  onTinyChange = (tinyChecked) => {
+    this.setState({ tinyChecked });
+  };
+
+  onSmallChange = (smallChecked) => {
+    this.setState({ smallChecked });
+  };
+
+  onMediumChange = (mediumChecked) => {
+    this.setState({ mediumChecked });
+  };
+
+  onLargeChange = (largeChecked) => {
+    this.setState({ largeChecked });
+  };
+
+  onGiantChange = (giantChecked) => {
+    this.setState({ giantChecked });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.tinyChecked}
+          text='Tiny'
+          size='tiny'
+          onChange={this.onTinyChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.smallChecked}
+          text='Small'
+          size='small'
+          onChange={this.onSmallChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.mediumChecked}
+          text='Medium'
+          size='medium'
+          onChange={this.onMediumChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.largeChecked}
+          text='Large'
+          size='large'
+          onChange={this.onLargeChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.giantChecked}
+          text='Giant'
+          size='giant'
+          onChange={this.onGiantChange}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  toggle: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/toggle/toggleStatus.component.tsx b/src/playground/src/ui/screen/showcases/toggle/toggleStatus.component.tsx
new file mode 100644
index 000000000..b43a16cc2
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/toggle/toggleStatus.component.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Toggle,
+} from 'react-native-ui-kitten';
+
+export class ToggleStatusShowcase extends React.Component {
+
+  state = {
+    primaryChecked: false,
+    successChecked: false,
+    infoChecked: false,
+    warningChecked: false,
+    dangerChecked: false,
+    basicChecked: false,
+  };
+
+  onPrimaryChange = (primaryChecked) => {
+    this.setState({ primaryChecked });
+  };
+
+  onSuccessChange = (successChecked) => {
+    this.setState({ successChecked });
+  };
+
+  onInfoChange = (infoChecked) => {
+    this.setState({ infoChecked });
+  };
+
+  onWarningChange = (warningChecked) => {
+    this.setState({ warningChecked });
+  };
+
+  onDangerChange = (dangerChecked) => {
+    this.setState({ dangerChecked });
+  };
+
+  onBasicChange = (basicChecked) => {
+    this.setState({ basicChecked });
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.primaryChecked}
+          text='Primary'
+          status='primary'
+          onChange={this.onPrimaryChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.successChecked}
+          text='Success'
+          status='success'
+          onChange={this.onSuccessChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.infoChecked}
+          text='Info'
+          status='info'
+          onChange={this.onInfoChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.warningChecked}
+          text='Warning'
+          status='warning'
+          onChange={this.onWarningChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.dangerChecked}
+          text='Danger'
+          status='danger'
+          onChange={this.onDangerChange}
+        />
+        <Toggle
+          style={styles.toggle}
+          checked={this.state.basicChecked}
+          text='Basic'
+          status='basic'
+          onChange={this.onBasicChange}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  toggle: {
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/toggle/toggleWithText.component.tsx b/src/playground/src/ui/screen/showcases/toggle/toggleWithText.component.tsx
new file mode 100644
index 000000000..2cd7674c1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/toggle/toggleWithText.component.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Toggle } from 'react-native-ui-kitten';
+
+export class ToggleWithTextShowcase extends React.Component {
+
+  state = {
+    checked: false,
+  };
+
+  onChange = (checked) => {
+    this.setState({ checked });
+  };
+
+  render() {
+    return (
+      <Toggle
+        checked={this.state.checked}
+        text='Place your Text'
+        onChange={this.onChange}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/tooltip/index.ts b/src/playground/src/ui/screen/showcases/tooltip/index.ts
new file mode 100644
index 000000000..47b2ad0a3
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tooltip/index.ts
@@ -0,0 +1,5 @@
+export { TooltipInlineStylingShowcase } from './tooltipInlineStyling.component';
+export { TooltipSimpleUsageShowcase } from './tooltipSimpleUsage.component';
+export { TooltipWithExternalSourceIconShowcase } from './tooltipWithExternalSourceIcon.component';
+export { TooltipWithIconShowcase } from './tooltipWithIcon.component';
+export { TooltipPlacementShowcase } from './tooltipPlacement.component';
diff --git a/src/playground/src/ui/screen/showcases/tooltip/tooltipInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/tooltip/tooltipInlineStyling.component.tsx
new file mode 100644
index 000000000..beceb685c
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tooltip/tooltipInlineStyling.component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Tooltip,
+} from 'react-native-ui-kitten';
+
+export class TooltipInlineStylingShowcase extends React.Component {
+
+  state = {
+    tooltipVisible: false,
+  };
+
+  onToggleButtonPress = () => {
+    const tooltipVisible = !this.state.tooltipVisible;
+    this.setState({ tooltipVisible });
+  };
+
+  render() {
+    return (
+      <Tooltip
+        visible={this.state.tooltipVisible}
+        text={'Hi! I\'m a Tooltip'}
+        textStyle={styles.tooltipText}
+        onBackdropPress={this.onToggleButtonPress}>
+        <Button onPress={this.onToggleButtonPress}>
+          TOGGLE TOOLTIP
+        </Button>
+      </Tooltip>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tooltipText: {
+    color: 'white',
+    fontSize: 18,
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/tooltip/tooltipPlacement.component.tsx b/src/playground/src/ui/screen/showcases/tooltip/tooltipPlacement.component.tsx
new file mode 100644
index 000000000..f497adb55
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tooltip/tooltipPlacement.component.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+} from 'react-native';
+import {
+  Tooltip,
+  Button,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class TooltipPlacementShowcase extends React.Component {
+
+  state = {
+    visible: false,
+    placement: { text: 'top' },
+  };
+
+  placements = [
+    { text: 'top' },
+    { text: 'top start' },
+    { text: 'top end' },
+    { text: 'left' },
+    { text: 'left start' },
+    { text: 'left end' },
+    { text: 'right' },
+    { text: 'right start' },
+    { text: 'right end' },
+    { text: 'bottom' },
+    { text: 'bottom start' },
+    { text: 'bottom end' },
+  ];
+
+  setVisible = () => {
+    const visible = !this.state.visible;
+
+    this.setState({ visible });
+  };
+
+  setPlacement = (placement) => {
+    this.setState({ placement });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Select
+          label='Select Tooltip Placement'
+          data={this.placements}
+          selectedOption={this.state.placement}
+          onSelect={this.setPlacement}
+        />
+        <View style={styles.subContainer}>
+          <Tooltip
+            visible={this.state.visible}
+            placement={this.state.placement.text}
+            text='Hi! This is tooltip.'
+            onBackdropPress={this.setVisible}>
+            <Button
+              size='giant'
+              onPress={this.setVisible}>
+              SHOW TOOLTIP
+            </Button>
+          </Tooltip>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  subContainer: {
+    height: 400,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    width: 150,
+  },
+  select: {
+    position: 'absolute',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/tooltip/tooltipSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/tooltip/tooltipSimpleUsage.component.tsx
new file mode 100644
index 000000000..867e11ae0
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tooltip/tooltipSimpleUsage.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  Button,
+  Tooltip,
+} from 'react-native-ui-kitten';
+
+export class TooltipSimpleUsageShowcase extends React.Component {
+
+  state = {
+    tooltipVisible: false,
+  };
+
+  onToggleButtonPress = () => {
+    const tooltipVisible = !this.state.tooltipVisible;
+    this.setState({ tooltipVisible });
+  };
+
+  render() {
+    return (
+      <Tooltip
+        visible={this.state.tooltipVisible}
+        text={'Hi! I\'m a Tooltip'}
+        onBackdropPress={this.onToggleButtonPress}>
+        <Button onPress={this.onToggleButtonPress}>
+          TOGGLE TOOLTIP
+        </Button>
+      </Tooltip>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/tooltip/tooltipWithExternalSourceIcon.component.tsx b/src/playground/src/ui/screen/showcases/tooltip/tooltipWithExternalSourceIcon.component.tsx
new file mode 100644
index 000000000..1a296fb85
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tooltip/tooltipWithExternalSourceIcon.component.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Image } from 'react-native';
+import {
+  Button,
+  Tooltip,
+} from 'react-native-ui-kitten';
+
+const InfoIcon = (style) => (
+  <Image
+    style={style}
+    source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/info.png' }}
+  />
+);
+
+export class TooltipWithExternalSourceIconShowcase extends React.Component {
+
+  state = {
+    tooltipVisible: false,
+  };
+
+  onToggleButtonPress = () => {
+    const tooltipVisible = !this.state.tooltipVisible;
+    this.setState({ tooltipVisible });
+  };
+
+  render() {
+    return (
+      <Tooltip
+        visible={this.state.tooltipVisible}
+        text={'Hi! I\'m a Tooltip'}
+        icon={InfoIcon}
+        onBackdropPress={this.onToggleButtonPress}>
+        <Button onPress={this.onToggleButtonPress}>
+          TOGGLE TOOLTIP
+        </Button>
+      </Tooltip>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/tooltip/tooltipWithIcon.component.tsx b/src/playground/src/ui/screen/showcases/tooltip/tooltipWithIcon.component.tsx
new file mode 100644
index 000000000..26e1f95d7
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/tooltip/tooltipWithIcon.component.tsx
@@ -0,0 +1,41 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Button,
+  Icon,
+  Tooltip,
+} from 'react-native-ui-kitten';
+
+const InfoIcon = (style) => (
+  <Icon {...style} name='info'/>
+);
+
+export class TooltipWithIconShowcase extends React.Component {
+
+  state = {
+    tooltipVisible: false,
+  };
+
+  onToggleButtonPress = () => {
+    const tooltipVisible = !this.state.tooltipVisible;
+    this.setState({ tooltipVisible });
+  };
+
+  render() {
+    return (
+      <Tooltip
+        visible={this.state.tooltipVisible}
+        text={'Hi! I\'m a Tooltip'}
+        icon={InfoIcon}
+        onBackdropPress={this.onToggleButtonPress}>
+        <Button onPress={this.onToggleButtonPress}>
+          TOGGLE TOOLTIP
+        </Button>
+      </Tooltip>
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/index.ts b/src/playground/src/ui/screen/showcases/topNavigation/index.ts
new file mode 100644
index 000000000..fad4dd3e3
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/index.ts
@@ -0,0 +1,8 @@
+export { TopNavigationActionExternalSourceIconShowcase } from './topNavigationActionExternalSourceIcon.component';
+export { TopNavigationActionInlineStylingShowcase } from './topNavigationActionInlineStyling.component';
+export { TopNavigationActionsShowcase } from './topNavigationActions.component';
+export { TopNavigationActionSimpleUsageShowcase } from './topNavigationActionSimpleUsage.component';
+export { TopNavigationAlignmentsShowcase } from './topNavigationAlignments.component';
+export { TopNavigationInlineStylingShowcase } from './topNavigationInlineStyling.component';
+export { TopNavigationSimpleUsageShowcase } from './topNavigationSimpleUsage.component';
+export { TopNavigationWithMenuShowcase } from './topNavigationWithMenu.component';
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionExternalSourceIcon.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionExternalSourceIcon.component.tsx
new file mode 100644
index 000000000..04aa4774f
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionExternalSourceIcon.component.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { TopNavigationAction } from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Image
+    style={style}
+    source={{uri: 'https://akveo.github.io/eva-icons/fill/png/128/arrow-back.png'}}
+  />
+);
+
+export const TopNavigationActionExternalSourceIconShowcase = () => (
+  <TopNavigationAction icon={BackIcon}/>
+);
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionInlineStyling.component.tsx
new file mode 100644
index 000000000..e833d5773
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionInlineStyling.component.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Icon,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const EditIcon = (style) => (
+  <Icon {...style} name='edit' />
+);
+
+export const TopNavigationActionInlineStylingShowcase = () => (
+  <TopNavigationAction
+    style={styles.action}
+    icon={EditIcon}
+  />
+);
+
+const styles = StyleSheet.create({
+  action: { marginHorizontal: 4 },
+});
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionSimpleUsage.component.tsx
new file mode 100644
index 000000000..55cc408f9
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActionSimpleUsage.component.tsx
@@ -0,0 +1,18 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Icon {...style} name='arrow-back'/>
+);
+
+export const TopNavigationActionSimpleUsageShowcase = () => (
+  <TopNavigationAction icon={BackIcon} />
+);
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActions.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActions.component.tsx
new file mode 100644
index 000000000..6c5bc00bb
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationActions.component.tsx
@@ -0,0 +1,58 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  TopNavigation,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Icon {...style} name='arrow-back'/>
+);
+
+const EditIcon = (style) => (
+  <Icon {...style} name='edit'/>
+);
+
+const MenuIcon = (style) => (
+  <Icon {...style} name='more-vertical'/>
+);
+
+const BackAction = (props) => (
+  <TopNavigationAction {...props} icon={BackIcon}/>
+);
+
+const EditAction = (props) => (
+  <TopNavigationAction {...props} icon={EditIcon}/>
+);
+
+const MenuAction = (props) => (
+  <TopNavigationAction {...props} icon={MenuIcon}/>
+);
+
+export const TopNavigationActionsShowcase = () => {
+
+  const onBackPress = () => {
+  };
+
+  const renderLeftControl = () => (
+    <BackAction onPress={onBackPress}/>
+  );
+
+  const renderRightControls = () => [
+    <EditAction/>,
+    <MenuAction/>,
+  ];
+
+  return (
+    <TopNavigation
+      title='Application Title'
+      leftControl={renderLeftControl()}
+      rightControls={renderRightControls()}
+    />
+  );
+};
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationAlignments.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationAlignments.component.tsx
new file mode 100644
index 000000000..b2c726c2a
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationAlignments.component.tsx
@@ -0,0 +1,35 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  Layout,
+  TopNavigation,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Icon {...style} name='arrow-back' />
+);
+
+const BackAction = () => (
+  <TopNavigationAction icon={BackIcon}/>
+);
+
+export const TopNavigationAlignmentsShowcase = () => (
+  <Layout>
+    <TopNavigation
+      title='Start'
+      alignment='start'
+      leftControl={BackAction()}
+    />
+    <TopNavigation
+      title='Center'
+      alignment='center'
+      leftControl={BackAction()}
+    />
+  </Layout>
+);
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationInlineStyling.component.tsx
new file mode 100644
index 000000000..7e18e5bbc
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationInlineStyling.component.tsx
@@ -0,0 +1,37 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Icon,
+  TopNavigation,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Icon {...style} name='arrow-back' />
+);
+
+const BackAction = () => (
+  <TopNavigationAction icon={BackIcon}/>
+);
+
+export const TopNavigationInlineStylingShowcase = () => (
+  <TopNavigation
+    style={styles.topNavigation}
+    title='Title'
+    subtitle='Subtitle'
+    leftControl={BackAction()}
+    titleStyle={styles.title}
+    subtitleStyle={styles.subtitle}
+  />
+);
+
+const styles = StyleSheet.create({
+  topNavigation: { backgroundColor: '#1A2138' },
+  title: { color: '#EDF1F7' },
+  subtitle: { color: '#C5CEE0' },
+});
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationSimpleUsage.component.tsx
new file mode 100644
index 000000000..1e7801209
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationSimpleUsage.component.tsx
@@ -0,0 +1,26 @@
+/**
+ * IMPORTANT: To use Icon component make sure to follow this guide:
+ * https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons
+ */
+
+import React from 'react';
+import {
+  Icon,
+  TopNavigation,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Icon {...style} name='arrow-back' />
+);
+
+const BackAction = () => (
+  <TopNavigationAction icon={BackIcon}/>
+);
+
+export const TopNavigationSimpleUsageShowcase = () => (
+  <TopNavigation
+    leftControl={BackAction()}
+    title='Application Title'
+  />
+);
diff --git a/src/playground/src/ui/screen/showcases/topNavigation/topNavigationWithMenu.component.tsx b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationWithMenu.component.tsx
new file mode 100644
index 000000000..5f55b8cc7
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/topNavigation/topNavigationWithMenu.component.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Icon,
+  Layout,
+  OverflowMenu,
+  TopNavigation,
+  TopNavigationAction,
+} from 'react-native-ui-kitten';
+
+const BackIcon = (style) => (
+  <Icon {...style} name='arrow-back'/>
+);
+
+const MenuIcon = (style) => (
+  <Icon {...style} name='more-vertical'/>
+);
+
+const InfoIcon = (style) => (
+  <Icon {...style} name='info'/>
+);
+
+const LogoutIcon = (style) => (
+  <Icon {...style} name='log-out'/>
+);
+
+export class TopNavigationWithMenuShowcase extends React.Component {
+
+  state = {
+    menuVisible: false,
+  };
+
+  menuData = [
+    { title: 'About', icon: InfoIcon },
+    { title: 'Logout', icon: LogoutIcon },
+  ];
+
+  onMenuActionPress = () => {
+    const menuVisible = !this.state.menuVisible;
+    this.setState({ menuVisible });
+  };
+
+  onMenuItemSelect = (index) => {
+    // Handle Item Select
+
+    this.setState({ menuVisible: false });
+  };
+
+  renderMenuAction = () => (
+    <OverflowMenu
+      visible={this.state.menuVisible}
+      data={this.menuData}
+      placement='bottom end'
+      onSelect={this.onMenuItemSelect}
+      onBackdropPress={this.onMenuActionPress}>
+      <TopNavigationAction
+        icon={MenuIcon}
+        onPress={this.onMenuActionPress}
+      />
+    </OverflowMenu>
+  );
+
+  renderBackAction = () => (
+    <TopNavigationAction icon={BackIcon} />
+  );
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <TopNavigation
+          title='Application Title'
+          leftControl={this.renderBackAction()}
+          rightControls={this.renderMenuAction()}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 192,
+  },
+});
+
diff --git a/src/playground/src/ui/screen/showcases/viewPager/index.ts b/src/playground/src/ui/screen/showcases/viewPager/index.ts
new file mode 100644
index 000000000..aef6e74d1
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/viewPager/index.ts
@@ -0,0 +1,3 @@
+export { ViewPagerInlineStylingShowcase } from './viewPagerInlineStyling.component';
+export { ViewPagerLazyLoadingShowcase } from './viewPagerLazyLoading.component';
+export { ViewPagerSimpleUsageShowcase } from './viewPagerSimpleUsage.component';
diff --git a/src/playground/src/ui/screen/showcases/viewPager/viewPagerInlineStyling.component.tsx b/src/playground/src/ui/screen/showcases/viewPager/viewPagerInlineStyling.component.tsx
new file mode 100644
index 000000000..7b0a8987f
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/viewPager/viewPagerInlineStyling.component.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  ViewPager,
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class ViewPagerInlineStylingShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <ViewPager
+        style={styles.container}
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onSelect}>
+        <Layout
+          level='2'
+          style={styles.tab}>
+          <Text category='h5'>Tab 1</Text>
+        </Layout>
+        <Layout
+          level='2'
+          style={styles.tab}>
+          <Text category='h5'>Tab 2</Text>
+        </Layout>
+      </ViewPager>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+  },
+  tab: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/viewPager/viewPagerLazyLoading.component.tsx b/src/playground/src/ui/screen/showcases/viewPager/viewPagerLazyLoading.component.tsx
new file mode 100644
index 000000000..1f136c31b
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/viewPager/viewPagerLazyLoading.component.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  ViewPager,
+  Layout,
+  Text,
+} from 'react-native-ui-kitten';
+
+export class ViewPagerLazyLoadingShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onSelect = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  shouldLoadComponent = (index) => {
+    return index === this.state.selectedIndex;
+  };
+
+  render() {
+    return (
+      <ViewPager
+        selectedIndex={this.state.selectedIndex}
+        shouldLoadComponent={this.shouldLoadComponent}
+        onSelect={this.onSelect}>
+        <Layout
+          level='2'
+          style={styles.tab}>
+          <Text category='h5'>Tab 1</Text>
+        </Layout>
+        <Layout
+          level='2'
+          style={styles.tab}>
+          <Text category='h5'>Tab 2</Text>
+        </Layout>
+      </ViewPager>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tab: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/showcases/viewPager/viewPagerSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/viewPager/viewPagerSimpleUsage.component.tsx
new file mode 100644
index 000000000..3a9e92df4
--- /dev/null
+++ b/src/playground/src/ui/screen/showcases/viewPager/viewPagerSimpleUsage.component.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Text,
+  ViewPager,
+} from 'react-native-ui-kitten';
+
+export class ViewPagerSimpleUsageShowcase extends React.Component {
+
+  state = {
+    selectedIndex: 0,
+  };
+
+  onIndexChange = (selectedIndex) => {
+    this.setState({ selectedIndex });
+  };
+
+  render() {
+    return (
+      <ViewPager
+        selectedIndex={this.state.selectedIndex}
+        onSelect={this.onIndexChange}>
+        <Layout
+          level='2'
+          style={styles.tab}>
+          <Text category='h5'>Tab 1</Text>
+        </Layout>
+        <Layout
+          level='2'
+          style={styles.tab}>
+          <Text category='h5'>Tab 2</Text>
+        </Layout>
+      </ViewPager>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tab: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/src/playground/tsconfig.json b/src/playground/tsconfig.json
new file mode 100644
index 000000000..1bca0a243
--- /dev/null
+++ b/src/playground/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  }
+}
diff --git a/src/playground/webpack.config.js b/src/playground/webpack.config.js
index 7ced67c34..e3af6dcf1 100644
--- a/src/playground/webpack.config.js
+++ b/src/playground/webpack.config.js
@@ -1,10 +1,10 @@
 const path = require('path');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const createExpoWebpackConfigAsync = require('@expo/webpack-config');
-
 const aliases = {
   'react-native-web': path.resolve(__dirname, './node_modules/react-native-web'),
+  '@babel/runtime': path.resolve(__dirname, './node_modules/@babel/runtime'),
 };
-
 const babelLoaderRules = {
   test: /\.tsx?$/,
   loader: 'babel-loader',
@@ -12,19 +12,24 @@ const babelLoaderRules = {
     presets: ['babel-preset-expo'],
   },
 };
-
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
-
   config.resolve.alias = {
     ...config.resolve.alias,
     ...aliases,
   };
-
+  config.resolve.plugins = config.resolve.plugins.filter(plugin => {
+    return !(plugin instanceof ModuleScopePlugin);
+  });
   config.module.rules = [
     ...config.module.rules,
     babelLoaderRules,
   ];
 
+  config.output = {
+    ...config.output,
+    publicPath: '',
+  };
+
   return config;
 };