react-native-segmented-control-tab - npm Package Compare versions

Comparing version 3.2.2 to 3.3.2

package.json

 {
   "name": "react-native-segmented-control-tab",
-  "version": "3.2.2",
+  "version": "3.3.2",
   "description": "A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android.",
@@ -5,0 +5,0 @@ "main": "SegmentedControlTab.js",

README.md

@@ -13,7 +13,11 @@ # react-native-segmented-control-tab(for Android/iOS) 🚀
 ## ScreenShots
-![screen1](http://s13.postimg.org/hd8b53rd3/screen1.png)
 
-![screen2](http://s11.postimg.org/onlfshx2r/screen2.png)
+### Android
 
-[![Screen3](https://s2.postimg.org/efbha5qah/Screen_Shot_2017-07-26_at_8.41.12_AM.png)](https://postimg.org/image/dpsoxspqt/)
+![Demo](https://github.com/kirankalyan5/react-native-segmented-control-tab/blob/master/Example/screenshots/screenshot_android.png)
+
+### iOS
+
+![Demo](https://github.com/kirankalyan5/react-native-segmented-control-tab/blob/master/Example/screenshots/screenshot_ios.png)
+
 ## Install
@@ -81,3 +85,7 @@
 onTabPress | call-back function when a tab is selected | () => {} | func
+allowFontScaling | whether the segment & badge text should allow font scaling (default matches React Native default) | true | bool
+accessible | enables accessibility for each tab | true | bool
+accessibilityLabels | Reads out the given text on each tab press when voice over is enabled. If not set, uses the text passed in as values in props as a fallback | ['Label 1', 'Label 2', 'Label 3'] | array
 
+
 ## Custom styling
@@ -91,2 +99,3 @@ ```javascript
           selectedIndex={1}
+          allowFontScaling={false}
           values={['First', 'Second', 'Third']}
@@ -93,0 +102,0 @@ onPress= {index => this.setState({selected:index})}

SegmentedControlTab.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 import {
@@ -8,3 +8,3 @@ View,
     Text
-} from 'react-native'
+} from 'react-native';
 import PropTypes from 'prop-types';
@@ -28,3 +28,8 @@
     tabBadgeStyle, activeTabBadgeStyle,
-    onTabPress,
+    onTabPress, textNumberOfLines,
+    allowFontScaling,
+    accessible,
+    activeTabOpacity,
+    accessibilityLabel,
+    enabled,
 }) => {
@@ -38,4 +43,9 @@ return (
             lastTabStyle]}
+            accessible={accessible}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityTraits={isTabActive ? "selected" : "button"}
+            accessibilityComponentType={"button"}
             onPress={() => onTabPress(index)}
-            activeOpacity={1}>
+            disabled={!enabled}
+            activeOpacity={activeTabOpacity}>
             <View style={{ flexDirection: "row" }}>
@@ -46,3 +56,4 @@ <Text style={[
                     isTabActive ? [styles.activeTabTextStyle, activeTabTextStyle] : {}]}
-                    numberOfLines={1}
+                    numberOfLines={textNumberOfLines}
+                    allowFontScaling={allowFontScaling}
                     ellipsizeMode="tail">
@@ -52,3 +63,3 @@ {text}
                 {
-                    badge ?
+                    Boolean(badge) ?
                         <View style={[
@@ -61,3 +72,4 @@ styles.tabBadgeContainerStyle,
                                 tabBadgeStyle,
-                                isTabActive ? [styles.activeTabBadgeStyle, activeTabBadgeStyle] : {}]}>
+                                isTabActive ? [styles.activeTabBadgeStyle, activeTabBadgeStyle] : {}]}
+                                allowFontScaling={allowFontScaling}>
                                 {badge}
@@ -72,5 +84,9 @@ </Text>
 
+const getAccessibilityLabelByIndex = (accessibilityLabels, index) => {
+    return accessibilityLabels && accessibilityLabels.length > 0 && accessibilityLabels[index] ?  accessibilityLabels[index] : undefined
+}
+
 const SegmentedControlTab = ({
     multiple, selectedIndex, selectedIndices, values,
-    badges, borderRadius, tabsContainerStyle,
+    badges, borderRadius, tabsContainerStyle, tabsContainerDisableStyle,
     tabStyle, activeTabStyle,
@@ -80,3 +96,8 @@ tabTextStyle, activeTabTextStyle,
     tabBadgeStyle, activeTabBadgeStyle,
-    onTabPress,
+    onTabPress, textNumberOfLines,
+    allowFontScaling,
+    accessible,
+    accessibilityLabels,
+    activeTabOpacity,
+    enabled
 }) => {
@@ -87,8 +108,14 @@
 
+    const tabsContainerStyles = [styles.tabsContainerStyle, tabsContainerStyle]
+    if(!enabled) {
+        tabsContainerStyles.push(tabsContainerDisableStyle)
+    }
+
     return (
         <View
-            style={[styles.tabsContainerStyle, tabsContainerStyle]}
+            style={tabsContainerStyles}
             removeClippedSubviews={false}>
             {
                 values.map((item, index) => {
+                    const accessibilityText = getAccessibilityLabelByIndex(accessibilityLabels, index)
                     return (
@@ -101,2 +128,3 @@ <TabOption
                             text={item}
+                            textNumberOfLines={textNumberOfLines}
                             onTabPress={(index) => handleTabPress(index, multiple, selectedIndex, onTabPress)}
@@ -112,3 +140,9 @@ firstTabStyle={index === 0 ? [{ borderRightWidth: 0 }, firstTabStyle] : {}}
                             tabBadgeStyle={tabBadgeStyle}
-                            activeTabBadgeStyle={activeTabBadgeStyle} />
+                            activeTabBadgeStyle={activeTabBadgeStyle}
+                            allowFontScaling={allowFontScaling}
+                            activeTabOpacity={activeTabOpacity}
+                            accessible={accessible}
+                            accessibilityLabel={accessibilityText ? accessibilityText : item }
+                            enabled={enabled}
+                        />
                     );
@@ -137,7 +171,15 @@ })
     activeTabBadgeStyle: Text.propTypes.style,
-    borderRadius: PropTypes.number
-}
+    borderRadius: PropTypes.number,
+    textNumberOfLines: PropTypes.number,
+    allowFontScaling: PropTypes.bool,
+    accessible: PropTypes.bool,
+    accessibilityLabels: PropTypes.array,
+    activeTabOpacity: PropTypes.number,
+    enabled: PropTypes.bool
+};
 
 SegmentedControlTab.defaultProps = {
     values: ['One', 'Two', 'Three'],
+    accessible: true,
+    accessibilityLabels: [],
     badges: ['', '', ''],
@@ -147,4 +189,5 @@ multiple: false,
     selectedIndices: [0],
-    onTabPress() { },
+    onTabPress: () => { },
     tabsContainerStyle: {},
+    tabsContainerDisableStyle: { opacity:0.6 },
     tabStyle: {},
@@ -158,4 +201,8 @@ activeTabStyle: {},
     activeTabBadgeStyle: {},
-    borderRadius: 5
-}
+    borderRadius: 5,
+    textNumberOfLines: 1,
+    allowFontScaling: true,
+    activeTabOpacity: 1,
+    enabled: true,
+};
 
@@ -204,4 +251,4 @@ const styles = StyleSheet.create({
     }
-})
+});
 
 export default SegmentedControlTab

No alert changes

Improved metrics

Total package byte prevSize

19503

increased by14.36%

Lines of code

228

increased by24.59%

Number of lines in readme file

142

increased by6.77%

No dependency changes