TabBarIOS #

Props #

barTintColor?: $FlowFixMe #

Background color of the tab bar

itemPositioning?: [object Object] | [object Object] | [object Object] #

Specifies tab bar item positioning. Available values are: - fill - distributes items across the entire width of the tab bar - center - centers item in the available tab bar space - auto (default) - distributes items dynamically according to the user interface idiom. In a horizontally compact environment (e.g. iPhone 5) this value defaults to fill, in a horizontally regular one (e.g. iPad) it defaults to center.

style?: $FlowFixMe #

tintColor?: $FlowFixMe #

Color of the currently selected tab icon

translucent?: boolean #

A Boolean value that indicates whether the tab bar is translucent

unselectedItemTintColor?: $FlowFixMe #

Color of unselected tab icons. Available since iOS 10.

unselectedTintColor?: $FlowFixMe #

Color of text on unselected tabs

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { StyleSheet, TabBarIOS, Text, View, } = ReactNative; var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; class TabBarExample extends React.Component { static title = '<TabBarIOS>'; static description = 'Tab-based navigation.'; static displayName = 'TabBarExample'; state = { selectedTab: 'redTab', notifCount: 0, presses: 0, }; _renderContent = (color: string, pageText: string, num?: number) => { return ( <View style={[styles.tabContent, {backgroundColor: color}]}> <Text style={styles.tabText}>{pageText}</Text> <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text> </View> ); }; render() { return ( <TabBarIOS unselectedTintColor="yellow" tintColor="white" unselectedItemTintColor="red" barTintColor="darkslateblue"> <TabBarIOS.Item title="Blue Tab" icon={{uri: base64Icon, scale: 3}} selected={this.state.selectedTab === 'blueTab'} onPress={() => { this.setState({ selectedTab: 'blueTab', }); }}> {this._renderContent('#414A8C', 'Blue Tab')} </TabBarIOS.Item> <TabBarIOS.Item systemIcon="history" badge={this.state.notifCount > 0 ? this.state.notifCount : undefined} badgeColor="black" selected={this.state.selectedTab === 'redTab'} onPress={() => { this.setState({ selectedTab: 'redTab', notifCount: this.state.notifCount + 1, }); }}> {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)} </TabBarIOS.Item> <TabBarIOS.Item icon={require('./flux.png')} selectedIcon={require('./relay.png')} renderAsOriginal title="More" selected={this.state.selectedTab === 'greenTab'} onPress={() => { this.setState({ selectedTab: 'greenTab', presses: this.state.presses + 1 }); }}> {this._renderContent('#21551C', 'Green Tab', this.state.presses)} </TabBarIOS.Item> </TabBarIOS> ); } } var styles = StyleSheet.create({ tabContent: { flex: 1, alignItems: 'center', }, tabText: { color: 'white', margin: 50, }, }); module.exports = TabBarExample;