v3.3.0

Author: iRoachie

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

@@ -3,6 +3,7 @@
 exports[`Main should apply custom fontFamily to tab 1`] = `
 <View
   barColor="#13897b"
+  barHeight={48}
   onLayout={[Function]}
   style={
     Array [
@@ -21,6 +22,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
   >
     <View>
       <View
+        barHeight={48}
         style={
           Array [
             Object {
@@ -69,6 +71,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
                 undefined,
               ]
             }
+            tabHeight={48}
           >
             <Text
               accessible={true}
@@ -133,6 +136,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
                 undefined,
               ]
             }
+            tabHeight={48}
           >
             <Text
               accessible={true}
@@ -187,6 +191,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
 exports[`Main should render without errors 1`] = `
 <View
   barColor="#13897b"
+  barHeight={48}
   onLayout={[Function]}
   style={
     Array [
@@ -205,6 +210,7 @@ exports[`Main should render without errors 1`] = `
   >
     <View>
       <View
+        barHeight={48}
         style={
           Array [
             Object {
@@ -253,6 +259,7 @@ exports[`Main should render without errors 1`] = `
                 undefined,
               ]
             }
+            tabHeight={48}
           >
             <Text
               accessible={true}
@@ -315,6 +322,7 @@ exports[`Main should render without errors 1`] = `
                 undefined,
               ]
             }
+            tabHeight={48}
           >
             <Text
               accessible={true}

src/components/MaterialTabs.js

@@ -5,12 +5,14 @@ import PropTypes from 'prop-types';
 import { Animated, ScrollView, View, Text } from 'react-native';
 import type { StyleObj } from '../lib/definitions';
 import { Bar, TabTrack } from '../lib/styles';
+import values from '../lib/values';
 import Tab from './Tab';
 import Indicator from './Indicator';
 
 type Props = {
   selectedIndex: number,
   barColor: string,
+  barHeight: number,
   activeTextColor: string,
   indicatorColor: string,
   inactiveTextColor: string,
@@ -42,6 +44,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
   static defaultProps = {
     selectedIndex: 0,
     barColor: '#13897b',
+    barHeight: values.barHeight,
     activeTextColor: '#fff',
     indicatorColor: '#fff',
     inactiveTextColor: 'rgba(255, 255, 255, 0.7)',
@@ -149,6 +152,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
       <Bar
         innerRef={ref => (this.bar = ref)}
         barColor={this.props.barColor}
+        barHeight={this.props.barHeight}
         onLayout={event => this.getTabWidth(event.nativeEvent.layout.width)}
       >
         <ScrollView
@@ -157,7 +161,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
           showsHorizontalScrollIndicator={false}
           scrollEnabled={this.props.scrollable}
         >
-          <TabTrack>
+          <TabTrack barHeight={this.props.barHeight}>
             {this.props.items.map((item, idx) => (
               <Tab
                 text={item}
@@ -167,6 +171,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
                 active={idx === this.props.selectedIndex}
                 activeTextColor={this.props.activeTextColor}
                 textStyle={this.props.textStyle}
+                tabHeight={this.props.barHeight}
                 tabWidth={
                   !this.props.scrollable
                     ? this.state.tabWidth

src/components/Tab/Tab.js

@@ -7,6 +7,7 @@ import type { StyleObj } from '../../lib/definitions';
 type TabProps = {
   text: string,
   tabWidth: number,
+  tabHeight: number,
   stretch: boolean,
   activeTextColor: string,
   inActiveTextColor: string,
@@ -22,14 +23,15 @@ const Tab = ({
   text,
   inActiveTextColor,
   tabWidth,
+  tabHeight,
   stretch,
   textStyle,
 }: TabProps) => {
   const color = active ? activeTextColor : inActiveTextColor;
 
   return (
     <TabButton onPress={onPress} tabWidth={tabWidth} stretch={stretch}>
-      <TabBody>
+      <TabBody tabHeight={tabHeight}>
         <TabText color={color} style={textStyle}>
           {text.toUpperCase()}
         </TabText>

src/components/Tab/styles.js

@@ -3,10 +3,13 @@
 import styled from 'styled-components/native';
 import { Platform } from 'react-native';
 import Button from '../Touchable';
-import values from '../../lib/values';
+
+type TabBodyProps = {
+  tabHeight: number,
+};
 
 export const TabBody = styled.View`
-  height: ${values.barHeight};
+  height: ${(props: TabBodyProps) => props.tabHeight};
   align-items: center;
   justify-content: center;
   padding-horizontal: 12px;

src/index.d.ts

@@ -21,6 +21,13 @@ interface TabsProps {
    */
   barColor?: string;
 
+  /**
+   * Height of the tab bar
+   *
+   * Default is 48
+   */
+  barHeight?: number;
+
   /**
    * Color of the text for the selected tab
    *

src/lib/styles.js

@@ -1,20 +1,24 @@
 // @flow
 
 import styled from 'styled-components/native';
-import values from './values';
 
 type BarProps = {
   barColor: string,
+  barHeight: number,
 };
 
+type TabProps = {
+  barHeight: number,
+}
+
 const Bar = styled.View`
   background-color: ${(props: BarProps) => props.barColor};
-  height: ${values.barHeight};
+  height: ${(props: BarProps) => props.barHeight};
 `;
 
 const TabTrack = styled.View`
   flex-direction: row;
-  height: 46;
+  height: ${(props: BarProps) => props.barHeight - 2};
 `;
 
 export { Bar, TabTrack };