Merge pull request #72 from kirankalyan5/setup-flow-type

#61 Set up and use flow-type 💫

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "react-native",
+    "flow"
+  ]
+}

.eslintrc

@@ -1,89 +1,200 @@
 {
-  "root": true,
+  "parser": "babel-eslint",
-  "parserOptions": {
+  "extends": "airbnb",
-    "sourceType": "module",
-    "ecmaFeatures": {
-        "jsx": true,
-        "modules": true,
-        "experimentalObjectRestSpread": true
-    }
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "globals": {
-      "jest": false,
-      "describe": false,
-      "it": false,
-      "afterEach": false,
-      "beforeEach": false,
-      "expect": false,
-      "spyOn": false
-  },
   "plugins": [
     "react",
-    "react-native"
+    "flowtype",
+    "jsx-a11y",
+    "import"
   ],
-  "extends": [
-      "eslint:recommended",
-      "plugin:react/recommended"
-  ],
-  // details: https://github.com/yannickcr/eslint-plugin-react
   "rules": {
-    "semi": ['error', "never"],
+    // Best Practices
-    "quotes": ['error', "single"],
+    "accessor-pairs": 2,
-    "no-unused-vars": 'error',
+    "block-scoped-var": 2,
-    "no-irregular-whitespace": ['error', { "skipComments": true }],
+    "complexity": [
-    "no-console": ['error', { "allow": ["log", "warn", 'error'] }],
+      "error",
-    "no-mixed-spaces-and-tabs": ['error', "smart-tabs"],
+      10
-    "react/display-name": ['error', { "ignoreTranspilerName": false }],
+    ],
-    "react/forbid-prop-types": 'error',
+    "consistent-return": 2,
-    "react/jsx-boolean-value": 'error',
+    "curly": 2,
-    "react/jsx-closing-bracket-location": 'off',
+    "default-case": 2,
-    "react/jsx-curly-spacing": 'off',
+    "dot-location": [
-    "react/jsx-handler-names": 'error',
+      2,
-    "react/jsx-indent-props": ['error',4],
+      "property"
-    "react/jsx-indent": ['error',4],
+    ],
-    "react/jsx-key": 'error',
+    "dot-notation": 2,
-    "react/jsx-max-props-per-line": 'error',
+    "eqeqeq": [
-    "react/jsx-no-bind": ['error', {
+      2,
-        "ignoreRefs": false,
+      "allow-null"
-        "allowArrowFunctions": true,
+    ],
-        "allowBind": false
+    "guard-for-in": 2,
-    }],
+    "no-alert": 2,
-    "react/jsx-no-duplicate-props": 'error',
+    "no-caller": 2,
-    "react/jsx-no-literals": 'off',
+    "no-case-declarations": 2,
-    "react/jsx-no-undef": 'error',
+    "no-div-regex": 2,
-    "react/jsx-pascal-case": 'error',
+    "no-else-return": 2,
-    "jsx-quotes": ['error', "prefer-double"],
+    "no-empty-pattern": 2,
-    "react/sort-prop-types": 'error',
+    "no-eq-null": 2,
-    "react/jsx-sort-props": 'off',
+    "no-eval": 2,
-    "react/jsx-uses-react": 'error',
+    "no-extend-native": 2,
-    "react/jsx-uses-vars": 'error',
+    "no-extra-bind": 2,
-    "react/no-danger": 'error',
+    "no-fallthrough": 2,
-    "react/no-deprecated": 'error',
+    "no-floating-decimal": 2,
-    "react/no-did-mount-set-state": 'error',
+    "no-implicit-coercion": 2,
-    "react/no-did-update-set-state": 'error',
+    "no-implied-eval": 2,
-    "react/no-direct-mutation-state": 'error',
+    "no-invalid-this": 2,
-    "react/no-is-mounted": 'error',
+    "no-iterator": 2,
-    "react/no-multi-comp": 'error',
+    "no-labels": 2,
-    "react/no-set-state": 'off',
+    "no-lone-blocks": 2,
-    "react/no-string-refs": 'error',
+    "no-loop-func": 2,
-    "react/no-unknown-property": 'error',
+    "no-magic-numbers": 0,
-    "react/prefer-es6-class": 'error',
+    "no-multi-str": 2,
-    "react/prop-types": 'error',
+    "no-native-reassign": 2,
-    "react/react-in-jsx-scope": 'error',
+    "no-new-func": 2,
-    "react/require-extension": 'error',
+    "no-new-wrappers": 2,
-    "react/self-closing-comp": 'error',
+    "no-new": 2,
-    "react/sort-comp": 'error',
+    "no-octal-escape": 2,
-    "react/wrap-multilines": 'error',
+    "no-octal": 2,
-
+    "no-param-reassign": 2,
-    // details: https://github.com/Intellicode/eslint-plugin-react-native
+    "no-process-env": 0,
-    "react-native/no-unused-styles": 2,
+    "no-proto": 2,
-    "react-native/split-platform-components": 2,
+    "no-redeclare": 2,
-    "react-native/no-inline-styles": 2,
+    "no-return-assign": 2,
-    "react-native/no-color-literals": 2
+    "no-script-url": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-throw-literal": 2,
+    "no-unsafe-negation": 2,
+    "no-unused-expressions": 2,
+    "no-useless-call": 2,
+    "no-useless-concat": 2,
+    "no-useless-rename": 0,
+    "no-void": 2,
+    "no-warning-comments": 1,
+    "no-with": 2,
+    "prefer-destructuring": [
+      2,
+      {
+        "array": false,
+        "object": true
+      },
+      {
+        "enforceForRenamedProperties": false
+      }
+    ],
+    "radix": 2,
+    "semi-spacing": 2,
+    "vars-on-top": 0,
+    "wrap-iife": 2,
+    "yoda": 2,
+    // Flow
+    "flowtype/use-flow-type": 2,
+    "flowtype/define-flow-type": 2,
+    "flowtype/space-after-type-colon": [
+      2,
+      "always"
+    ],
+    "flowtype/space-before-type-colon": [
+      2,
+      "never"
+    ],
+    "flowtype/require-valid-file-annotation": [
+      2,
+      "always",
+      {
+        "annotationStyle": "block"
+      }
+    ],
+    // ES6
+    "arrow-body-style": 0,
+    "arrow-parens": 0,
+    "arrow-spacing": 2,
+    "constructor-super": 2,
+    "generator-star-spacing": [
+      2,
+      {
+        "before": true,
+        "after": true
+      }
+    ],
+    "no-class-assign": 2,
+    "no-confusing-arrow": 2,
+    "no-const-assign": 2,
+    "no-dupe-class-members": 2,
+    "no-this-before-super": 2,
+    "no-var": 2,
+    "object-shorthand": 2,
+    "prefer-arrow-callback": 2,
+    "prefer-const": 2,
+    "prefer-reflect": 0,
+    "prefer-spread": 2,
+    "prefer-template": 2,
+    "rest-spread-spacing": [
+      2,
+      "never"
+    ],
+    // Variables
+    "init-declarations": 0,
+    "no-catch-shadow": 2,
+    "no-delete-var": 2,
+    "no-label-var": 2,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-unused-vars": [
+      2,
+      {
+        "vars": "all",
+        "args": "none"
+      }
+    ],
+    "no-use-before-define": 0,
+    "react/require-default-props": 0,
+    "react/prop-types": 0,
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "react/prefer-stateless-function": [
+      2,
+      {
+        "ignorePureComponents": true
+      }
+    ],
+    "react/forbid-prop-types": [
+      0,
+      {
+        "forbid": []
+      }
+    ],
+    "import/extensions": [
+      1,
+      "never",
+      {
+        "svg": "always"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "optionalDependencies": false,
+        "peerDependencies": false
+      }
+    ],
+    "semi": [
+      "error",
+      "never"
+    ]
+  },
+  "env": {
+    "jest": true
   }
-}
+}

