Skip to content

Commit

Permalink
updated tab bar examples in readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Monte Thakkar committed Jan 12, 2017
1 parent ccc8412 commit ccff932
Showing 1 changed file with 59 additions and 21 deletions.
80 changes: 59 additions & 21 deletions Readme.MD
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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})
}
Expand All @@ -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 |
Expand Down

0 comments on commit ccff932

Please sign in to comment.