diff --git a/SegmentedControlTab.js b/SegmentedControlTab.js
index aa91b80..eff25fa 100644
--- a/SegmentedControlTab.js
+++ b/SegmentedControlTab.js
@@ -1,147 +1,40 @@
-import React, { Component } from 'react';
-import {
-    View,
-    ViewPropTypes,
-    TouchableOpacity,
-    StyleSheet,
-    Text
-} from 'react-native';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
+import {View, ViewPropTypes, StyleSheet, Text} from 'react-native';
+import TabOption from './TabOption';
 
+const styles = StyleSheet.create({
+  tabsContainerStyle: {
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+  },
+  tabStyle: {
+    paddingVertical: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: '#0076FF',
+    borderWidth: 1,
+    backgroundColor: 'white',
+  },
+});
 const handleTabPress = (index, multiple, selectedIndex, onTabPress) => {
-    if (multiple) {
-        onTabPress(index);
-    }
-    else if (selectedIndex !== index) {
-        onTabPress(index);
-    }
+  if (multiple) {
+    onTabPress(index);
+  } else if (selectedIndex !== index) {
+    onTabPress(index);
+  }
 };
 
-const TabOption = ({
-    isTabActive, index, badge, text,
-    firstTabStyle, lastTabStyle,
-    tabStyle, activeTabStyle,
-    tabTextStyle, activeTabTextStyle,
-    tabBadgeContainerStyle, activeTabBadgeContainerStyle,
-    tabBadgeStyle, activeTabBadgeStyle,
-    onTabPress, textNumberOfLines,
-    allowFontScaling,
-    accessible,
-    activeTabOpacity,
-    accessibilityLabel,
-    enabled,
-}) => {
-    return (
-        <TouchableOpacity style={[
-            styles.tabStyle,
-            tabStyle,
-            isTabActive ? [styles.activeTabStyle, activeTabStyle] : {},
-            firstTabStyle,
-            lastTabStyle]}
-            accessible={accessible}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityTraits={isTabActive ? "selected" : "button"}
-            accessibilityComponentType={"button"}
-            onPress={() => onTabPress(index)}
-            disabled={!enabled}
-            activeOpacity={activeTabOpacity}>
-            <View style={{ flexDirection: "row" }}>
-                <Text style={[
-                    styles.tabTextStyle,
-                    tabTextStyle,
-                    isTabActive ? [styles.activeTabTextStyle, activeTabTextStyle] : {}]}
-                    numberOfLines={textNumberOfLines}
-                    allowFontScaling={allowFontScaling}
-                    ellipsizeMode="tail">
-                    {text}
-                </Text>
-                {
-                    Boolean(badge) ?
-                        <View style={[
-                            styles.tabBadgeContainerStyle,
-                            tabBadgeContainerStyle,
-                            isTabActive ? [styles.activeTabBadgeContainerStyle, activeTabBadgeContainerStyle] : {}]}>
-                            <Text style={[
-                                styles.tabBadgeStyle,
-                                tabBadgeStyle,
-                                isTabActive ? [styles.activeTabBadgeStyle, activeTabBadgeStyle] : {}]}
-                                allowFontScaling={allowFontScaling}>
-                                {badge}
-                            </Text>
-                        </View> : false
-                }
-            </View>
-        </TouchableOpacity>
-    );
-}
+const getAccessibilityLabelByIndex = (accessibilityLabels, index) =>
+  accessibilityLabels &&
+  accessibilityLabels.length > 0 &&
+  accessibilityLabels[index]
+    ? accessibilityLabels[index]
+    : undefined;
 
