mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 09:35:48 +00:00
50c2467905
Summary: Hi, This PR Solves this issue #3083. This PR solves the problem of default color on TabBar being always grey. Which looks great if the barTintColor is unchanged. However if we set the barTintColor to something else (like blue in example) text and icons become quite unreadable.  Commit (c206417) - Enable setting color of unselected tabs Solves this issue with a prop (unselectedTintColor) on TabBarIOS to which you just pass a color like you can for barTintColor and tintColor. This leaves us with a result that is on second picture. Notice the color of text on tabs.  Or change it to yellow for demonstrating purposes 
71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule TabBarIOS
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var ColorPropType = require('ColorPropType');
|
|
var React = require('React');
|
|
var StyleSheet = require('StyleSheet');
|
|
var TabBarItemIOS = require('TabBarItemIOS');
|
|
var View = require('View');
|
|
|
|
var requireNativeComponent = require('requireNativeComponent');
|
|
|
|
var TabBarIOS = React.createClass({
|
|
statics: {
|
|
Item: TabBarItemIOS,
|
|
},
|
|
|
|
propTypes: {
|
|
...View.propTypes,
|
|
style: View.propTypes.style,
|
|
/**
|
|
* Color of text on unselected tabs
|
|
*/
|
|
unselectedTintColor: ColorPropType,
|
|
/**
|
|
* Color of the currently selected tab icon
|
|
*/
|
|
tintColor: ColorPropType,
|
|
/**
|
|
* Background color of the tab bar
|
|
*/
|
|
barTintColor: ColorPropType,
|
|
/**
|
|
* A Boolean value that indicates whether the tab bar is translucent
|
|
*/
|
|
translucent: React.PropTypes.bool,
|
|
},
|
|
|
|
render: function() {
|
|
return (
|
|
<RCTTabBar
|
|
style={[styles.tabGroup, this.props.style]}
|
|
unselectedTintColor={this.props.unselectedTintColor}
|
|
tintColor={this.props.tintColor}
|
|
barTintColor={this.props.barTintColor}
|
|
translucent={this.props.translucent !== false}>
|
|
{this.props.children}
|
|
</RCTTabBar>
|
|
);
|
|
}
|
|
});
|
|
|
|
var styles = StyleSheet.create({
|
|
tabGroup: {
|
|
flex: 1,
|
|
}
|
|
});
|
|
|
|
var RCTTabBar = requireNativeComponent('RCTTabBar', TabBarIOS);
|
|
|
|
module.exports = TabBarIOS;
|