v4.2.0 #76

iRoachie · Mar 29, 2021 · 1f34ffa · 1f34ffa
2 parents e7648e0 + a9fcd80
commit 1f34ffa
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,9 @@ const styles = StyleSheet.create({
 | prop                      | default                  | type          | description                                                                                                                                                     |
 | ------------------------- | ------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | barColor                  | #13897b                  | string        | Color of the tab bar                                                                                                                                            |
+| barHeight                 | 48                       | number        | Height of the tab bar                                                                                                                                            |
 | indicatorColor            | #fff                     | string        | Color of the indicator                                                                                                                                          |
+| indicatorHeight           | 2                        | number        | Height of the indicator
 | activeTextColor           | #fff                     | string        | Color of the text for the selected tab                                                                                                                          |
 | inactiveTextColor         | rgba(255, 255, 255, 0.7) | string        | Color of the text for inactive tabs                                                                                                                             |
 | items                     | none                     | array(string  | element)                                                                                                                                                        | The headers for the individual tabs |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-tabs",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description": "Material Design implementation of Tabs",
   "keywords": [
     "react",

diff --git a/src/__tests__/__snapshots__/main.test.js.snap b/src/__tests__/__snapshots__/main.test.js.snap
@@ -23,6 +23,7 @@ exports[`Main should apply custom activeTextStyle to active tab 1`] = `
     <View>
       <View
         barHeight={48}
+        indicatorHeight={2}
         style={
           Array [
             Object {
@@ -139,6 +140,7 @@ exports[`Main should apply custom activeTextStyle to active tab 1`] = `
       </View>
       <View
         color="#fff"
+        height={2}
         style={
           Object {
             "backgroundColor": "#fff",
@@ -183,6 +185,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
     <View>
       <View
         barHeight={48}
+        indicatorHeight={2}
         style={
           Array [
             Object {
@@ -301,6 +304,7 @@ exports[`Main should apply custom fontFamily to tab 1`] = `
       </View>
       <View
         color="#fff"
+        height={2}
         style={
           Object {
             "backgroundColor": "#fff",
@@ -345,6 +349,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
     <View>
       <View
         barHeight={48}
+        indicatorHeight={2}
         style={
           Array [
             Object {
@@ -459,6 +464,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
       </View>
       <View
         color="#fff"
+        height={2}
         style={
           Object {
             "backgroundColor": "#fff",
@@ -503,6 +509,7 @@ exports[`Main should render scrollable without errors 1`] = `
     <View>
       <View
         barHeight={48}
+        indicatorHeight={2}
         style={
           Array [
             Object {
@@ -617,6 +624,7 @@ exports[`Main should render scrollable without errors 1`] = `
       </View>
       <View
         color="#fff"
+        height={2}
         style={
           Object {
             "backgroundColor": "#fff",
@@ -661,6 +669,7 @@ exports[`Main should render without errors 1`] = `
     <View>
       <View
         barHeight={48}
+        indicatorHeight={2}
         style={
           Array [
             Object {
@@ -775,6 +784,7 @@ exports[`Main should render without errors 1`] = `
       </View>
       <View
         color="#fff"
+        height={2}
         style={
           Object {
             "backgroundColor": "#fff",
@@ -819,6 +829,7 @@ exports[`Main when items is an array of react elements should render tabs 1`] =
     <View>
       <View
         barHeight={48}
+        indicatorHeight={2}
         style={
           Array [
             Object {
@@ -919,6 +930,7 @@ exports[`Main when items is an array of react elements should render tabs 1`] =
       </View>
       <View
         color="#fff"
+        height={2}
         style={
           Object {
             "backgroundColor": "#fff",

diff --git a/src/components/Indicator.tsx b/src/components/Indicator.tsx
@@ -2,15 +2,14 @@ import React from 'react';
 import { Animated } from 'react-native';
 import styled from 'styled-components/native';
 
-import constants from '../lib/constants';
-
 interface BarProps {
   tabWidth: number;
   color: string;
+  height: number;
 }
 
 const Bar = styled(Animated.View)`
-  height: ${constants.indicatorHeight};
+  height: ${(props: BarProps) => props.height};
   width: ${(props: BarProps) => props.tabWidth};
   position: absolute;
   bottom: 0;
@@ -21,13 +20,15 @@ interface IndicatorProps {
   color: string;
   tabWidth: number;
   value: Animated.Value;
+  height: number;
 }
 
 const Indicator = (props: IndicatorProps) => (
   <Bar
     color={props.color}
     style={{ transform: [{ translateX: props.value }] }}
     tabWidth={props.tabWidth}
+    height={props.height}
   />
 );
 

diff --git a/src/components/MaterialTabs.tsx b/src/components/MaterialTabs.tsx
@@ -14,7 +14,6 @@ import Indicator from './Indicator';
 import { ContentType } from './Tab/Tab';
 
 import { Bar, TabTrack } from '../lib/styles';
-import constants from '../lib/constants';
 
 interface Props extends Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> {
   allowFontScaling: boolean;
@@ -30,6 +29,7 @@ interface Props extends Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> {
   items: ContentType[];
   uppercase: boolean;
   onChange(index: number): void;
+  indicatorHeight: number;
 }
 
 const getKeyForTab = (item: ContentType) =>
@@ -50,6 +50,7 @@ const MaterialTabs: React.FC<Props> = ({
   uppercase,
   indicatorColor,
   barColor,
+  indicatorHeight,
 }) => {
   const [tabWidth, setTabWidth] = useState(0);
   const [barWidth, setBarWidth] = useState(0);
@@ -143,7 +144,7 @@ const MaterialTabs: React.FC<Props> = ({
           keyboardShouldPersistTaps={keyboardShouldPersistTaps}
           scrollEnabled={scrollable}
         >
-          <TabTrack barHeight={barHeight}>
+          <TabTrack barHeight={barHeight} indicatorHeight={indicatorHeight}>
             {items.map((item, idx) => (
               <Tab
                 allowFontScaling={allowFontScaling}
@@ -166,6 +167,7 @@ const MaterialTabs: React.FC<Props> = ({
             color={indicatorColor}
             value={indicatorPosition}
             tabWidth={!scrollable ? tabWidth : barWidth * 0.4}
+            height={indicatorHeight}
           />
         </ScrollView>
       </Bar>
@@ -177,13 +179,14 @@ MaterialTabs.defaultProps = {
   allowFontScaling: true,
   selectedIndex: 0,
   barColor: '#13897b',
-  barHeight: constants.barHeight,
+  barHeight: 48,
   activeTextColor: '#fff',
   indicatorColor: '#fff',
   inactiveTextColor: 'rgba(255, 255, 255, 0.7)',
   scrollable: false,
   uppercase: true,
   keyboardShouldPersistTaps: 'never',
+  indicatorHeight: 2,
 };
 
 export default MaterialTabs;
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -86,6 +86,13 @@ interface TabsProps extends Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> {
    * @param index
    */
   onChange(index: number): void;
+
+  /**
+   * Height of the indicator
+   *
+   * Default is 2
+   */
+  indicatorHeight?: number;
 }
 
 export default class MaterialTabs extends React.Component<TabsProps> {}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components/native';
-import constants from './constants';
 
 interface BarProps {
   barColor: string;
@@ -11,10 +10,14 @@ const Bar = styled.View`
   height: ${(props: BarProps) => props.barHeight};
 `;
 
+interface TabTrackProps {
+  barHeight: number;
+  indicatorHeight: number;
+}
+
 const TabTrack = styled.View`
   flex-direction: row;
-  height: ${(props: Pick<BarProps, 'barHeight'>) =>
-    props.barHeight - constants.indicatorHeight};
+  height: ${(props: TabTrackProps) => props.barHeight - props.indicatorHeight};
 `;
 
 export { Bar, TabTrack };
diff --git a/yarn.lock b/yarn.lock
@@ -4591,9 +4591,9 @@ [email protected]:
   integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
 
 lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.6.1:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
 log-symbols@^1.0.2:
   version "1.0.2"