.flowconfig

@@ -0,0 +1,17 @@
+
+[ignore]
+.*/*[.]android.js
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+[include]
+
+[untyped]
+.*/node_modules/react-native
+
+[libs]
+
+[version]
+^0.83.0
+

Example/index.android.js

@@ -4,32 +4,14 @@
  * @flow
  */
 
-import React, { Component } from 'react';
+import React from 'react'
 import {
   AppRegistry,
-  StyleSheet,
+} from 'react-native'
-  Text,
-  View
-} from 'react-native';
 
 import ExampleMain from './ExampleMain'
 
-class Example extends Component {
-  render() {
-    return (
-        <ExampleMain />
-    );
-  }
-}
 
-const styles = StyleSheet.create({
+const Example = () => <ExampleMain />
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    padding: 10
-  }
-});
 
-AppRegistry.registerComponent('Example', () => Example);
+AppRegistry.registerComponent('Example', () => Example)

Example/index.ios.js

@@ -4,32 +4,13 @@
  * @flow
  */
 
-import React, { Component } from 'react';
+import React from 'react'
 import {
   AppRegistry,
-  StyleSheet,
+} from 'react-native'
-  Text,
-  View
-} from 'react-native';
 
 import ExampleMain from './ExampleMain'
 
-class Example extends Component {
+const Example = () => <ExampleMain />
-  render() {
-    return (
-        <ExampleMain />
-    );
-  }
-}
 
