Skip to content

Commit 255b5ea

Browse files
Sankhadeep RoySankhadeep Roy
Sankhadeep Roy
authored and
Sankhadeep Roy
committed
tab-bar fix and button margin changes
1 parent 6d4b8cf commit 255b5ea

File tree

3 files changed

+48
-44
lines changed

3 files changed

+48
-44
lines changed

‎Components/Widgets/Button.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React from 'react';
55
import { Text, TouchableOpacity } from 'react-native';
66
import NativeBaseComponent from '../Base/NativeBaseComponent';
77
import computeProps from '../../Utils/computeProps';
8+
import IconNB from './Icon';
89
import Icon from './Icon';
910
import _ from 'lodash';
1011

@@ -69,6 +70,7 @@ export default class Button extends NativeBaseComponent {
6970
var btnType = {
7071
paddingRight : 5,
7172
paddingLeft : 3,
73+
marginLeft: (this.iconPresent() && !this.props.iconRight) ? this.getTheme().iconMargin : 0,
7274
color:
7375
((this.props.bordered) && (this.props.primary)) ? this.getTheme().btnPrimaryBg :
7476
((this.props.bordered) && (this.props.success)) ? this.getTheme().btnSuccessBg :
@@ -110,21 +112,31 @@ export default class Button extends NativeBaseComponent {
110112

111113
return computeProps(icon.props, defaultProps);
112114
}
113-
115+
iconPresent() {
116+
var iconComponentPresent = false;
117+
React.Children.forEach(this.props.children, function (child) {
118+
if(child.type == Icon)
119+
iconComponentPresent = true;
120+
})
121+
return iconComponentPresent;
122+
}
114123
renderChildren() {
115-
116124
if(typeof this.props.children == "string") {
117125
return <Text style={this.getTextStyle()}>{this.props.children}</Text>
118126
}
119127

128+
else if(this.props.children.type == IconNB) {
129+
return React.cloneElement(this.props.children, this.getIconProps(this.props.children));
130+
}
131+
120132
else if(Array.isArray(this.props.children)) {
121133
var newChildren = [];
122134

123135
var childrenArray = React.Children.toArray(this.props.children);
124136

125137
var iconElement = [];
126138
iconElement = _.remove(childrenArray, function(item) {
127-
if(item.type == Icon) {
139+
if(item.type == IconNB) {
128140
return true;
129141
}
130142
});
@@ -143,7 +155,7 @@ export default class Button extends NativeBaseComponent {
143155
}
144156

145157
else
146-
return React.cloneElement(this.props.children, this.getIconProps(this.props.children));
158+
return React.cloneElement(this.props.children);
147159

148160
}
149161

‎Components/vendor/react-native-scrollable-tab-view/DefaultTabBar.js‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,46 +13,41 @@ import {
1313
} from 'react-native';
1414

1515
var deviceWidth = Dimensions.get('window').width;
16-
var background = require("./../../Themes/light").tabBgColor;
17-
var underlay = require("./../../Themes/light").darkenHeader;
18-
var textColor = require("./../../Themes/light").tabTextColor;
19-
20-
console.log("textColor", textColor);
21-
22-
var styles = StyleSheet.create({
23-
tab: {
24-
flex: 1,
25-
alignItems: 'center',
26-
justifyContent: 'center',
27-
backgroundColor: background
28-
},
29-
30-
tabs: {
31-
height: 45,
32-
flexDirection: 'row',
33-
justifyContent: 'space-around',
34-
borderWidth: 1,
35-
borderTopWidth: 0,
36-
borderLeftWidth: 0,
37-
borderRightWidth: 0,
38-
borderBottomColor: '#ccc',
39-
},
40-
});
4116

4217
export default class DefaultTabBar extends NativeBaseComponent {
43-
static propTypes = {
44-
goToPage: React.PropTypes.func,
45-
activeTab: React.PropTypes.number,
46-
tabs: React.PropTypes.array
47-
}
18+
getInitialStyle() {
19+
return {
20+
tab: {
21+
flex: 1,
22+
alignItems: 'center',
23+
justifyContent: 'center',
24+
backgroundColor: this.getTheme().tabBgColor
25+
},
26+
tabs: {
27+
height: 45,
28+
flexDirection: 'row',
29+
justifyContent: 'space-around',
30+
borderWidth: 1,
31+
borderTopWidth: 0,
32+
borderLeftWidth: 0,
33+
borderRightWidth: 0,
34+
borderBottomColor: '#ccc',
35+
}
36+
}
37+
}
38+
static propTypes = {
39+
goToPage: React.PropTypes.func,
40+
activeTab: React.PropTypes.number,
41+
tabs: React.PropTypes.array
42+
}
4843

4944
renderTabOption(name, page) {
5045
var isTabActive = this.props.activeTab === page;
5146

5247
return (
53-
<TouchableHighlight underlayColor={underlay} style={[styles.tab]} key={name} onPress={() => this.props.goToPage(page)}>
48+
<TouchableHighlight underlayColor={this.getTheme().darkenHeader} style={[this.getInitialStyle().tab]} key={name} onPress={() => this.props.goToPage(page)}>
5449
<View>
55-
<Text style={{color: isTabActive ? textColor : textColor, fontWeight: isTabActive ? 'bold' : 'normal'}}>{name}</Text>
50+
<Text style={{color: isTabActive ? this.getTheme().tabTextColor : this.getTheme().tabTextColor, fontWeight: isTabActive ? 'bold' : 'normal'}}>{name}</Text>
5651
</View>
5752
</TouchableHighlight>
5853
);
@@ -64,7 +59,7 @@ export default class DefaultTabBar extends NativeBaseComponent {
6459
position: 'absolute',
6560
width: deviceWidth / numberOfTabs,
6661
height: 4,
67-
backgroundColor: textColor,
62+
backgroundColor: this.getTheme().tabTextColor,
6863
bottom: 0,
6964
};
7065

@@ -73,7 +68,7 @@ export default class DefaultTabBar extends NativeBaseComponent {
7368
});
7469

7570
return (
76-
<View style={styles.tabs}>
71+
<View style={this.getInitialStyle().tabs}>
7772
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
7873
<Animated.View style={[tabUnderlineStyle, {left}]} />
7974
</View>

‎Components/vendor/react-native-scrollable-tab-view/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,10 @@ export default class ScrollableTabView extends NativeBaseComponent {
2323
springFriction: 10
2424
};
2525
constructor(props) {
26-
super(props);
27-
console.log(this.props, "props awdw");
26+
super(props);
2827
var currentPage = this.props.initialPage || 0;
2928
this.state = {
30-
currentPage: currentPage,
29+
currentPage: currentPage,
3130
scrollValue: new Animated.Value(currentPage)
3231
}
3332
}
@@ -79,8 +78,7 @@ export default class ScrollableTabView extends NativeBaseComponent {
7978
});
8079
}
8180

82-
goToPage(pageNumber) {
83-
console.log(this, "this jd");
81+
goToPage(pageNumber) {
8482
this.props.onChangeTab && this.props.onChangeTab({
8583
i: pageNumber, ref: this.props.children[pageNumber]
8684
});
@@ -132,4 +130,3 @@ export default class ScrollableTabView extends NativeBaseComponent {
132130
);
133131
}
134132
}
135-

0 commit comments

Comments
 (0)