-const getAccessibilityLabelByIndex = (accessibilityLabels, index) => {
-    return accessibilityLabels && accessibilityLabels.length > 0 && accessibilityLabels[index] ?  accessibilityLabels[index] : undefined
-}
-
-const SegmentedControlTab = ({
-    multiple, selectedIndex, selectedIndices, values,
-    badges, borderRadius, tabsContainerStyle, tabsContainerDisableStyle,
-    tabStyle, activeTabStyle,
-    tabTextStyle, activeTabTextStyle,
-    tabBadgeContainerStyle, activeTabBadgeContainerStyle,
-    tabBadgeStyle, activeTabBadgeStyle,
-    onTabPress, textNumberOfLines,
-    allowFontScaling,
-    accessible,
-    accessibilityLabels,
-    activeTabOpacity,
-    enabled
-}) => {
-
-    const firstTabStyle = [{ borderRightWidth: values.length == 2 ? 1 : 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius }]
-    const lastTabStyle = [{ borderLeftWidth: 0, borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius }]
-
-    const tabsContainerStyles = [styles.tabsContainerStyle, tabsContainerStyle]
-    if(!enabled) {
-        tabsContainerStyles.push(tabsContainerDisableStyle)
-    }
-
-    return (
-        <View
-            style={tabsContainerStyles}
-            removeClippedSubviews={false}>
-            {
-                values.map((item, index) => {
-                    const accessibilityText = getAccessibilityLabelByIndex(accessibilityLabels, index)
-                    return (
-                        <TabOption
-                            key={index}
-                            index={index}
-                            badge={badges && badges[index] ? badges[index] : false}
-                            isTabActive={multiple ? selectedIndices.includes(index) : selectedIndex === index}
-                            text={item}
-                            textNumberOfLines={textNumberOfLines}
-                            onTabPress={(index) => handleTabPress(index, multiple, selectedIndex, onTabPress)}
-                            firstTabStyle={index === 0 ? [{ borderRightWidth: 0 }, firstTabStyle] : {}}
-                            lastTabStyle={index === values.length - 1 ? [{ borderLeftWidth: 0 }, lastTabStyle] : {}}
-                            tabStyle={[tabStyle, index !== 0 && index !== values.length - 1 ? { marginLeft: -1 } : {}]}
-                            activeTabStyle={activeTabStyle}
-                            tabTextStyle={tabTextStyle}
-                            activeTabTextStyle={activeTabTextStyle}
-                            tabBadgeContainerStyle={tabBadgeContainerStyle}
-                            activeTabBadgeContainerStyle={activeTabBadgeContainerStyle}
-                            tabBadgeStyle={tabBadgeStyle}
-                            activeTabBadgeStyle={activeTabBadgeStyle}
-                            allowFontScaling={allowFontScaling}
-                            activeTabOpacity={activeTabOpacity}
-                            accessible={accessible}
-                            accessibilityLabel={accessibilityText ? accessibilityText : item }
-                            enabled={enabled}
-                        />
-                    );
-                })
-            }
-        </View>
-    );
-};
-
-SegmentedControlTab.propTypes = {
+export default class SegmentedControlTab extends PureComponent {
+  static propTypes = {
     values: PropTypes.array,
     badges: PropTypes.array,
     multiple: PropTypes.bool,
@@ -164,10 +57,10 @@ SegmentedControlTab.propTypes = {
     accessible: PropTypes.bool,
     accessibilityLabels: PropTypes.array,
     activeTabOpacity: PropTypes.number,
-    enabled: PropTypes.bool
-};
+    enabled: PropTypes.bool,
+  };
 
-SegmentedControlTab.defaultProps = {
+  static defaultProps = {
     values: ['One', 'Two', 'Three'],
     accessible: true,
     accessibilityLabels: [],
@@ -175,9 +68,9 @@ SegmentedControlTab.defaultProps = {
     multiple: false,
     selectedIndex: 0,
     selectedIndices: [0],
-    onTabPress: () => { },
+    onTabPress: () => {},
     tabsContainerStyle: {},
-    tabsContainerDisableStyle: { opacity:0.6 },
+    tabsContainerDisableStyle: {opacity: 0.6},
     tabStyle: {},
     activeTabStyle: {},
     tabTextStyle: {},
@@ -191,50 +84,105 @@ SegmentedControlTab.defaultProps = {
     allowFontScaling: true,
     activeTabOpacity: 1,
     enabled: true,
-};
+  };
 
-const styles = StyleSheet.create({
-    tabsContainerStyle: {
-        backgroundColor: 'transparent',
-        flexDirection: 'row',
-    },
-    tabStyle: {
-        paddingVertical: 5,
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderColor: '#0076FF',
-        borderWidth: 1,
-        backgroundColor: 'white',
-    },
-    activeTabStyle: {
-        backgroundColor: '#0076FF'
-    },
-    tabTextStyle: {
-        color: '#0076FF'
-    },
-    activeTabTextStyle: {
-        color: 'white'
-    },
-    tabBadgeContainerStyle: {
-        borderRadius: 20,
-        backgroundColor: 'red',
-        paddingLeft: 5,
-        paddingRight: 5,
-        marginLeft: 5,
-        marginBottom: 3
-    },
-    activeTabBadgeContainerStyle: {
-        backgroundColor: 'white'
-    },
-    tabBadgeStyle: {
-        color: 'white',
-        fontSize: 11,
-        fontWeight: 'bold'
-    },
-    activeTabBadgeStyle: {
-        color: 'black'
+  render() {
+    const {
+      multiple,
+      selectedIndex,
+      selectedIndices,
+      values,
+      badges,
+      borderRadius,
+      tabsContainerStyle,
+      tabsContainerDisableStyle,
+      tabStyle,
+      activeTabStyle,
+      tabTextStyle,
+      activeTabTextStyle,
+      tabBadgeContainerStyle,
+      activeTabBadgeContainerStyle,
+      tabBadgeStyle,
+      activeTabBadgeStyle,
+      onTabPress,
+      textNumberOfLines,
+      allowFontScaling,
+      accessible,
+      accessibilityLabels,
+      activeTabOpacity,
+      enabled,
+    } = this.props;
+    const firstTabStyle = [
+      {
+        borderRightWidth: values.length === 2 ? 1 : 0,
+        borderTopLeftRadius: borderRadius,
+        borderBottomLeftRadius: borderRadius,
+      },
+    ];
+    const lastTabStyle = [
+      {
+        borderLeftWidth: 0,
+        borderTopRightRadius: borderRadius,
+        borderBottomRightRadius: borderRadius,
+      },
+    ];
+
+    const tabsContainerStyles = [styles.tabsContainerStyle, tabsContainerStyle];
+    if (!enabled) {
+      tabsContainerStyles.push(tabsContainerDisableStyle);
     }
-});
-
-export default SegmentedControlTab
+    return (
+      <View style={tabsContainerStyles} removeClippedSubviews={false}>
+        {values.map((item, index) => {
+          const accessibilityText = getAccessibilityLabelByIndex(
+            accessibilityLabels,
+            index,
+          );
+          return (
+            <TabOption
+              key={`${index}${item}`}
+              index={index}
+              badge={badges && badges[index] ? badges[index] : false}
+              isTabActive={
+                multiple
+                  ? selectedIndices.includes(index)
+                  : selectedIndex === index
+              }
+              text={item}
+              textNumberOfLines={textNumberOfLines}
+              onTabPress={indexs =>
+                handleTabPress(indexs, multiple, selectedIndex, onTabPress)
+              }
+              firstTabStyle={
+                index === 0 ? [{borderRightWidth: 0}, firstTabStyle] : {}
+              }
+              lastTabStyle={
+                index === values.length - 1
+                  ? [{borderLeftWidth: 0}, lastTabStyle]
+                  : {}
+              }
+              tabStyle={[
+                tabStyle,
+                index !== 0 && index !== values.length - 1
+                  ? {marginLeft: -1}
+                  : {},
+              ]}
+              activeTabStyle={activeTabStyle}
+              tabTextStyle={tabTextStyle}
+              activeTabTextStyle={activeTabTextStyle}
+              tabBadgeContainerStyle={tabBadgeContainerStyle}
+              activeTabBadgeContainerStyle={activeTabBadgeContainerStyle}
+              tabBadgeStyle={tabBadgeStyle}
+              activeTabBadgeStyle={activeTabBadgeStyle}
+              allowFontScaling={allowFontScaling}
+              activeTabOpacity={activeTabOpacity}
+              accessible={accessible}
+              accessibilityLabel={accessibilityText || item}
+              enabled={enabled}
+            />
+          );
+        })}
+      </View>
+    );
+  }
+}
diff --git a/TabOption.js b/TabOption.js
new file mode 100644
index 0000000..d7c0855
--- /dev/null
+++ b/TabOption.js
@@ -0,0 +1,182 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {
+  View,
+  TouchableOpacity,
+   StyleSheet,
+   Text,
+   ViewPropTypes
+  } from 'react-native';
+
+const styles = StyleSheet.create({
+  tabStyle: {
+    paddingVertical: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: '#0076FF',
+    borderWidth: 1,
+    backgroundColor: 'white',
+  },
+  activeTabStyle: {
+    backgroundColor: '#0076FF',
+  },
+  tabTextStyle: {
+    color: '#0076FF',
+  },
+  activeTabTextStyle: {
+    color: 'white',
+  },
+  tabBadgeContainerStyle: {
+    borderRadius: 20,
+    backgroundColor: 'red',
+    paddingLeft: 5,
+    paddingRight: 5,
+    marginLeft: 5,
+    marginBottom: 3,
+  },
+  activeTabBadgeContainerStyle: {
+    backgroundColor: 'white',
+  },
+  tabBadgeStyle: {
+    color: 'white',
+    fontSize: 11,
+    fontWeight: 'bold',
+  },
+  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,
+  };
+
+  static defaultProps = {
+    isTabActive: false,
+    index: 0,
+    badge: '',
+    firstTabStyle: {},
+    lastTabStyle: {},
+    tabStyle: {},
+    activeTabStyle: {},
+    tabTextStyle: {},
+    activeTabTextStyle: {},
+    tabBadgeContainerStyle: {},
+    activeTabBadgeContainerStyle: {},
+    tabBadgeStyle: {},
+    activeTabBadgeStyle: {},
+    onTabPress() {},
+    textNumberOfLines: 1,
+    allowFontScaling: false,
+    accessible: {},
+    activeTabOpacity: 1,
+    accessibilityLabel: '',
+    enabled: false,
+  };
+
+  render() {
+    const {
+      isTabActive,
+      index,
+      badge,
+      text,
+      firstTabStyle,
+      lastTabStyle,
+      tabStyle,
+      activeTabStyle,
+      tabTextStyle,
+      activeTabTextStyle,
+      tabBadgeContainerStyle,
+      activeTabBadgeContainerStyle,
+      tabBadgeStyle,
+      activeTabBadgeStyle,
+      onTabPress,
+      textNumberOfLines,
+      allowFontScaling,
+      accessible,
+      activeTabOpacity,
+      accessibilityLabel,
+      enabled,
+    } = this.props;
+    return (
+      <TouchableOpacity
+        style={[
+          styles.tabStyle,
+          tabStyle,
+          isTabActive ? [styles.activeTabStyle, activeTabStyle] : {},
+          firstTabStyle,
+          lastTabStyle,
+        ]}
+        accessible={accessible}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityTraits={isTabActive ? 'selected' : 'button'}
+        accessibilityComponentType="button"
+        onPress={() => onTabPress(index)}
+        disabled={!enabled}
+        activeOpacity={activeTabOpacity}>
+        <View style={{flexDirection: 'row'}}>
+          <Text
+            style={[
+              styles.tabTextStyle,
+              tabTextStyle,
+              isTabActive
+                ? [styles.activeTabTextStyle, activeTabTextStyle]
+                : {},
+            ]}
+            numberOfLines={textNumberOfLines}
+            allowFontScaling={allowFontScaling}
+            ellipsizeMode="tail">
+            {text}
+          </Text>
+          {Boolean(badge) && (
+            <View
+              style={[
+                styles.tabBadgeContainerStyle,
+                tabBadgeContainerStyle,
+                isTabActive
+                  ? [
+                      styles.activeTabBadgeContainerStyle,
+                      activeTabBadgeContainerStyle,
+                    ]
+                  : {},
+              ]}>
+              <Text
+                style={[
+                  styles.tabBadgeStyle,
+                  tabBadgeStyle,
+                  isTabActive
+                    ? [styles.activeTabBadgeStyle, activeTabBadgeStyle]
+                    : {},
+                ]}
+                allowFontScaling={allowFontScaling}>
+                {badge}
+              </Text>
+            </View>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}