From ccff9325647edc617411727f9bfc9713288083ad Mon Sep 17 00:00:00 2001
From: Monte Thakkar <mthakkar@mail.sfsu.edu>
Date: Thu, 12 Jan 2017 13:36:22 +0530
Subject: [PATCH] updated tab bar examples in readme

---
 Readme.MD | 80 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 59 insertions(+), 21 deletions(-)

diff --git a/Readme.MD b/Readme.MD
index 95f086c9a0..87f385dff4 100644
--- a/Readme.MD
+++ b/Readme.MD
@@ -51,7 +51,7 @@ import {
 - [x] [Checkboxes](https://github.com/react-native-community/react-native-elements#checkboxes)
 - [x] [List Element](https://github.com/react-native-community/react-native-elements#lists)
 - [x] [Linked List Element](https://github.com/react-native-community/react-native-elements#lists)
-- [x] [Cross Platform Tab Bar](https://github.com/react-native-community/react-native-elements#cross-platform-tab-bar)
+- [x] [Tab Bar Component](https://github.com/react-native-community/react-native-elements#tab-bar-component)
 - [x] HTML style headings (h1, h2, etc...)
 - [x] [Card component](https://github.com/react-native-community/react-native-elements#card)
 - [x] [Pricing Component](https://github.com/react-native-community/react-native-elements#pricing-component)
@@ -633,15 +633,22 @@ import { SearchBar } from 'react-native-elements'
 | underlineColorAndroid | transparent | string (color) | specify other than the default transparent underline color |
 
 
-## Cross Platform Tab Bar
+## Tab Bar Component
 
-![Cross Platform Tab Bar](http://i.imgur.com/61lOjCy.png)
+![Tab Bar Component](http://i.imgur.com/61lOjCy.png)
 
 > This component implements the [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) from [Exponent](https://getexponent.com/). Check out [Exponent](https://getexponent.com/) if you haven't already!
 
 ```js
 import { Tabs, Tab, Icon } from 'react-native-elements'
 
+constructor() {
+  super()
+  this.state = {
+    selectedTab: 'profile',
+  }
+}
+
 changeTab (selectedTab) {
   this.setState({selectedTab})
 }
@@ -650,32 +657,63 @@ const { selectedTab } = this.state
 
 <Tabs>
   <Tab
-    tabStyle={selectedTab !== 'home' && { styles.tabSelectedstyle }}
-    titleStyle={[styles.titleStyle]}
-    selectedTitleStyle={[styles.titleSelected]}
-    selected={selectedTab === 'home'}
-    title={selectedTab === 'home' ? 'HOME' : null}
-    renderIcon={() => <Icon name='whatshot' size={26} />}
-    renderSelectedIcon={() => <Icon name='whatshot' size={26} />}
-    onPress={() => this.changeTab('home')}>
-    <Home />
+    titleStyle={{fontWeight: 'bold', fontSize: 10}}
+    selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
+    selected={selectedTab === 'feed'}
+    title={selectedTab === 'feed' ? 'FEED' : null}
+    renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
+    renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
+    onPress={() => this.changeTab('feed')}>
+    <Feed />
   </Tab>
   <Tab
-    tabStyle={selectedTab !== 'about' && { styles.tabSelectedstyle }}
-    titleStyle={[styles.titleStyle]}
-    selectedTitleStyle={[styles.titleSelected]}
-    selected={selectedTab === 'about'}
-    title={selectedTab === 'about' ? 'ABOUT' : null}
-    renderIcon={() => <Icon name='important-devices' size={26} />}
-    renderSelectedIcon={() => <Icon name='important-devices' size={26} />}
-    onPress={() => this.changeTab('about')}>
-    <About />
+    titleStyle={{fontWeight: 'bold', fontSize: 10}}
+    selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
+    selected={selectedTab === 'profile'}
+    title={selectedTab === 'profile' ? 'PROFILE' : null}
+    renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
+    renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
+    onPress={() => this.changeTab('profile')}>
+    <Profile />
   </Tab>
   /* ... more tabs here */
 </Tabs>
 
 ```
 
+### Hide Tab Bar
+
+```js
+constructor () {
+  super()
+  this.state = {
+    hideTabBar: true,
+  }
+}
+
+hideTabBar(value) {
+  this.setState({
+    hideTabBar: value
+  });
+}
+
+let tabBarStyle = {};
+let sceneStyle = {};
+if (this.state.hideTabBar) {
+  tabBarStyle.height = 0;
+  tabBarStyle.overflow = 'hidden';
+  sceneStyle.paddingBottom = 0;
+}
+
+<Tabs hidesTabTouch tabBarStyle={tabBarStyle} sceneStyle={sceneStyle}>
+  <Tab>
+    <LoginView hideTabBar={this.hideTabBar.bind(this)} />
+  </Tab>
+  /* ... tabs here */
+</Tabs>
+
+```
+
 ### Tabs Props
 
 | prop | default | type | description |