mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 17:45:59 +00:00
ddc374fac8
Summary: Hey, I've created a PR a few weeks ago #7264. It got merged in and then I received some emails and got mentioned in a few issues that it doesn't use renderAsOriginal prop on selectedIcon. Instead the app would use tint color. The problem can be seen here #7467. I've now added a method in TabBarItem that sets selectedIcon to renderAsOriginal if the prop is set. I added a "relay" icon to UIExplorer TabBarIOS example so you can see the item is now rendered in color as the image supplied. Oh and also should this PR be made from master. Had to work on this issue from 0.27 because the master was broken for me. Closes https://github.com/facebook/react-native/pull/7709 Differential Revision: D3339795 fbshipit-source-id: d8d4699bb617ecae8996a6627f3774c6473c19e0
115 lines
4.4 KiB
JavaScript
115 lines
4.4 KiB
JavaScript
/**
|
|
* The examples provided by Facebook are for non-commercial testing and
|
|
* evaluation purposes only.
|
|
*
|
|
* Facebook reserves all rights not expressly granted.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
|
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
|
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
|
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*
|
|
* @flow
|
|
*/
|
|
'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==';
|
|
|
|
var TabBarExample = React.createClass({
|
|
statics: {
|
|
title: '<TabBarIOS>',
|
|
description: 'Tab-based navigation.',
|
|
},
|
|
|
|
displayName: 'TabBarExample',
|
|
|
|
getInitialState: function() {
|
|
return {
|
|
selectedTab: 'redTab',
|
|
notifCount: 0,
|
|
presses: 0,
|
|
};
|
|
},
|
|
|
|
_renderContent: function(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: function() {
|
|
return (
|
|
<TabBarIOS
|
|
unselectedTintColor="yellow"
|
|
tintColor="white"
|
|
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}
|
|
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;
|