-const styles = StyleSheet.create({
+AppRegistry.registerComponent('Example', () => Example)
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    padding: 10
-  }
-});
-
-AppRegistry.registerComponent('Example', () => Example);

SegmentedControlTab.js

@@ -1,7 +1,41 @@
-import React, {PureComponent} from 'react';
+/* @flow */
-import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react'
-import {View, ViewPropTypes, StyleSheet, Text} from 'react-native';
+import {
-import TabOption from './TabOption';
+  View, StyleSheet,
+} from 'react-native'
+
+import type {
+  ViewStyleProp,
+  TextStyleProp,
+} from 'react-native/Libraries/StyleSheet/StyleSheet'
+
+import TabOption from './TabOption'
+
+type Props = {
+  tabStyle: ViewStyleProp,
+  activeTabStyle: ViewStyleProp,
+  tabTextStyle: TextStyleProp,
+  activeTabTextStyle: TextStyleProp,
+  tabBadgeContainerStyle: TextStyleProp,
+  activeTabBadgeContainerStyle: TextStyleProp,
+  tabBadgeStyle: TextStyleProp,
+  activeTabBadgeStyle: TextStyleProp,
+  onTabPress: Function,
+  textNumberOfLines: number,
+  allowFontScaling: boolean,
+  accessible: boolean,
+  activeTabOpacity: number,
+  enabled: boolean,
+  values: string[],
+  badges: string[],
+  multiple: boolean,
+  selectedIndex: number,
+  selectedIndices: number[],
+  tabsContainerStyle: ViewStyleProp,
+  tabsContainerDisableStyle: ViewStyleProp,
+  borderRadius: number,
+  accessibilityLabels: string[],
+}
 
 const styles = StyleSheet.create({
   tabsContainerStyle: {
@@ -17,47 +51,32 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     backgroundColor: 'white',
   },
-});
+})
-const handleTabPress = (index, multiple, selectedIndex, onTabPress) => {
+const handleTabPress = (
+  index: number,
+  multiple: boolean,
+  selectedIndex: number,
+  onTabPress: Function,
+) => {
   if (multiple) {
-    onTabPress(index);
+    onTabPress(index)
   } else if (selectedIndex !== index) {
-    onTabPress(index);
+    onTabPress(index)
   }
-};
+}
 
