@hero-design/rn 8.118.2-alpha.1 → 8.118.2-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hero-design/rn
 
+## 8.118.2-alpha.2
+
+### Patch Changes
+
+- [#4706](https://github.com/Thinkei/hero-design/pull/4706) [`82a9532c5364c2dea2ffc96153103522295aa868`](https://github.com/Thinkei/hero-design/commit/82a9532c5364c2dea2ffc96153103522295aa868) Thanks [@tqdungit](https://github.com/tqdungit)! - Trigger alpha release for rn
+
+- [#4752](https://github.com/Thinkei/hero-design/pull/4752) [`584274fa4239f511946789b9873f8234ace9bc79`](https://github.com/Thinkei/hero-design/commit/584274fa4239f511946789b9873f8234ace9bc79) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [BottomNavigation] Update sizing for iOS
+
+- [#4728](https://github.com/Thinkei/hero-design/pull/4728) [`61b2bbfe16cf7f59f6255ebc0129abfee11a61e7`](https://github.com/Thinkei/hero-design/commit/61b2bbfe16cf7f59f6255ebc0129abfee11a61e7) Thanks [@ttkien](https://github.com/ttkien)! - add react-native key to fix issue on RN 81
+
 ## 8.118.2-alpha.1
 
 ### Patch Changes

package/es/index.js

@@ -5686,13 +5686,19 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     borderTop: theme.borderWidths.base
   };
   var sizes = {
-    height: theme.sizes['6xlarge']
+    // Android default
+    height: theme.sizes['6xlarge'],
+    // iOS-specific
+    heightIOS: theme.sizes.xxxlarge
   };
   var shadows = {
     wrapper: theme.shadows.medium
   };
   var space = {
-    titleMarginTop: theme.space.xxsmall
+    titleMarginTop: theme.space.xxsmall,
+    // iOS-specific
+    contentPaddingTopIOS: theme.space.xsmall,
+    contentPaddingBottomIOS: theme.space.xsmall
   };
   return {
     colors: colors,
@@ -10275,8 +10281,12 @@ var ContentWrapper = index$c(View)({
 var BottomBarWrapper = index$c(View)(function (_ref2) {
   var themeInsets = _ref2.themeInsets,
     theme = _ref2.theme;
-  return _objectSpread2({
-    height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+  return _objectSpread2(_objectSpread2({}, Platform.select({
+    ios: {},
+    "default": {
+      height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom
+    }
+  })), {}, {
     paddingBottom: themeInsets.bottom,
     paddingLeft: Math.max(themeInsets.left, themeInsets.right),
     paddingRight: Math.max(themeInsets.left, themeInsets.right),
@@ -10285,18 +10295,29 @@ var BottomBarWrapper = index$c(View)(function (_ref2) {
     borderTopWidth: theme.__hd__.bottomNavigation.borderWidths.borderTop
   }, theme.__hd__.bottomNavigation.shadows.wrapper);
 });
-var BottomBar = index$c(View)({
-  flex: 1,
-  flexDirection: 'row',
-  overflow: 'hidden',
-  alignItems: 'center'
+var BottomBar = index$c(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return _objectSpread2(_objectSpread2({}, Platform.select({
+    ios: {
+      height: theme.__hd__.bottomNavigation.sizes.heightIOS,
+      paddingTop: theme.__hd__.bottomNavigation.space.contentPaddingTopIOS,
+      paddingBottom: theme.__hd__.bottomNavigation.space.contentPaddingBottomIOS
+    },
+    "default": {
+      flex: 1
+    }
+  })), {}, {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    alignItems: 'center'
+  });
 });
 var BottomBarItem = index$c(View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$c(Typography.Label)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledBottomBarText = index$c(Typography.Label)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
   };

package/lib/index.js

@@ -5715,13 +5715,19 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     borderTop: theme.borderWidths.base
   };
   var sizes = {
-    height: theme.sizes['6xlarge']
+    // Android default
+    height: theme.sizes['6xlarge'],
+    // iOS-specific
+    heightIOS: theme.sizes.xxxlarge
   };
   var shadows = {
     wrapper: theme.shadows.medium
   };
   var space = {
-    titleMarginTop: theme.space.xxsmall
+    titleMarginTop: theme.space.xxsmall,
+    // iOS-specific
+    contentPaddingTopIOS: theme.space.xsmall,
+    contentPaddingBottomIOS: theme.space.xsmall
   };
   return {
     colors: colors,
@@ -10304,8 +10310,12 @@ var ContentWrapper = index$c(reactNative.View)({
 var BottomBarWrapper = index$c(reactNative.View)(function (_ref2) {
   var themeInsets = _ref2.themeInsets,
     theme = _ref2.theme;
-  return _objectSpread2({
-    height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+  return _objectSpread2(_objectSpread2({}, reactNative.Platform.select({
+    ios: {},
+    "default": {
+      height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom
+    }
+  })), {}, {
     paddingBottom: themeInsets.bottom,
     paddingLeft: Math.max(themeInsets.left, themeInsets.right),
     paddingRight: Math.max(themeInsets.left, themeInsets.right),
@@ -10314,18 +10324,29 @@ var BottomBarWrapper = index$c(reactNative.View)(function (_ref2) {
     borderTopWidth: theme.__hd__.bottomNavigation.borderWidths.borderTop
   }, theme.__hd__.bottomNavigation.shadows.wrapper);
 });
-var BottomBar = index$c(reactNative.View)({
-  flex: 1,
-  flexDirection: 'row',
-  overflow: 'hidden',
-  alignItems: 'center'
+var BottomBar = index$c(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return _objectSpread2(_objectSpread2({}, reactNative.Platform.select({
+    ios: {
+      height: theme.__hd__.bottomNavigation.sizes.heightIOS,
+      paddingTop: theme.__hd__.bottomNavigation.space.contentPaddingTopIOS,
+      paddingBottom: theme.__hd__.bottomNavigation.space.contentPaddingBottomIOS
+    },
+    "default": {
+      flex: 1
+    }
+  })), {}, {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    alignItems: 'center'
+  });
 });
 var BottomBarItem = index$c(reactNative.View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$c(Typography.Label)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledBottomBarText = index$c(Typography.Label)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
   };

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.118.2-alpha.1",
+  "version": "8.118.2-alpha.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --quiet",

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
@@ -21,7 +21,12 @@ const ContentWrapper = styled(View)({
 const BottomBarWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
 }>(({ themeInsets, theme }) => ({
-  height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+  ...Platform.select({
+    ios: {},
+    default: {
+      height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+    },
+  }),
   paddingBottom: themeInsets.bottom,
   paddingLeft: Math.max(themeInsets.left, themeInsets.right),
   paddingRight: Math.max(themeInsets.left, themeInsets.right),
@@ -31,12 +36,22 @@ const BottomBarWrapper = styled(View)<{
   ...theme.__hd__.bottomNavigation.shadows.wrapper,
 }));
 
-const BottomBar = styled(View)({
-  flex: 1,
+const BottomBar = styled(View)(({ theme }) => ({
+  ...Platform.select({
+    ios: {
+      height: theme.__hd__.bottomNavigation.sizes.heightIOS,
+      paddingTop: theme.__hd__.bottomNavigation.space.contentPaddingTopIOS,
+      paddingBottom:
+        theme.__hd__.bottomNavigation.space.contentPaddingBottomIOS,
+    },
+    default: {
+      flex: 1,
+    },
+  }),
   flexDirection: 'row',
   overflow: 'hidden',
   alignItems: 'center',
-});
+}));
 
 const BottomBarItem = styled(View)({
   flex: 1,

package/src/theme/components/bottomNavigation.ts

@@ -12,7 +12,10 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
+    // Android default
     height: theme.sizes['6xlarge'],
+    // iOS-specific
+    heightIOS: theme.sizes.xxxlarge,
   };
 
   const shadows = {
@@ -21,6 +24,9 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
 
   const space = {
     titleMarginTop: theme.space.xxsmall,
+    // iOS-specific
+    contentPaddingTopIOS: theme.space.xsmall,
+    contentPaddingBottomIOS: theme.space.xsmall,
   };
 
   return { colors, borderWidths, shadows, sizes, space };

package/types/theme/components/bottomNavigation.d.ts

@@ -22,9 +22,12 @@ declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
     };
     sizes: {
         height: number;
+        heightIOS: number;
     };
     space: {
         titleMarginTop: number;
+        contentPaddingTopIOS: number;
+        contentPaddingBottomIOS: number;
     };
 };
 export default getBottomNavigationTheme;