Skip to content

Commit 3c9404e

Browse files
iRoachieiRoachie
authored
v3.5.0
2 parents 364e2fd + 2833638 commit 3c9404e

File tree

7 files changed

+215
-2
lines changed

7 files changed

+215
-2
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ import MaterialTabs from 'react-native-material-tabs';
6464
| textStyle | null | object(style) | Text style for tab titles |
6565
| onChange | none | Function | Handler that's emitted every time the user presses a tab. You can use this to change the selected index |
6666
| allowFontScaling | true | boolean | Specifies whether fonts should scale to respect Text Size accessibility settings |
67+
| uppercase | true | boolean | Specifies whether to uppercase the tab labels |
6768

6869
## Example
6970

‎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": "3.4.0",
3+
"version": "3.5.0",
44
"description": "Material Design implementation of Tabs",
55
"keywords": ["react", "react-native", "material-design", "tabs"],
66
"main": "./src/index.js",

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

+184
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,190 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
188188
</View>
189189
`;
190190

191+
exports[`Main should display tab labels not uppercased 1`] = `
192+
<View
193+
barColor="#13897b"
194+
barHeight={48}
195+
onLayout={[Function]}
196+
style={
197+
Array [
198+
Object {
199+
"backgroundColor": "#13897b",
200+
"height": 48,
201+
},
202+
undefined,
203+
]
204+
}
205+
>
206+
<RCTScrollView
207+
horizontal={true}
208+
scrollEnabled={false}
209+
showsHorizontalScrollIndicator={false}
210+
>
211+
<View>
212+
<View
213+
barHeight={48}
214+
style={
215+
Array [
216+
Object {
217+
"flexDirection": "row",
218+
"height": 46,
219+
},
220+
undefined,
221+
]
222+
}
223+
>
224+
<View
225+
accessibilityComponentType={undefined}
226+
accessibilityLabel={undefined}
227+
accessibilityTraits={undefined}
228+
accessible={true}
229+
collapsable={undefined}
230+
hasTVPreferredFocus={undefined}
231+
hitSlop={undefined}
232+
isTVSelectable={true}
233+
nativeID={undefined}
234+
onLayout={undefined}
235+
onResponderGrant={[Function]}
236+
onResponderMove={[Function]}
237+
onResponderRelease={[Function]}
238+
onResponderTerminate={[Function]}
239+
onResponderTerminationRequest={[Function]}
240+
onStartShouldSetResponder={[Function]}
241+
style={
242+
Object {
243+
"opacity": 1,
244+
"width": 0,
245+
}
246+
}
247+
testID={undefined}
248+
tvParallaxProperties={undefined}
249+
>
250+
<View
251+
style={
252+
Array [
253+
Object {
254+
"alignItems": "center",
255+
"height": 48,
256+
"justifyContent": "center",
257+
"paddingHorizontal": 12,
258+
},
259+
undefined,
260+
]
261+
}
262+
tabHeight={48}
263+
>
264+
<Text
265+
accessible={true}
266+
allowFontScaling={true}
267+
color="#fff"
268+
ellipsizeMode="tail"
269+
style={
270+
Array [
271+
Object {
272+
"color": "#fff",
273+
"fontFamily": "System",
274+
"fontSize": 14,
275+
"fontWeight": "500",
276+
"minWidth": "100%",
277+
"textAlign": "center",
278+
},
279+
null,
280+
]
281+
}
282+
>
283+
Tab1
284+
</Text>
285+
</View>
286+
</View>
287+
<View
288+
accessibilityComponentType={undefined}
289+
accessibilityLabel={undefined}
290+
accessibilityTraits={undefined}
291+
accessible={true}
292+
collapsable={undefined}
293+
hasTVPreferredFocus={undefined}
294+
hitSlop={undefined}
295+
isTVSelectable={true}
296+
nativeID={undefined}
297+
onLayout={undefined}
298+
onResponderGrant={[Function]}
299+
onResponderMove={[Function]}
300+
onResponderRelease={[Function]}
301+
onResponderTerminate={[Function]}
302+
onResponderTerminationRequest={[Function]}
303+
onStartShouldSetResponder={[Function]}
304+
style={
305+
Object {
306+
"opacity": 1,
307+
"width": 0,
308+
}
309+
}
310+
testID={undefined}
311+
tvParallaxProperties={undefined}
312+
>
313+
<View
314+
style={
315+
Array [
316+
Object {
317+
"alignItems": "center",
318+
"height": 48,
319+
"justifyContent": "center",
320+
"paddingHorizontal": 12,
321+
},
322+
undefined,
323+
]
324+
}
325+
tabHeight={48}
326+
>
327+
<Text
328+
accessible={true}
329+
allowFontScaling={true}
330+
color="rgba(255, 255, 255, 0.7)"
331+
ellipsizeMode="tail"
332+
style={
333+
Array [
334+
Object {
335+
"color": "rgba(255, 255, 255, 0.7)",
336+
"fontFamily": "System",
337+
"fontSize": 14,
338+
"fontWeight": "500",
339+
"minWidth": "100%",
340+
"textAlign": "center",
341+
},
342+
null,
343+
]
344+
}
345+
>
346+
Tab2
347+
</Text>
348+
</View>
349+
</View>
350+
</View>
351+
<View
352+
collapsable={undefined}
353+
color="#fff"
354+
style={
355+
Object {
356+
"backgroundColor": "#fff",
357+
"bottom": 0,
358+
"height": 2,
359+
"position": "absolute",
360+
"transform": Array [
361+
Object {
362+
"translateX": 0,
363+
},
364+
],
365+
"width": 0,
366+
}
367+
}
368+
tabWidth={0}
369+
/>
370+
</View>
371+
</RCTScrollView>
372+
</View>
373+
`;
374+
191375
exports[`Main should render without errors 1`] = `
192376
<View
193377
barColor="#13897b"

