@hero-design/rn 7.1.3-alpha7 → 7.1.3-alpha8

package/.expo/packager-info.json

@@ -1,7 +1,7 @@
 {
   "devToolsPort": 19002,
   "expoServerPort": null,
-  "packagerPort": null,
+  "packagerPort": 19000,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,

package/es/index.js

@@ -1485,6 +1485,17 @@ var ThemeProvider = function ThemeProvider(props) {
   }, props.children);
 };
 
+var BASE_BORDER_WIDTH = 1;
+var BASE_SPACE = 8;
+var BASE_FONT = 'BeVietnamPro';
+var BASE_FONT_SIZE = 10;
+var scale$1 = {
+  borderWidth: BASE_BORDER_WIDTH,
+  space: BASE_SPACE,
+  font: BASE_FONT,
+  fontSize: BASE_FONT_SIZE
+};
+
 var palette = {
   black: '#000000',
   blue: '#1dbeee',
@@ -1610,60 +1621,94 @@ var scale = function scale(size) {
   return size + (horizontalScale(size) - size) * factor;
 };
 
-var BASE$1 = 8;
-var space = {
-  xxsmall: scale(BASE$1 * 0.25),
-  xsmall: scale(BASE$1 * 0.5),
-  small: scale(BASE$1),
-  medium: scale(BASE$1 * 2),
-  large: scale(BASE$1 * 3),
-  xlarge: scale(BASE$1 * 4),
-  xxlarge: scale(BASE$1 * 5),
-  xxxlarge: scale(BASE$1 * 6),
-  xxxxlarge: scale(BASE$1 * 7)
+// https://www.ibm.com/design/language/typography/type-specs-ui#scales
+
+var genFontSize = function genFontSize(prev, at) {
+  return prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;
+};
+
+var getFonts = function getFonts(baseFont) {
+  return {
+    light: "".concat(baseFont, "-Light"),
+    regular: "".concat(baseFont, "-Regular"),
+    semiBold: "".concat(baseFont, "-SemiBold")
+  };
 };
 
-var BASE = 16;
-var fonts = {
-  light: 'BeVietnamPro-Light',
-  regular: 'BeVietnamPro-Regular',
-  semiBold: 'BeVietnamPro-SemiBold'
+var getFontSizes = function getFontSizes(baseFontSize) {
+  var fontSizes = Array.from(new Array(9));
+  fontSizes.forEach(function (_, index) {
+    if (index === 0) {
+      fontSizes[0] = baseFontSize;
+    } else {
+      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
+    }
+
+    return undefined;
+  });
+  return {
+    xxxxxlarge: scale(fontSizes[8]),
+    xxxxlarge: scale(fontSizes[7]),
+    xxxlarge: scale(fontSizes[6]),
+    xxlarge: scale(fontSizes[5]),
+    xlarge: scale(fontSizes[4]),
+    large: scale(fontSizes[3]),
+    medium: scale(fontSizes[2]),
+    small: scale(fontSizes[1]),
+    xsmall: scale(fontSizes[0]) //     10
+
+  };
 };
-var fontSizes = {
-  xxxxxlarge: scale(BASE * 2),
-  xxxxlarge: scale(BASE * 1.75),
-  xxxlarge: scale(BASE * 1.5),
-  xxlarge: scale(BASE * 1.25),
-  xlarge: scale(BASE * 1.125),
-  large: scale(BASE),
-  medium: scale(BASE * 0.875),
-  small: scale(BASE * 0.75),
-  xsmall: scale(BASE * 0.625) //      10
 
+var getLineHeights = function getLineHeights(fontSizes) {
+  var additionalSpace = 8;
+  return {
+    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
+    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
+    xxxlarge: fontSizes.xxxlarge + additionalSpace,
+    xxlarge: fontSizes.xxlarge + additionalSpace,
+    xlarge: fontSizes.xlarge + additionalSpace,
+    large: fontSizes.large + additionalSpace,
+    medium: fontSizes.medium + additionalSpace,
+    small: fontSizes.small + additionalSpace,
+    xsmall: fontSizes.xsmall + additionalSpace
+  };
 };
-var lineHeights = {
-  xxxxxlarge: fontSizes.xxxxxlarge + 8,
-  xxxxlarge: fontSizes.xxxxlarge + 8,
-  xxxlarge: fontSizes.xxxlarge + 8,
-  xxlarge: fontSizes.xxlarge + 8,
-  xlarge: fontSizes.xlarge + 8,
-  large: fontSizes.large + 8,
-  medium: fontSizes.medium + 8,
-  small: fontSizes.small + 8,
-  xsmall: fontSizes.xsmall + 8
+
+var getSpace = function getSpace(baseSpace) {
+  return {
+    xxsmall: scale(baseSpace * 0.25),
+    xsmall: scale(baseSpace * 0.5),
+    small: scale(baseSpace),
+    medium: scale(baseSpace * 2),
+    large: scale(baseSpace * 3),
+    xlarge: scale(baseSpace * 4),
+    xxlarge: scale(baseSpace * 5),
+    xxxlarge: scale(baseSpace * 6),
+    xxxxlarge: scale(baseSpace * 7)
+  };
 };
 
-var borderWidths = {
-  base: 1
+var getBorderWidths = function getBorderWidths(baseBorderWidth) {
+  return {
+    base: baseBorderWidth
+  };
 };
 
-var globalTheme = {
-  colors: _objectSpread2({}, systemPalette),
-  space: space,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  lineHeights: lineHeights,
-  borderWidths: borderWidths
+var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
+  var fonts = getFonts(scale.font);
+  var fontSizes = getFontSizes(scale.fontSize);
+  var lineHeights = getLineHeights(fontSizes);
+  var borderWidths = getBorderWidths(scale.borderWidth);
+  var space = getSpace(scale.space);
+  return {
+    colors: _objectSpread2({}, systemPalette),
+    fonts: fonts,
+    fontSizes: fontSizes,
+    lineHeights: lineHeights,
+    borderWidths: borderWidths,
+    space: space
+  };
 };
 
 var getBadgeTheme = function getBadgeTheme(theme) {
@@ -1889,17 +1934,19 @@ var getFABTheme = function getFABTheme(theme) {
 };
 
 var getTheme = function getTheme() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
-  return _objectSpread2(_objectSpread2({}, theme), {}, {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
+  var globalTheme = getGlobalTheme(scale, systemPallete);
+  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
-      badge: getBadgeTheme(theme),
-      bottomNavigation: getBottomNavigationTheme(theme),
-      card: getCardTheme(theme),
-      divider: getDividerTheme(theme),
-      icon: getIconTheme(theme),
-      tabs: getTabsTheme(theme),
-      typography: getTypographyTheme(theme),
-      fab: getFABTheme(theme)
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      divider: getDividerTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      fab: getFABTheme(globalTheme)
     }
   });
 };
@@ -13639,7 +13686,7 @@ var StyledBottomBarText = index$1(Typography.Text)(function (_ref3) {
 var isIOS = Platform.OS === 'ios';
 Platform.OS === 'android';
 
-var _excluded$3 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$3 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -13647,7 +13694,7 @@ var getInactiveIcon = function getInactiveIcon(icon) {
 };
 
 var BottomNavigation = function BottomNavigation(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -13673,7 +13720,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
   return /*#__PURE__*/React.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React.createElement(ContentWrapper$1, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -13687,7 +13735,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
     return /*#__PURE__*/React.createElement(BottomNavigationTab, {
       key: key,
-      testID: "route-screen-".concat(selectedTabKey),
+      testID: testID ? "route-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
@@ -13709,9 +13757,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
       key: key,
       onPress: function onPress() {
-        if (key !== selectedTabKey) {
-          onChange(key);
-        }
+        return onTabPress(key);
       },
       testID: testID
     }, /*#__PURE__*/React.createElement(BottomBarItem, null, /*#__PURE__*/React.createElement(Icon, {
@@ -14084,10 +14130,10 @@ var StyledHeaderTabText = index$1(Typography.Text)(function (_ref6) {
   };
 });
 
-var _excluded = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var Tabs = function Tabs(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -14105,6 +14151,21 @@ var Tabs = function Tabs(_ref) {
       loaded = _React$useState2[0],
       setLoaded = _React$useState2[1];
 
+  React.useEffect(function () {
+    var selectedTabIndex = tabs.findIndex(function (item) {
+      return item.key === selectedTabKey;
+    });
+
+    if (selectedTabIndex !== -1) {
+      var _flatListRef$current;
+
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded(function (loadedState) {
@@ -14125,17 +14186,16 @@ var Tabs = function Tabs(_ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref2) {
       var index = _ref2.index;
       setTimeout(function () {
-        var _flatListRef$current;
+        var _flatListRef$current2;
 
-        return (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
       }, 100);
     },
     renderItem: function renderItem(_ref3) {
-      var tab = _ref3.item,
-          index = _ref3.index;
+      var tab = _ref3.item;
       var key = tab.key,
           icon = tab.icon,
           title = tab.title,
@@ -14144,15 +14204,7 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React.createElement(TouchableOpacity, {
         key: key,
         onPress: function onPress() {
-          if (key !== selectedTabKey) {
-            var _flatListRef$current2;
-
-            onChange(key);
-            (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
-              index: index,
-              viewPosition: 0.5
-            });
-          }
+          return onTabPress(key);
         },
         testID: testID
       }, /*#__PURE__*/React.createElement(HeaderTabItem, null, /*#__PURE__*/React.createElement(StyledHeaderTabIcon, {
@@ -14167,7 +14219,8 @@ var Tabs = function Tabs(_ref) {
     }
   })), /*#__PURE__*/React.createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -14181,7 +14234,7 @@ var Tabs = function Tabs(_ref) {
 
     return /*#__PURE__*/React.createElement(TabScreen, {
       key: key,
-      testID: "tab-screen-".concat(selectedTabKey),
+      testID: testID ? "tab-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',

package/lib/index.js

@@ -1512,6 +1512,17 @@ var ThemeProvider = function ThemeProvider(props) {
   }, props.children);
 };
 
+var BASE_BORDER_WIDTH = 1;
+var BASE_SPACE = 8;
+var BASE_FONT = 'BeVietnamPro';
+var BASE_FONT_SIZE = 10;
+var scale$1 = {
+  borderWidth: BASE_BORDER_WIDTH,
+  space: BASE_SPACE,
+  font: BASE_FONT,
+  fontSize: BASE_FONT_SIZE
+};
+
 var palette = {
   black: '#000000',
   blue: '#1dbeee',
@@ -1637,60 +1648,94 @@ var scale = function scale(size) {
   return size + (horizontalScale(size) - size) * factor;
 };
 
-var BASE$1 = 8;
-var space = {
-  xxsmall: scale(BASE$1 * 0.25),
-  xsmall: scale(BASE$1 * 0.5),
-  small: scale(BASE$1),
-  medium: scale(BASE$1 * 2),
-  large: scale(BASE$1 * 3),
-  xlarge: scale(BASE$1 * 4),
-  xxlarge: scale(BASE$1 * 5),
-  xxxlarge: scale(BASE$1 * 6),
-  xxxxlarge: scale(BASE$1 * 7)
+// https://www.ibm.com/design/language/typography/type-specs-ui#scales
+
+var genFontSize = function genFontSize(prev, at) {
+  return prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;
+};
+
+var getFonts = function getFonts(baseFont) {
+  return {
+    light: "".concat(baseFont, "-Light"),
+    regular: "".concat(baseFont, "-Regular"),
+    semiBold: "".concat(baseFont, "-SemiBold")
+  };
 };
 
-var BASE = 16;
-var fonts = {
-  light: 'BeVietnamPro-Light',
-  regular: 'BeVietnamPro-Regular',
-  semiBold: 'BeVietnamPro-SemiBold'
+var getFontSizes = function getFontSizes(baseFontSize) {
+  var fontSizes = Array.from(new Array(9));
+  fontSizes.forEach(function (_, index) {
+    if (index === 0) {
+      fontSizes[0] = baseFontSize;
+    } else {
+      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
+    }
+
+    return undefined;
+  });
+  return {
+    xxxxxlarge: scale(fontSizes[8]),
+    xxxxlarge: scale(fontSizes[7]),
+    xxxlarge: scale(fontSizes[6]),
+    xxlarge: scale(fontSizes[5]),
+    xlarge: scale(fontSizes[4]),
+    large: scale(fontSizes[3]),
+    medium: scale(fontSizes[2]),
+    small: scale(fontSizes[1]),
+    xsmall: scale(fontSizes[0]) //     10
+
+  };
 };
-var fontSizes = {
-  xxxxxlarge: scale(BASE * 2),
-  xxxxlarge: scale(BASE * 1.75),
-  xxxlarge: scale(BASE * 1.5),
-  xxlarge: scale(BASE * 1.25),
-  xlarge: scale(BASE * 1.125),
-  large: scale(BASE),
-  medium: scale(BASE * 0.875),
-  small: scale(BASE * 0.75),
-  xsmall: scale(BASE * 0.625) //      10
 
+var getLineHeights = function getLineHeights(fontSizes) {
+  var additionalSpace = 8;
+  return {
+    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
+    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
+    xxxlarge: fontSizes.xxxlarge + additionalSpace,
+    xxlarge: fontSizes.xxlarge + additionalSpace,
+    xlarge: fontSizes.xlarge + additionalSpace,
+    large: fontSizes.large + additionalSpace,
+    medium: fontSizes.medium + additionalSpace,
+    small: fontSizes.small + additionalSpace,
+    xsmall: fontSizes.xsmall + additionalSpace
+  };
 };
-var lineHeights = {
-  xxxxxlarge: fontSizes.xxxxxlarge + 8,
-  xxxxlarge: fontSizes.xxxxlarge + 8,
-  xxxlarge: fontSizes.xxxlarge + 8,
-  xxlarge: fontSizes.xxlarge + 8,
-  xlarge: fontSizes.xlarge + 8,
-  large: fontSizes.large + 8,
-  medium: fontSizes.medium + 8,
-  small: fontSizes.small + 8,
-  xsmall: fontSizes.xsmall + 8
+
+var getSpace = function getSpace(baseSpace) {
+  return {
+    xxsmall: scale(baseSpace * 0.25),
+    xsmall: scale(baseSpace * 0.5),
+    small: scale(baseSpace),
+    medium: scale(baseSpace * 2),
+    large: scale(baseSpace * 3),
+    xlarge: scale(baseSpace * 4),
+    xxlarge: scale(baseSpace * 5),
+    xxxlarge: scale(baseSpace * 6),
+    xxxxlarge: scale(baseSpace * 7)
+  };
 };
 
-var borderWidths = {
-  base: 1
+var getBorderWidths = function getBorderWidths(baseBorderWidth) {
+  return {
+    base: baseBorderWidth
+  };
 };
 
-var globalTheme = {
-  colors: _objectSpread2({}, systemPalette),
-  space: space,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  lineHeights: lineHeights,
-  borderWidths: borderWidths
+var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
+  var fonts = getFonts(scale.font);
+  var fontSizes = getFontSizes(scale.fontSize);
+  var lineHeights = getLineHeights(fontSizes);
+  var borderWidths = getBorderWidths(scale.borderWidth);
+  var space = getSpace(scale.space);
+  return {
+    colors: _objectSpread2({}, systemPalette),
+    fonts: fonts,
+    fontSizes: fontSizes,
+    lineHeights: lineHeights,
+    borderWidths: borderWidths,
+    space: space
+  };
 };
 
 var getBadgeTheme = function getBadgeTheme(theme) {
@@ -1916,17 +1961,19 @@ var getFABTheme = function getFABTheme(theme) {
 };
 
 var getTheme = function getTheme() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
-  return _objectSpread2(_objectSpread2({}, theme), {}, {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
+  var globalTheme = getGlobalTheme(scale, systemPallete);
+  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
-      badge: getBadgeTheme(theme),
-      bottomNavigation: getBottomNavigationTheme(theme),
-      card: getCardTheme(theme),
-      divider: getDividerTheme(theme),
-      icon: getIconTheme(theme),
-      tabs: getTabsTheme(theme),
-      typography: getTypographyTheme(theme),
-      fab: getFABTheme(theme)
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      divider: getDividerTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      fab: getFABTheme(globalTheme)
     }
   });
 };
@@ -13666,7 +13713,7 @@ var StyledBottomBarText = index$1(Typography.Text)(function (_ref3) {
 var isIOS = reactNative.Platform.OS === 'ios';
 reactNative.Platform.OS === 'android';
 
-var _excluded$3 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$3 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -13674,7 +13721,7 @@ var getInactiveIcon = function getInactiveIcon(icon) {
 };
 
 var BottomNavigation = function BottomNavigation(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -13700,7 +13747,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -13714,7 +13762,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement(BottomNavigationTab, {
       key: key,
-      testID: "route-screen-".concat(selectedTabKey),
+      testID: testID ? "route-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
@@ -13736,9 +13784,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
       key: key,
       onPress: function onPress() {
-        if (key !== selectedTabKey) {
-          onChange(key);
-        }
+        return onTabPress(key);
       },
       testID: testID
     }, /*#__PURE__*/React__default["default"].createElement(BottomBarItem, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -14111,10 +14157,10 @@ var StyledHeaderTabText = index$1(Typography.Text)(function (_ref6) {
   };
 });
 
-var _excluded = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var Tabs = function Tabs(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -14132,6 +14178,21 @@ var Tabs = function Tabs(_ref) {
       loaded = _React$useState2[0],
       setLoaded = _React$useState2[1];
 
+  React__default["default"].useEffect(function () {
+    var selectedTabIndex = tabs.findIndex(function (item) {
+      return item.key === selectedTabKey;
+    });
+
+    if (selectedTabIndex !== -1) {
+      var _flatListRef$current;
+
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded(function (loadedState) {
@@ -14152,17 +14213,16 @@ var Tabs = function Tabs(_ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref2) {
       var index = _ref2.index;
       setTimeout(function () {
-        var _flatListRef$current;
+        var _flatListRef$current2;
 
-        return (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
       }, 100);
     },
     renderItem: function renderItem(_ref3) {
-      var tab = _ref3.item,
-          index = _ref3.index;
+      var tab = _ref3.item;
       var key = tab.key,
           icon = tab.icon,
           title = tab.title,
@@ -14171,15 +14231,7 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
         key: key,
         onPress: function onPress() {
-          if (key !== selectedTabKey) {
-            var _flatListRef$current2;
-
-            onChange(key);
-            (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
-              index: index,
-              viewPosition: 0.5
-            });
-          }
+          return onTabPress(key);
         },
         testID: testID
       }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderTabIcon, {
@@ -14194,7 +14246,8 @@ var Tabs = function Tabs(_ref) {
     }
   })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -14208,7 +14261,7 @@ var Tabs = function Tabs(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
       key: key,
-      testID: "tab-screen-".concat(selectedTabKey),
+      testID: testID ? "tab-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha7",
+  "version": "7.1.3-alpha8",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",