v3.5.0

README.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-tabs",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Material Design implementation of Tabs",
   "keywords": ["react", "react-native", "material-design", "tabs"],
   "main": "./src/index.js",

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

@@ -188,6 +188,190 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
 </View>
 `;
 
+exports[`Main should display tab labels not uppercased 1`] = `
+<View
+  barColor="#13897b"
+  barHeight={48}
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#13897b",
+        "height": 48,
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    horizontal={true}
+    scrollEnabled={false}
+    showsHorizontalScrollIndicator={false}
+  >
+    <View>
+      <View
+        barHeight={48}
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "height": 46,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          collapsable={undefined}
+          hasTVPreferredFocus={undefined}
+          hitSlop={undefined}
+          isTVSelectable={true}
+          nativeID={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+              "width": 0,
+            }
+          }
+          testID={undefined}
+          tvParallaxProperties={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": 48,
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+              ]
+            }
+            tabHeight={48}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              color="#fff"
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#fff",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "minWidth": "100%",
+                    "textAlign": "center",
+                  },
+                  null,
+                ]
+              }
+            >
+              Tab1
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          collapsable={undefined}
+          hasTVPreferredFocus={undefined}
+          hitSlop={undefined}
+          isTVSelectable={true}
+          nativeID={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+              "width": 0,
+            }
+          }
+          testID={undefined}
+          tvParallaxProperties={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": 48,
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+              ]
+            }
+            tabHeight={48}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              color="rgba(255, 255, 255, 0.7)"
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "rgba(255, 255, 255, 0.7)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "minWidth": "100%",
+                    "textAlign": "center",
+                  },
+                  null,
+                ]
+              }
+            >
+              Tab2
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        collapsable={undefined}
+        color="#fff"
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "bottom": 0,
+            "height": 2,
+            "position": "absolute",
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
+            "width": 0,
+          }
+        }
+        tabWidth={0}
+      />
+    </View>
+  </RCTScrollView>
+</View>
+`;
+
 exports[`Main should render without errors 1`] = `
 <View
   barColor="#13897b"

src/__tests__/main.test.js

@@ -91,4 +91,18 @@ describe('Main', () => {
     expect(tab.props().style).toEqual({ fontFamily: 'Papyrus' });
     expect(tree).toMatchSnapshot();
   });
+
+  it('should display tab labels not uppercased', () => {
+    const tabs = (
+      <MaterialTabs
+        selectedIndex={0}
+        items={['Tab1', 'Tab2']}
+        onChange={onChange}
+        uppercase={false}
+      />
+    );
+
+    const tree = create(tabs).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/MaterialTabs.js

@@ -20,6 +20,7 @@ type Props = {
   scrollable: boolean,
   textStyle: StyleObj,
   items: string[],
+  uppercase: boolean,
   onChange: (index: number) => void,
 };
 
@@ -34,12 +35,14 @@ export default class MaterialTabs extends React.Component<Props, State> {
     allowFontScaling: PropTypes.bool,
     selectedIndex: PropTypes.number,
     barColor: PropTypes.string,
+    barHeight: PropTypes.number,
     activeTextColor: PropTypes.string,
     indicatorColor: PropTypes.string,
     inactiveTextColor: PropTypes.string,
     scrollable: PropTypes.bool,
     textStyle: Text.propTypes.style,
     items: PropTypes.arrayOf(PropTypes.string).isRequired,
+    uppercase: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
   };
 
@@ -53,6 +56,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
     inactiveTextColor: 'rgba(255, 255, 255, 0.7)',
     scrollable: false,
     textStyle: null,
+    uppercase: true,
   };
 
   state = {
@@ -178,6 +182,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
                     ? this.state.tabWidth
                     : this.state.barWidth * 0.4
                 }
+                uppercase={this.props.uppercase}
                 inActiveTextColor={this.props.inactiveTextColor}
               />
             ))}

src/components/Tab/Tab.js

@@ -14,6 +14,7 @@ type TabProps = {
   inActiveTextColor: string,
   active?: boolean,
   textStyle: StyleObj,
+  uppercase: boolean,
   onPress?: () => void,
 };
 
@@ -28,6 +29,7 @@ const Tab = ({
   tabHeight,
   stretch,
   textStyle,
+  uppercase,
 }: TabProps) => {
   const color = active ? activeTextColor : inActiveTextColor;
 
@@ -39,7 +41,7 @@ const Tab = ({
           style={textStyle}
           allowFontScaling={allowFontScaling}
         >
-          {text.toUpperCase()}
+          {uppercase ? text.toUpperCase() : text}
         </TabText>
       </TabBody>
     </TabButton>

src/index.d.ts

@@ -68,6 +68,13 @@ interface TabsProps {
    */
   textStyle?: StyleProp<TextStyle>;
 
+  /**
+   * Make the titles uppercased
+   * 
+   * Default is true
+   */
+  uppercase?: boolean;
+
   /**
    * Handler that's emitted every time the user presses a tab.
    * You can use this to change the selected index