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
}
- renderSelectedIcon={() => }
- onPress={() => this.changeTab('home')}>
-
+ titleStyle={{fontWeight: 'bold', fontSize: 10}}
+ selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
+ selected={selectedTab === 'feed'}
+ title={selectedTab === 'feed' ? 'FEED' : null}
+ renderIcon={() => }
+ renderSelectedIcon={() => }
+ onPress={() => this.changeTab('feed')}>
+
}
- renderSelectedIcon={() => }
- onPress={() => this.changeTab('about')}>
-
+ titleStyle={{fontWeight: 'bold', fontSize: 10}}
+ selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
+ selected={selectedTab === 'profile'}
+ title={selectedTab === 'profile' ? 'PROFILE' : null}
+ renderIcon={() => }
+ renderSelectedIcon={() => }
+ onPress={() => this.changeTab('profile')}>
+
/* ... more tabs here */
```
+### 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 here */
+
+
+```
+
### Tabs Props
| prop | default | type | description |