v3.8.0 #41

.flowconfig

@@ -34,8 +34,6 @@ node_modules/react-native/flow/
 [options]
 module.system=haste
 
-experimental.strict_type_args=true
-
 munge_underscores=true
 
 module.name_mapper='^react-native$' -> 'emptyObject'
@@ -51,7 +49,5 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
-unsafe.enable_getters_and_setters=true
-
 [version]
-^0.56.0
+^0.79.1

.gitignore

@@ -3,3 +3,4 @@ node_modules
 .vscode
 .idea/
 build
+coverage

.travis.yml

@@ -1,10 +1,10 @@
 language: node_js
 cache: yarn
 node_js:
-  - 9.11.1
-  
+  - 8.12.0
+
 install:
- - yarn
+  - yarn
 
 script:
- - yarn run flow && yarn run lint && yarn run test
+  - yarn run ci

README.md

@@ -58,7 +58,7 @@ import MaterialTabs from 'react-native-material-tabs';
 | indicatorColor    | #fff                     | string        | Color 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) | The headers for the individual tabs                                                                     |
+| items             | none                     | array(string|element) | The headers for the individual tabs                                                                     |
 | selectedIndex     | 0                        | number        | The index of current tab selected. Indexes are mapped to the items prop                                 |
 | scrollable        | false                    | boolean       | Option between having fixed tabs or scrollable tabs                                                     |
 | textStyle         | null                     | object(style) | Text style for tab titles                                                                               |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-tabs",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Material Design implementation of Tabs",
   "keywords": [
     "react",
@@ -20,9 +20,10 @@
   "license": "MIT",
   "scripts": {
     "flow": "flow check",
-    "lint": "eslint **/*.js",
-    "format": "eslint --fix **/*.js",
-    "test": "jest --runInBand"
+    "lint": "eslint src",
+    "format": "eslint server --fix",
+    "test": "jest --runInBand",
+    "ci": "yarn run flow && yarn run lint && yarn run test"
   },
   "dependencies": {
     "prop-types": "^15.5.10",
@@ -42,8 +43,10 @@
     "eslint-plugin-prettier": "^2.1.2",
     "eslint-plugin-react": "^7.1.0",
     "eslint-plugin-react-native": "^2.3.2",
-    "flow-bin": "^0.56.0",
+    "flow-bin": "^0.79.1",
+    "husky": "^1.1.2",
     "jest": "21.2.1",
+    "lint-staged": "^7.3.0",
     "prettier": "^1.9.1",
     "react": "16.0.0",
     "react-dom": "^16.2.0",
@@ -64,8 +67,21 @@
   },
   "jest": {
     "preset": "react-native",
+    "collectCoverage": true,
     "moduleNameMapper": {
       "styled-components": "<rootDir>/node_modules/styled-components/dist/styled-components.native.cjs.js"
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "flow check",
+      "git add"
+    ]
   }
 }

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

@@ -745,3 +745,176 @@ exports[`Main should render without errors 1`] = `
   </RCTScrollView>
 </View>
 `;
+
+exports[`Main when items is an array of react elements should render tabs 1`] = `
+<View
+  barColor="#13897b"
+  barHeight={48}
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#13897b",
+        "height": 48,
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    horizontal={true}
+    keyboardShouldPersistTaps="never"
+    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}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  undefined,
+                  Object {
+                    "color": "#fff",
+                  },
+                ]
+              }
+            >
+              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}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  undefined,
+                  Object {
+                    "color": "rgba(255, 255, 255, 0.7)",
+                  },
+                ]
+              }
+            >
+              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>
+`;

src/__tests__/main.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from 'react-native';
 import Adapter from 'enzyme-adapter-react-16';
 import { create } from 'react-test-renderer';
 import { shallow, configure } from 'enzyme';
@@ -129,4 +130,18 @@ describe('Main', () => {
     const tree = create(tabs).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  describe('when items is an array of react elements', function() {
+    it('should render tabs', function() {
+      const tabs = (
+        <MaterialTabs
+          selectedIndex={0}
+          items={[<Text key="1">Tab1</Text>, <Text key="2">Tab2</Text>]}
+          onChange={onChange}
+        />
+      );
+      const tree = create(tabs).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });

src/components/MaterialTabs.js

@@ -8,6 +8,7 @@ import { Bar, TabTrack } from '../lib/styles';
 import values from '../lib/values';
 import Tab from './Tab';
 import Indicator from './Indicator';
+import type { ContentType } from './Tab/Tab';
 
 type Props = {
   allowFontScaling: boolean,
@@ -20,7 +21,7 @@ type Props = {
   scrollable: boolean,
   textStyle: StyleObj,
   activeTextStyle: StyleObj,
-  items: string[],
+  items: ContentType[],
   uppercase: boolean,
   onChange: (index: number) => void,
   keyboardShouldPersistTaps: string,
@@ -32,6 +33,9 @@ type State = {
   indicatorPosition: Animated.Value,
 };
 
+const getKeyForTab = (item: ContentType) =>
+  typeof item == 'string' ? item : item.key;
+
 export default class MaterialTabs extends React.Component<Props, State> {
   static propTypes = {
     allowFontScaling: PropTypes.bool,
@@ -44,7 +48,9 @@ export default class MaterialTabs extends React.Component<Props, State> {
     scrollable: PropTypes.bool,
     textStyle: Text.propTypes.style,
     activeTextStyle: Text.propTypes.style,
-    items: PropTypes.arrayOf(PropTypes.string).isRequired,
+    items: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    ).isRequired,
     uppercase: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
     keyboardShouldPersistTaps: PropTypes.string,
@@ -176,8 +182,8 @@ export default class MaterialTabs extends React.Component<Props, State> {
             {this.props.items.map((item, idx) => (
               <Tab
                 allowFontScaling={this.props.allowFontScaling}
-                text={item}
-                key={item}
+                content={item}
+                key={getKeyForTab(item)}
                 stretch={!this.props.scrollable}
                 onPress={() => this.props.onChange(idx)}
                 active={idx === this.props.selectedIndex}