forked from ptomasroos/react-native-scrollable-tab-view
-
Notifications
You must be signed in to change notification settings - Fork 0
/
DefaultTabBar.js
110 lines (101 loc) · 2.91 KB
/
DefaultTabBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const React = require('react')
const ReactNative = require('react-native')
const PropTypes = require('prop-types')
const createReactClass = require('create-react-class')
const { ViewPropTypes, StyleSheet, Text, View, Animated } = ReactNative
const Button = require('./Button')
const DefaultTabBar = createReactClass({
propTypes: {
goToPage: PropTypes.func,
activeTab: PropTypes.number,
tabs: PropTypes.array,
backgroundColor: PropTypes.string,
activeTextColor: PropTypes.string,
inactiveTextColor: PropTypes.string,
textStyle: Text.propTypes.style,
tabStyle: ViewPropTypes.style,
renderTab: PropTypes.func,
underlineStyle: ViewPropTypes.style,
},
getDefaultProps() {
return {
activeTextColor: 'navy',
inactiveTextColor: 'black',
backgroundColor: null,
}
},
renderTabOption(name, page) {},
renderTab(name, page, isTabActive, onPressHandler) {
const { activeTextColor, inactiveTextColor, textStyle } = this.props
const textColor = isTabActive ? activeTextColor : inactiveTextColor
const fontWeight = isTabActive ? 'bold' : 'normal'
return (
<Button
accessibilityLabel={name}
accessibilityTraits="button"
accessible={true}
key={name}
onPress={() => onPressHandler(page)}
style={{ flex: 1 }}
>
<View style={[styles.tab, this.props.tabStyle]}>
<Text style={[{ color: textColor, fontWeight }, textStyle]}>{name}</Text>
</View>
</Button>
)
},
render() {
const containerWidth = this.props.containerWidth
const numberOfTabs = this.props.tabs.length
const tabUnderlineStyle = {
position: 'absolute',
width: containerWidth / numberOfTabs,
height: 4,
backgroundColor: 'navy',
bottom: 0,
}
const translateX = this.props.scrollValue.interpolate({
inputRange: [0, 1],
outputRange: [0, containerWidth / numberOfTabs],
})
return (
<View
style={[styles.tabs, { backgroundColor: this.props.backgroundColor }, this.props.style]}
>
{this.props.tabs.map((name, page) => {
const isTabActive = this.props.activeTab === page
const renderTab = this.props.renderTab || this.renderTab
return renderTab(name, page, isTabActive, this.props.goToPage)
})}
<Animated.View
style={[
tabUnderlineStyle,
{
transform: [{ translateX }],
},
this.props.underlineStyle,
]}
/>
</View>
)
},
})
const styles = StyleSheet.create({
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 10,
},
tabs: {
height: 50,
flexDirection: 'row',
justifyContent: 'space-around',
borderWidth: 1,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderColor: '#ccc',
},
})
module.exports = DefaultTabBar