-const getAccessibilityLabelByIndex = (accessibilityLabels, index) =>
+const getAccessibilityLabelByIndex = (
-  accessibilityLabels &&
+  accessibilityLabels: string[],
-  accessibilityLabels.length > 0 &&
+  index: number,
-  accessibilityLabels[index]
+) => (accessibilityLabels
-    ? accessibilityLabels[index]
+  && accessibilityLabels.length > 0
-    : undefined;
+  && accessibilityLabels[index]
+  ? accessibilityLabels[index]
+  : undefined)
+
+export default class SegmentedControlTab extends PureComponent<Props> {
+  static defaultProps = {
 
-export default class SegmentedControlTab extends PureComponent {
-  static propTypes = {
-    values: PropTypes.array,
-    badges: PropTypes.array,
-    multiple: PropTypes.bool,
-    onTabPress: PropTypes.func,
-    selectedIndex: PropTypes.number,
-    selectedIndices: PropTypes.arrayOf(PropTypes.number),
-    tabsContainerStyle: ViewPropTypes.style,
-    tabsContainerDisableStyle: ViewPropTypes.style,
-    tabStyle: ViewPropTypes.style,
-    activeTabStyle: ViewPropTypes.style,
-    tabTextStyle: Text.propTypes.style,
-    activeTabTextStyle: Text.propTypes.style,
-    tabBadgeContainerStyle: Text.propTypes.style,
-    activeTabBadgeContainerStyle: Text.propTypes.style,
-    tabBadgeStyle: Text.propTypes.style,
-    activeTabBadgeStyle: Text.propTypes.style,
-    borderRadius: PropTypes.number,
-    textNumberOfLines: PropTypes.number,
-    allowFontScaling: PropTypes.bool,
-    accessible: PropTypes.bool,
-    accessibilityLabels: PropTypes.array,
-    activeTabOpacity: PropTypes.number,
-    enabled: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -70,7 +89,7 @@ export default class SegmentedControlTab extends PureComponent {
     selectedIndices: [0],
     onTabPress: () => {},
     tabsContainerStyle: {},
-    tabsContainerDisableStyle: {opacity: 0.6},
+    tabsContainerDisableStyle: { opacity: 0.6 },
     tabStyle: {},
     activeTabStyle: {},
     tabTextStyle: {},
@@ -86,6 +105,7 @@ export default class SegmentedControlTab extends PureComponent {
     enabled: true,
   };
 
+
   render() {
     const {
       multiple,
@@ -111,36 +131,36 @@ export default class SegmentedControlTab extends PureComponent {
       accessibilityLabels,
       activeTabOpacity,
       enabled,
-    } = this.props;
+    } = this.props
     const firstTabStyle = [
       {
-        borderRightWidth: values.length === 2 ? 1 : 0,
+        borderRightWidth: values && values.length === 2 ? 1 : 0,
         borderTopLeftRadius: borderRadius,
         borderBottomLeftRadius: borderRadius,
       },
-    ];
+    ]
     const lastTabStyle = [
       {
         borderLeftWidth: 0,
         borderTopRightRadius: borderRadius,
         borderBottomRightRadius: borderRadius,
       },
-    ];
+    ]
 
-    const tabsContainerStyles = [styles.tabsContainerStyle, tabsContainerStyle];
+    const tabsContainerStyles = [styles.tabsContainerStyle, tabsContainerStyle]
     if (!enabled) {
-      tabsContainerStyles.push(tabsContainerDisableStyle);
+      tabsContainerStyles.push(tabsContainerDisableStyle)
     }
     return (
       <View style={tabsContainerStyles} removeClippedSubviews={false}>
-        {values.map((item, index) => {
+        {values && values.map((item, index) => {
           const accessibilityText = getAccessibilityLabelByIndex(
             accessibilityLabels,
             index,
-          );
+          )
           return (
             <TabOption
-              key={`${index}${item}`}
+              key={item}
               index={index}
               badge={badges && badges[index] ? badges[index] : false}
               isTabActive={
@@ -150,21 +170,20 @@ export default class SegmentedControlTab extends PureComponent {
               }
               text={item}
               textNumberOfLines={textNumberOfLines}
-              onTabPress={indexs =>
+              onTabPress={indexs => handleTabPress(indexs, multiple, selectedIndex, onTabPress)
-                handleTabPress(indexs, multiple, selectedIndex, onTabPress)
               }
               firstTabStyle={
-                index === 0 ? [{borderRightWidth: 0}, firstTabStyle] : {}
+                index === 0 ? [{ borderRightWidth: 0 }, firstTabStyle] : {}
               }
               lastTabStyle={
                 index === values.length - 1
-                  ? [{borderLeftWidth: 0}, lastTabStyle]
+                  ? [{ borderLeftWidth: 0 }, lastTabStyle]
                   : {}
               }
               tabStyle={[
                 tabStyle,
                 index !== 0 && index !== values.length - 1
-                  ? {marginLeft: -1}
+                  ? { marginLeft: -1 }
                   : {},
               ]}
               activeTabStyle={activeTabStyle}
@@ -180,9 +199,9 @@ export default class SegmentedControlTab extends PureComponent {
               accessibilityLabel={accessibilityText || item}
               enabled={enabled}
             />
-          );
+          )
         })}
       </View>
-    );
+    )
   }
 }

TabOption.js

@@ -1,12 +1,42 @@
-import React, {PureComponent} from 'react';
+/* @flow */
-import PropTypes from 'prop-types';
+
+import React, { PureComponent } from 'react'
 import {
   View,
   TouchableOpacity,
-   StyleSheet,
+  StyleSheet,
-   Text,
+  Text,
-   ViewPropTypes
+} from 'react-native'
-  } from 'react-native';
+
+
+import type {
+  ViewStyleProp,
+  TextStyleProp,
+} from 'react-native/Libraries/StyleSheet/StyleSheet'
+
+type Props = {
+  isTabActive?: boolean,
+  index?: number,
+  badge?: any,
+  text: string,
+  firstTabStyle?: ViewStyleProp,
+  lastTabStyle?: ViewStyleProp,
+  tabStyle?: ViewStyleProp,
+  activeTabStyle?: ViewStyleProp,
+  tabTextStyle?: TextStyleProp,
+  activeTabTextStyle?: TextStyleProp,
+  tabBadgeContainerStyle?: TextStyleProp,
+  activeTabBadgeContainerStyle?: TextStyleProp,
+  tabBadgeStyle?: TextStyleProp,
+  activeTabBadgeStyle?: TextStyleProp,
+  onTabPress: Function,
+  textNumberOfLines?: number,
+  allowFontScaling?: boolean,
+  accessible?: boolean,
+  activeTabOpacity?: number,
+  accessibilityLabel?: string,
+  enabled?: boolean,
+}
 
 const styles = StyleSheet.create({
   tabStyle: {
@@ -46,33 +76,9 @@ const styles = StyleSheet.create({
   activeTabBadgeStyle: {
     color: 'black',
   },
-});
+})
-
-export default class TabOption extends PureComponent {
-  static propTypes = {
-    isTabActive: PropTypes.bool,
-    index: PropTypes.number,
-    badge: PropTypes.any,
-    text: PropTypes.string.isRequired,
-    firstTabStyle: ViewPropTypes.style,
-    lastTabStyle: ViewPropTypes.style,
-    tabStyle: ViewPropTypes.style,
-    activeTabStyle: ViewPropTypes.style,
-    tabTextStyle: Text.propTypes.style,
-    activeTabTextStyle: Text.propTypes.style,
-    tabBadgeContainerStyle: Text.propTypes.style,
-    activeTabBadgeContainerStyle: Text.propTypes.style,
-    tabBadgeStyle: Text.propTypes.style,
-    activeTabBadgeStyle: Text.propTypes.style,
-    onTabPress: PropTypes.func,
-    textNumberOfLines: PropTypes.number,
-    allowFontScaling: PropTypes.bool,
-    accessible: PropTypes.any,
-    activeTabOpacity: PropTypes.number,
-    accessibilityLabel: PropTypes.string,
-    enabled: PropTypes.bool,
-  };
 
+export default class TabOption extends PureComponent<Props> {
   static defaultProps = {
     isTabActive: false,
     index: 0,
@@ -87,10 +93,9 @@ export default class TabOption extends PureComponent {
     activeTabBadgeContainerStyle: {},
     tabBadgeStyle: {},
     activeTabBadgeStyle: {},
-    onTabPress() {},
     textNumberOfLines: 1,
     allowFontScaling: false,
-    accessible: {},
+    accessible: true,
     activeTabOpacity: 1,
     accessibilityLabel: '',
     enabled: false,
@@ -119,7 +124,7 @@ export default class TabOption extends PureComponent {
       activeTabOpacity,
       accessibilityLabel,
       enabled,
-    } = this.props;
+    } = this.props
     return (
       <TouchableOpacity
         style={[
@@ -135,8 +140,9 @@ export default class TabOption extends PureComponent {
         accessibilityComponentType="button"
         onPress={() => onTabPress(index)}
         disabled={!enabled}
-        activeOpacity={activeTabOpacity}>
+        activeOpacity={activeTabOpacity}
-        <View style={{flexDirection: 'row'}}>
+      >
+        <View style={{ flexDirection: 'row' }}>
           <Text
             style={[
               styles.tabTextStyle,
@@ -147,7 +153,8 @@ export default class TabOption extends PureComponent {
             ]}
             numberOfLines={textNumberOfLines}
             allowFontScaling={allowFontScaling}
-            ellipsizeMode="tail">
+            ellipsizeMode="tail"
+          >
             {text}
           </Text>
           {Boolean(badge) && (
@@ -157,11 +164,12 @@ export default class TabOption extends PureComponent {
                 tabBadgeContainerStyle,
                 isTabActive
                   ? [
-                      styles.activeTabBadgeContainerStyle,
+                    styles.activeTabBadgeContainerStyle,
-                      activeTabBadgeContainerStyle,
+                    activeTabBadgeContainerStyle,
-                    ]
+                  ]
                   : {},
-              ]}>
+              ]}
+            >
               <Text
                 style={[
                   styles.tabBadgeStyle,
@@ -170,13 +178,14 @@ export default class TabOption extends PureComponent {
                     ? [styles.activeTabBadgeStyle, activeTabBadgeStyle]
                     : {},
                 ]}
-                allowFontScaling={allowFontScaling}>
+                allowFontScaling={allowFontScaling}
+              >
                 {badge}
               </Text>
             </View>
           )}
         </View>
       </TouchableOpacity>
-    );
+    )
   }
 }

package.json

@@ -4,7 +4,7 @@
   "description": "A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android.",
   "main": "SegmentedControlTab.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "flow": "flow check"
   },
   "repository": {
     "type": "git",
@@ -26,7 +26,20 @@
     "url": "https://github.com/kirankalyan5/react-native-segmented-control-tab/issues"
   },
   "homepage": "https://github.com/kirankalyan5/react-native-segmented-control-tab#readme",
-  "dependencies": {
+  "devDependencies": {
-    "prop-types": "^15.5.10"
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react-native": "^4.0.1",
+    "eslint": "^5.7.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-flowtype": "^3.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
+    "flow-bin": "^0.83.0",
+    "react": "16.6.0-alpha.8af6728",
+    "react-native": "^0.57.2"
   }
 }