Skip to content

Commit 1f34ffa

Browse files
iRoachieiRoachie
authored
v4.2.0 #76 
2 parents e7648e0 + a9fcd80 commit 1f34ffa

File tree

9 files changed

+41
-17
lines changed

9 files changed

+41
-17
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,9 @@ const styles = StyleSheet.create({
8282
| prop | default | type | description |
8383
| ------------------------- | ------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
8484
| barColor | #13897b | string | Color of the tab bar |
85+
| barHeight | 48 | number | Height of the tab bar |
8586
| indicatorColor | #fff | string | Color of the indicator |
87+
| indicatorHeight | 2 | number | Height of the indicator
8688
| activeTextColor | #fff | string | Color of the text for the selected tab |
8789
| inactiveTextColor | rgba(255, 255, 255, 0.7) | string | Color of the text for inactive tabs |
8890
| items | none | array(string | element) | The headers for the individual tabs |

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-material-tabs",
3-
"version": "4.1.2",
3+
"version": "4.2.0",
44
"description": "Material Design implementation of Tabs",
55
"keywords": [
66
"react",

‎src/__tests__/__snapshots__/main.test.js.snap

+12
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ exports[`Main should apply custom activeTextStyle to active tab 1`] = `
2323
<View>
2424
<View
2525
barHeight={48}
26+
indicatorHeight={2}
2627
style={
2728
Array [
2829
Object {
@@ -139,6 +140,7 @@ exports[`Main should apply custom activeTextStyle to active tab 1`] = `
139140
</View>
140141
<View
141142
color="#fff"
143+
height={2}
142144
style={
143145
Object {
144146
"backgroundColor": "#fff",
@@ -183,6 +185,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
183185
<View>
184186
<View
185187
barHeight={48}
188+
indicatorHeight={2}
186189
style={
187190
Array [
188191
Object {
@@ -301,6 +304,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
301304
</View>
302305
<View
303306
color="#fff"
307+
height={2}
304308
style={
305309
Object {
306310
"backgroundColor": "#fff",
@@ -345,6 +349,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
345349
<View>
346350
<View
347351
barHeight={48}
352+
indicatorHeight={2}
348353
style={
349354
Array [
350355
Object {
@@ -459,6 +464,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
459464
</View>
460465
<View
461466
color="#fff"
467+
height={2}
462468
style={
463469
Object {
464470
"backgroundColor": "#fff",
@@ -503,6 +509,7 @@ exports[`Main should render scrollable without errors 1`] = `
503509
<View>
504510
<View
505511
barHeight={48}
512+
indicatorHeight={2}
506513
style={
507514
Array [
508515
Object {
@@ -617,6 +624,7 @@ exports[`Main should render scrollable without errors 1`] = `
617624
</View>
618625
<View
619626
color="#fff"
627+
height={2}
620628
style={
621629
Object {
622630
"backgroundColor": "#fff",
@@ -661,6 +669,7 @@ exports[`Main should render without errors 1`] = `
661669
<View>
662670
<View
663671
barHeight={48}
672+
indicatorHeight={2}
664673
style={
665674
Array [
666675
Object {
@@ -775,6 +784,7 @@ exports[`Main should render without errors 1`] = `
775784
</View>
776785
<View
777786
color="#fff"
787+
height={2}
778788
style={
779789
Object {
780790
"backgroundColor": "#fff",
@@ -819,6 +829,7 @@ exports[`Main when items is an array of react elements should render tabs 1`] =
819829
<View>
820830
<View
821831
barHeight={48}
832+
indicatorHeight={2}
822833
style={
823834
Array [
824835
Object {
@@ -919,6 +930,7 @@ exports[`Main when items is an array of react elements should render tabs 1`] =
919930
</View>
920931
<View
921932
color="#fff"
933+
height={2}
922934
style={
923935
Object {
924936
"backgroundColor": "#fff",

‎src/components/Indicator.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ import React from 'react';
22
import { Animated } from 'react-native';
33
import styled from 'styled-components/native';
44

5-
import constants from '../lib/constants';
6-
75
interface BarProps {
86
tabWidth: number;
97
color: string;
8+
height: number;
109
}
1110

1211
const Bar = styled(Animated.View)`
13-
height: ${constants.indicatorHeight};
12+
height: ${(props: BarProps) => props.height};
1413
width: ${(props: BarProps) => props.tabWidth};
1514
position: absolute;
1615
bottom: 0;
@@ -21,13 +20,15 @@ interface IndicatorProps {
2120
color: string;
2221
tabWidth: number;
2322
value: Animated.Value;
23+
height: number;
2424
}
2525

2626
const Indicator = (props: IndicatorProps) => (
2727
<Bar
2828
color={props.color}
2929
style={{ transform: [{ translateX: props.value }] }}
3030
tabWidth={props.tabWidth}
31+
height={props.height}
3132
/>
3233
);
3334

‎src/components/MaterialTabs.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import Indicator from './Indicator';
1414
import { ContentType } from './Tab/Tab';
1515

1616
import { Bar, TabTrack } from '../lib/styles';
17-
import constants from '../lib/constants';
1817

1918
interface Props extends Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> {
2019
allowFontScaling: boolean;
@@ -30,6 +29,7 @@ interface Props extends Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> {
3029
items: ContentType[];
3130
uppercase: boolean;
3231
onChange(index: number): void;
32+
indicatorHeight: number;
3333
}
3434

3535
const getKeyForTab = (item: ContentType) =>
@@ -50,6 +50,7 @@ const MaterialTabs: React.FC<Props> = ({
5050
uppercase,
5151
indicatorColor,
5252
barColor,
53+
indicatorHeight,
5354
}) => {
5455
const [tabWidth, setTabWidth] = useState(0);
5556
const [barWidth, setBarWidth] = useState(0);
@@ -143,7 +144,7 @@ const MaterialTabs: React.FC<Props> = ({
143144
keyboardShouldPersistTaps={keyboardShouldPersistTaps}
144145
scrollEnabled={scrollable}
145146
>
146-
<TabTrack barHeight={barHeight}>
147+
<TabTrack barHeight={barHeight} indicatorHeight={indicatorHeight}>
147148
{items.map((item, idx) => (
148149
<Tab
149150
allowFontScaling={allowFontScaling}
@@ -166,6 +167,7 @@ const MaterialTabs: React.FC<Props> = ({
166167
color={indicatorColor}
167168
value={indicatorPosition}
168169
tabWidth={!scrollable ? tabWidth : barWidth * 0.4}
170+
height={indicatorHeight}
169171
/>
170172
</ScrollView>
171173
</Bar>
@@ -177,13 +179,14 @@ MaterialTabs.defaultProps = {
177179
allowFontScaling: true,
178180
selectedIndex: 0,
179181
barColor: '#13897b',
180-
barHeight: constants.barHeight,
182+
barHeight: 48,
181183
activeTextColor: '#fff',
182184
indicatorColor: '#fff',
183185
inactiveTextColor: 'rgba(255, 255, 255, 0.7)',
184186
scrollable: false,
185187
uppercase: true,
186188
keyboardShouldPersistTaps: 'never',
189+
indicatorHeight: 2,
187190
};
188191

189192
export default MaterialTabs;

‎src/index.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,13 @@ interface TabsProps extends Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> {
8686
* @param index
8787
*/
8888
onChange(index: number): void;
89+
90+
/**
91+
* Height of the indicator
92+
*
93+
* Default is 2
94+
*/
95+
indicatorHeight?: number;
8996
}
9097

9198
export default class MaterialTabs extends React.Component<TabsProps> {}

‎src/lib/constants.ts

-4
This file was deleted.

‎src/lib/styles.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import styled from 'styled-components/native';
2-
import constants from './constants';
32

43
interface BarProps {
54
barColor: string;
@@ -11,10 +10,14 @@ const Bar = styled.View`
1110
height: ${(props: BarProps) => props.barHeight};
1211
`;
1312

13+
interface TabTrackProps {
14+
barHeight: number;
15+
indicatorHeight: number;
16+
}
17+
1418
const TabTrack = styled.View`
1519
flex-direction: row;
16-
height: ${(props: Pick<BarProps, 'barHeight'>) =>
17-
props.barHeight - constants.indicatorHeight};
20+
height: ${(props: TabTrackProps) => props.barHeight - props.indicatorHeight};
1821
`;
1922

2023
export { Bar, TabTrack };

‎yarn.lock

+3-3
Original file line numberDiff line numberDiff line change
@@ -4591,9 +4591,9 @@ [email protected]:
45914591
integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
45924592

45934593
lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.6.1:
4594-
version "4.17.11"
4595-
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
4596-
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
4594+
version "4.17.20"
4595+
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
4596+
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
45974597

45984598
log-symbols@^1.0.2:
45994599
version "1.0.2"

0 commit comments

Comments
 (0)