‎src/__tests__/main.test.js

+14
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,18 @@ describe('Main', () => {
9191
expect(tab.props().style).toEqual({ fontFamily: 'Papyrus' });
9292
expect(tree).toMatchSnapshot();
9393
});
94+
95+
it('should display tab labels not uppercased', () => {
96+
const tabs = (
97+
<MaterialTabs
98+
selectedIndex={0}
99+
items={['Tab1', 'Tab2']}
100+
onChange={onChange}
101+
uppercase={false}
102+
/>
103+
);
104+
105+
const tree = create(tabs).toJSON();
106+
expect(tree).toMatchSnapshot();
107+
});
94108
});

‎src/components/MaterialTabs.js

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ type Props = {
2020
scrollable: boolean,
2121
textStyle: StyleObj,
2222
items: string[],
23+
uppercase: boolean,
2324
onChange: (index: number) => void,
2425
};
2526

@@ -34,12 +35,14 @@ export default class MaterialTabs extends React.Component<Props, State> {
3435
allowFontScaling: PropTypes.bool,
3536
selectedIndex: PropTypes.number,
3637
barColor: PropTypes.string,
38+
barHeight: PropTypes.number,
3739
activeTextColor: PropTypes.string,
3840
indicatorColor: PropTypes.string,
3941
inactiveTextColor: PropTypes.string,
4042
scrollable: PropTypes.bool,
4143
textStyle: Text.propTypes.style,
4244
items: PropTypes.arrayOf(PropTypes.string).isRequired,
45+
uppercase: PropTypes.bool,
4346
onChange: PropTypes.func.isRequired,
4447
};
4548

@@ -53,6 +56,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
5356
inactiveTextColor: 'rgba(255, 255, 255, 0.7)',
5457
scrollable: false,
5558
textStyle: null,
59+
uppercase: true,
5660
};
5761

5862
state = {
@@ -178,6 +182,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
178182
? this.state.tabWidth
179183
: this.state.barWidth * 0.4
180184
}
185+
uppercase={this.props.uppercase}
181186
inActiveTextColor={this.props.inactiveTextColor}
182187
/>
183188
))}

‎src/components/Tab/Tab.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type TabProps = {
1414
inActiveTextColor: string,
1515
active?: boolean,
1616
textStyle: StyleObj,
17+
uppercase: boolean,
1718
onPress?: () => void,
1819
};
1920

@@ -28,6 +29,7 @@ const Tab = ({
2829
tabHeight,
2930
stretch,
3031
textStyle,
32+
uppercase,
3133
}: TabProps) => {
3234
const color = active ? activeTextColor : inActiveTextColor;
3335

@@ -39,7 +41,7 @@ const Tab = ({
3941
style={textStyle}
4042
allowFontScaling={allowFontScaling}
4143
>
42-
{text.toUpperCase()}
44+
{uppercase ? text.toUpperCase() : text}
4345
</TabText>
4446
</TabBody>
4547
</TabButton>

‎src/index.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,13 @@ interface TabsProps {
6868
*/
6969
textStyle?: StyleProp<TextStyle>;
7070

71+
/**
72+
* Make the titles uppercased
73+
*
74+
* Default is true
75+
*/
76+
uppercase?: boolean;
77+
7178
/**
7279
* Handler that's emitted every time the user presses a tab.
7380
* You can use this to change the selected index

0 commit comments

Comments
 (0)