@sendbird/uikit-react-native-foundation 1.0.2 → 1.1.0

package/lib/commonjs/styles/HeaderStyleContext.js

@@ -11,13 +11,16 @@ var _reactNative = require("react-native");
 
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 
+var _getDefaultHeaderHeight = _interopRequireDefault(require("./getDefaultHeaderHeight"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const HeaderStyleContext = /*#__PURE__*/_react.default.createContext({
   HeaderComponent: () => null,
   defaultTitleAlign: 'left',
   statusBarTranslucent: true,
-  topInset: _reactNative.StatusBar.currentHeight ?? 0
+  topInset: _reactNative.StatusBar.currentHeight ?? 0,
+  defaultHeight: (0, _getDefaultHeaderHeight.default)(false)
 });
 
 exports.HeaderStyleContext = HeaderStyleContext;
@@ -32,12 +35,17 @@ const HeaderStyleProvider = _ref => {
   const {
     top
   } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
   return /*#__PURE__*/_react.default.createElement(HeaderStyleContext.Provider, {
     value: {
       HeaderComponent,
       defaultTitleAlign,
       statusBarTranslucent,
-      topInset: statusBarTranslucent ? top : 0
+      topInset: statusBarTranslucent ? top : 0,
+      defaultHeight: (0, _getDefaultHeaderHeight.default)(width > height)
     }
   }, children);
 };

package/lib/commonjs/styles/HeaderStyleContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["HeaderStyleContext","React","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","StatusBar","currentHeight","HeaderStyleProvider","children","top","useSafeAreaInsets"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\n\nexport type HeaderStyleContextType = {\n  HeaderComponent: (\n    props: BaseHeaderProps<\n      {\n        title?: HeaderElement;\n        left?: HeaderElement;\n        right?: HeaderElement;\n        onPressLeft?: () => void;\n        onPressRight?: () => void;\n      },\n      { clearTitleMargin?: boolean }\n    >,\n  ) => React.ReactElement | null;\n  defaultTitleAlign: 'left' | 'center';\n  statusBarTranslucent: boolean;\n  topInset: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n  HeaderComponent: () => null,\n  defaultTitleAlign: 'left',\n  statusBarTranslucent: true,\n  topInset: StatusBar.currentHeight ?? 0,\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n  children,\n  HeaderComponent = () => null,\n  defaultTitleAlign,\n  statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n  const { top } = useSafeAreaInsets();\n\n  return (\n    <HeaderStyleContext.Provider\n      value={{\n        HeaderComponent,\n        defaultTitleAlign,\n        statusBarTranslucent,\n        topInset: statusBarTranslucent ? top : 0,\n      }}\n    >\n      {children}\n    </HeaderStyleContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAqBO,MAAMA,kBAAkB,gBAAGC,cAAA,CAAMC,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAEC,sBAAA,CAAUC,aAAV,IAA2B;AAJuC,CAA5C,CAA3B;;;;AAQA,MAAMC,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCP,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEM;EAAF,IAAU,IAAAC,6CAAA,GAAhB;EAEA,oBACE,6BAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLT,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGM,GAAH,GAAS;IAJlC;EADT,GAQGD,QARH,CADF;AAYD,CApBM"}
+{"version":3,"names":["HeaderStyleContext","React","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","StatusBar","currentHeight","defaultHeight","getDefaultHeaderHeight","HeaderStyleProvider","children","top","useSafeAreaInsets","width","height","useWindowDimensions"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\n\nexport type HeaderStyleContextType = {\n  HeaderComponent: (\n    props: BaseHeaderProps<\n      {\n        title?: HeaderElement;\n        left?: HeaderElement;\n        right?: HeaderElement;\n        onPressLeft?: () => void;\n        onPressRight?: () => void;\n      },\n      { clearTitleMargin?: boolean }\n    >,\n  ) => React.ReactElement | null;\n  defaultTitleAlign: 'left' | 'center';\n  statusBarTranslucent: boolean;\n  topInset: number;\n  defaultHeight: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n  HeaderComponent: () => null,\n  defaultTitleAlign: 'left',\n  statusBarTranslucent: true,\n  topInset: StatusBar.currentHeight ?? 0,\n  defaultHeight: getDefaultHeaderHeight(false),\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n  children,\n  HeaderComponent = () => null,\n  defaultTitleAlign,\n  statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n  const { top } = useSafeAreaInsets();\n  const { width, height } = useWindowDimensions();\n\n  return (\n    <HeaderStyleContext.Provider\n      value={{\n        HeaderComponent,\n        defaultTitleAlign,\n        statusBarTranslucent,\n        topInset: statusBarTranslucent ? top : 0,\n        defaultHeight: getDefaultHeaderHeight(width > height),\n      }}\n    >\n      {children}\n    </HeaderStyleContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;AAoBO,MAAMA,kBAAkB,gBAAGC,cAAA,CAAMC,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAEC,sBAAA,CAAUC,aAAV,IAA2B,CAJuC;EAK5EC,aAAa,EAAE,IAAAC,+BAAA,EAAuB,KAAvB;AAL6D,CAA5C,CAA3B;;;;AASA,MAAMC,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCT,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEQ;EAAF,IAAU,IAAAC,6CAAA,GAAhB;EACA,MAAM;IAAEC,KAAF;IAASC;EAAT,IAAoB,IAAAC,gCAAA,GAA1B;EAEA,oBACE,6BAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLd,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGQ,GAAH,GAAS,CAJlC;MAKLJ,aAAa,EAAE,IAAAC,+BAAA,EAAuBK,KAAK,GAAGC,MAA/B;IALV;EADT,GASGJ,QATH,CADF;AAaD,CAtBM"}

package/lib/commonjs/styles/createScaleFactor.js

@@ -17,7 +17,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
 const createScaleFactor = function () {
   let deviceWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DESIGNED_DEVICE_WIDTH;
   const ratio = Math.min(width, height) / deviceWidth;
-  return dp => _reactNative.PixelRatio.roundToNearestPixel(dp * ratio);
+  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
+  return dp => _reactNative.PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
 
 createScaleFactor.updateScaleFactor = scaleFactor => {

package/lib/commonjs/styles/createScaleFactor.js.map

@@ -1 +1 @@
-{"version":3,"names":["width","height","Dimensions","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","dp","PixelRatio","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n  const ratio = Math.min(width, height) / deviceWidth;\n  return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n  DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":";;;;;;;AAAA;;AAEA,MAAM;EAAEA,KAAF;EAASC;AAAT,IAAoBC,uBAAA,CAAWC,GAAX,CAAe,QAAf,CAA1B;;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAAST,KAAT,EAAgBC,MAAhB,IAA0BK,WAAxC;EACA,OAAQI,EAAD,IAAgBC,uBAAA,CAAWC,mBAAX,CAA+BF,EAAE,GAAGH,KAApC,CAAvB;AACD,CAHD;;AAKAF,iBAAiB,CAACQ,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7E,+BAAAC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIO,IAAIC,oBAAoB,GAAGV,iBAAiB,EAA5C;;eACQA,iB"}
+{"version":3,"names":["width","height","Dimensions","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","rangedRatio","max","dp","PixelRatio","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n  const ratio = Math.min(width, height) / deviceWidth;\n  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);\n  return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n  DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":";;;;;;;AAAA;;AAEA,MAAM;EAAEA,KAAF;EAASC;AAAT,IAAoBC,uBAAA,CAAWC,GAAX,CAAe,QAAf,CAA1B;;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAAST,KAAT,EAAgBC,MAAhB,IAA0BK,WAAxC;EACA,MAAMI,WAAW,GAAGF,IAAI,CAACC,GAAL,CAASD,IAAI,CAACG,GAAL,CAAS,IAAT,EAAeJ,KAAf,CAAT,EAAgC,IAAhC,CAApB;EACA,OAAQK,EAAD,IAAgBC,uBAAA,CAAWC,mBAAX,CAA+BF,EAAE,GAAGF,WAApC,CAAvB;AACD,CAJD;;AAMAL,iBAAiB,CAACU,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7E,+BAAAC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIO,IAAIC,oBAAoB,GAAGZ,iBAAiB,EAA5C;;eACQA,iB"}

package/lib/commonjs/ui/GroupChannelPreview/index.js

@@ -36,6 +36,7 @@ const GroupChannelPreview = _ref => {
     bodyIcon,
     title,
     titleCaption,
+    titleCaptionLeft,
     frozen,
     notificationOff
   } = _ref;
@@ -62,7 +63,7 @@ const GroupChannelPreview = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.rightTopSection
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.channelInfo
+    style: styles.channelInfoContainer
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     numberOfLines: 1,
     subtitle1: true,
@@ -82,10 +83,11 @@ const GroupChannelPreview = _ref => {
     icon: 'notifications-off-filled',
     color: colors.onBackground03
   })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.titleCaption
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    style: styles.titleCaptionContainer
+  }, titleCaptionLeft, /*#__PURE__*/_react.default.createElement(_Text.default, {
     caption2: true,
-    color: color.default.none.textTitleCaption
+    color: color.default.none.textTitleCaption,
+    style: styles.titleCaptionText
   }, titleCaption))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.rightBottomSection
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -146,7 +148,7 @@ const styles = (0, _createStyleSheet.default)({
     flexDirection: 'row',
     marginBottom: 4
   },
-  channelInfo: {
+  channelInfoContainer: {
     flex: 1,
     marginRight: 4,
     alignItems: 'center',
@@ -163,9 +165,13 @@ const styles = (0, _createStyleSheet.default)({
   channelInfoFrozen: {
     marginRight: 4
   },
-  titleCaption: {
-    marginLeft: 4,
-    paddingTop: 2
+  titleCaptionContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    marginLeft: 4
+  },
+  titleCaptionText: {
+    marginTop: 2
   },
   rightBottomSection: {
     flex: 1,
@@ -203,8 +209,6 @@ const styles = (0, _createStyleSheet.default)({
     width: '84.5%'
   }
 });
-
-var _default = /*#__PURE__*/_react.default.memo(GroupChannelPreview);
-
+var _default = GroupChannelPreview;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/ui/GroupChannelPreview/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","frozen","notificationOff","colors","useUIKitTheme","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","conditionChaining","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfo","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","textTitleCaption","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n\n  title: string;\n  titleCaption: string;\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  frozen,\n  notificationOff,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfo}>\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaption}>\n            <Text caption2 color={color.default.none.textTitleCaption}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\n            {bodyIcon && (\n              <Icon\n                size={18}\n                icon={bodyIcon}\n                color={color.default.none.bodyIcon}\n                containerStyle={[\n                  styles.bodyIcon,\n                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                ]}\n              />\n            )}\n            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n              {body}\n            </Text>\n          </View>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n      </View>\n      <Separator color={color.default.none.separator} />\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    alignItems: 'center',\n  },\n  coverContainer: {\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfo: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaption: {\n    marginLeft: 4,\n    paddingTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadBadge: {\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  separator: {\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    height: 1,\n    width: '84.5%',\n  },\n});\n\nexport default React.memo(GroupChannelPreview);\n"],"mappings":"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"}
+{"version":3,"names":["GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","colors","useUIKitTheme","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","conditionChaining","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfoContainer","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","textTitleCaption","titleCaptionText","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","marginTop","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n\n  title: string;\n\n  titleCaption: string;\n  titleCaptionLeft?: React.ReactElement;\n\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  titleCaptionLeft,\n  frozen,\n  notificationOff,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfoContainer}>\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaptionContainer}>\n            {titleCaptionLeft}\n            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\n            {bodyIcon && (\n              <Icon\n                size={18}\n                icon={bodyIcon}\n                color={color.default.none.bodyIcon}\n                containerStyle={[\n                  styles.bodyIcon,\n                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                ]}\n              />\n            )}\n            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n              {body}\n            </Text>\n          </View>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n      </View>\n      <Separator color={color.default.none.separator} />\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    alignItems: 'center',\n  },\n  coverContainer: {\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfoContainer: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaptionContainer: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    marginLeft: 4,\n  },\n  titleCaptionText: {\n    marginTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadBadge: {\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  separator: {\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    height: 1,\n    width: '84.5%',\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}

package/lib/commonjs/ui/Header/index.js

@@ -15,8 +15,6 @@ var _uikitUtils = require("@sendbird/uikit-utils");
 
 var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
 
-var _getDefaultHeaderHeight = _interopRequireDefault(require("../../styles/getDefaultHeaderHeight"));
-
 var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
 
 var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
@@ -46,12 +44,9 @@ const Header = _ref => {
   } = _ref;
   const {
     topInset,
-    defaultTitleAlign
+    defaultTitleAlign,
+    defaultHeight
   } = (0, _useHeaderStyle.default)();
-  const {
-    width,
-    height
-  } = (0, _reactNative.useWindowDimensions)();
   const {
     colors
   } = (0, _useUIKitTheme.default)();
@@ -80,7 +75,7 @@ const Header = _ref => {
     }]
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.header, {
-      height: (0, _getDefaultHeaderHeight.default)(width > height)
+      height: defaultHeight
     }]
   }, /*#__PURE__*/_react.default.createElement(LeftSide, {
     titleAlign: actualTitleAlign,

package/lib/commonjs/ui/Header/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","useHeaderStyle","width","height","useWindowDimensions","colors","useUIKitTheme","paddingLeft","paddingRight","useSafeAreaInsets","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","getDefaultHeaderHeight","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","conditionChaining","createStyleSheet","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  { clearTitleMargin?: boolean }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header: ((props: HeaderProps) => JSX.Element) & {\n  Button: typeof HeaderButton;\n  Title: typeof HeaderTitle;\n  Subtitle: typeof HeaderSubtitle;\n} = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n}) => {\n  const { topInset, defaultTitleAlign } = useHeaderStyle();\n  const { width, height } = useWindowDimensions();\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          paddingTop: topInset,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle = ({ children, style, ...props }: TextProps) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle = ({ children, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nHeader.Button = HeaderButton;\nHeader.Title = HeaderTitle;\nHeader.Subtitle = HeaderSubtitle;\nexport default Header;\n"],"mappings":"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"}
+{"version":3,"names":["AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","defaultHeight","useHeaderStyle","colors","useUIKitTheme","paddingLeft","paddingRight","useSafeAreaInsets","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","height","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","conditionChaining","createStyleSheet","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  { clearTitleMargin?: boolean }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header: ((props: HeaderProps) => JSX.Element) & {\n  Button: typeof HeaderButton;\n  Title: typeof HeaderTitle;\n  Subtitle: typeof HeaderSubtitle;\n} = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n}) => {\n  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          paddingTop: topInset,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: defaultHeight }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle = ({ children, style, ...props }: TextProps) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle = ({ children, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nHeader.Button = HeaderButton;\nHeader.Title = HeaderTitle;\nHeader.Subtitle = HeaderSubtitle;\nexport default Header;\n"],"mappings":"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"}

package/lib/module/styles/HeaderStyleContext.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { StatusBar } from 'react-native';
+import { StatusBar, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 export const HeaderStyleContext = /*#__PURE__*/React.createContext({
   HeaderComponent: () => null,
   defaultTitleAlign: 'left',
   statusBarTranslucent: true,
-  topInset: StatusBar.currentHeight ?? 0
+  topInset: StatusBar.currentHeight ?? 0,
+  defaultHeight: getDefaultHeaderHeight(false)
 });
 export const HeaderStyleProvider = _ref => {
   let {
@@ -17,12 +19,17 @@ export const HeaderStyleProvider = _ref => {
   const {
     top
   } = useSafeAreaInsets();
+  const {
+    width,
+    height
+  } = useWindowDimensions();
   return /*#__PURE__*/React.createElement(HeaderStyleContext.Provider, {
     value: {
       HeaderComponent,
       defaultTitleAlign,
       statusBarTranslucent,
-      topInset: statusBarTranslucent ? top : 0
+      topInset: statusBarTranslucent ? top : 0,
+      defaultHeight: getDefaultHeaderHeight(width > height)
     }
   }, children);
 };

package/lib/module/styles/HeaderStyleContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StatusBar","useSafeAreaInsets","HeaderStyleContext","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","currentHeight","HeaderStyleProvider","children","top"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\n\nexport type HeaderStyleContextType = {\n  HeaderComponent: (\n    props: BaseHeaderProps<\n      {\n        title?: HeaderElement;\n        left?: HeaderElement;\n        right?: HeaderElement;\n        onPressLeft?: () => void;\n        onPressRight?: () => void;\n      },\n      { clearTitleMargin?: boolean }\n    >,\n  ) => React.ReactElement | null;\n  defaultTitleAlign: 'left' | 'center';\n  statusBarTranslucent: boolean;\n  topInset: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n  HeaderComponent: () => null,\n  defaultTitleAlign: 'left',\n  statusBarTranslucent: true,\n  topInset: StatusBar.currentHeight ?? 0,\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n  children,\n  HeaderComponent = () => null,\n  defaultTitleAlign,\n  statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n  const { top } = useSafeAreaInsets();\n\n  return (\n    <HeaderStyleContext.Provider\n      value={{\n        HeaderComponent,\n        defaultTitleAlign,\n        statusBarTranslucent,\n        topInset: statusBarTranslucent ? top : 0,\n      }}\n    >\n      {children}\n    </HeaderStyleContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAqBA,OAAO,MAAMC,kBAAkB,gBAAGH,KAAK,CAACI,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAEP,SAAS,CAACQ,aAAV,IAA2B;AAJuC,CAA5C,CAA3B;AAQP,OAAO,MAAMC,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCN,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEK;EAAF,IAAUV,iBAAiB,EAAjC;EAEA,oBACE,oBAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLG,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGK,GAAH,GAAS;IAJlC;EADT,GAQGD,QARH,CADF;AAYD,CApBM"}
+{"version":3,"names":["React","StatusBar","useWindowDimensions","useSafeAreaInsets","getDefaultHeaderHeight","HeaderStyleContext","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","currentHeight","defaultHeight","HeaderStyleProvider","children","top","width","height"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseHeaderProps, HeaderElement } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\n\nexport type HeaderStyleContextType = {\n  HeaderComponent: (\n    props: BaseHeaderProps<\n      {\n        title?: HeaderElement;\n        left?: HeaderElement;\n        right?: HeaderElement;\n        onPressLeft?: () => void;\n        onPressRight?: () => void;\n      },\n      { clearTitleMargin?: boolean }\n    >,\n  ) => React.ReactElement | null;\n  defaultTitleAlign: 'left' | 'center';\n  statusBarTranslucent: boolean;\n  topInset: number;\n  defaultHeight: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n  HeaderComponent: () => null,\n  defaultTitleAlign: 'left',\n  statusBarTranslucent: true,\n  topInset: StatusBar.currentHeight ?? 0,\n  defaultHeight: getDefaultHeaderHeight(false),\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n  children,\n  HeaderComponent = () => null,\n  defaultTitleAlign,\n  statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n  const { top } = useSafeAreaInsets();\n  const { width, height } = useWindowDimensions();\n\n  return (\n    <HeaderStyleContext.Provider\n      value={{\n        HeaderComponent,\n        defaultTitleAlign,\n        statusBarTranslucent,\n        topInset: statusBarTranslucent ? top : 0,\n        defaultHeight: getDefaultHeaderHeight(width > height),\n      }}\n    >\n      {children}\n    </HeaderStyleContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,mBAApB,QAA+C,cAA/C;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAGA,OAAOC,sBAAP,MAAmC,0BAAnC;AAoBA,OAAO,MAAMC,kBAAkB,gBAAGL,KAAK,CAACM,aAAN,CAA4C;EAC5EC,eAAe,EAAE,MAAM,IADqD;EAE5EC,iBAAiB,EAAE,MAFyD;EAG5EC,oBAAoB,EAAE,IAHsD;EAI5EC,QAAQ,EAAET,SAAS,CAACU,aAAV,IAA2B,CAJuC;EAK5EC,aAAa,EAAER,sBAAsB,CAAC,KAAD;AALuC,CAA5C,CAA3B;AASP,OAAO,MAAMS,mBAAmB,GAAG,QAKG;EAAA,IALF;IAClCC,QADkC;IAElCP,eAAe,GAAG,MAAM,IAFU;IAGlCC,iBAHkC;IAIlCC;EAJkC,CAKE;EACpC,MAAM;IAAEM;EAAF,IAAUZ,iBAAiB,EAAjC;EACA,MAAM;IAAEa,KAAF;IAASC;EAAT,IAAoBf,mBAAmB,EAA7C;EAEA,oBACE,oBAAC,kBAAD,CAAoB,QAApB;IACE,KAAK,EAAE;MACLK,eADK;MAELC,iBAFK;MAGLC,oBAHK;MAILC,QAAQ,EAAED,oBAAoB,GAAGM,GAAH,GAAS,CAJlC;MAKLH,aAAa,EAAER,sBAAsB,CAACY,KAAK,GAAGC,MAAT;IALhC;EADT,GASGH,QATH,CADF;AAaD,CAtBM"}

package/lib/module/styles/createScaleFactor.js

@@ -8,7 +8,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
 const createScaleFactor = function () {
   let deviceWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DESIGNED_DEVICE_WIDTH;
   const ratio = Math.min(width, height) / deviceWidth;
-  return dp => PixelRatio.roundToNearestPixel(dp * ratio);
+  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
+  return dp => PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
 
 createScaleFactor.updateScaleFactor = scaleFactor => {

package/lib/module/styles/createScaleFactor.js.map

@@ -1 +1 @@
-{"version":3,"names":["Dimensions","PixelRatio","width","height","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","dp","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n  const ratio = Math.min(width, height) / deviceWidth;\n  return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n  DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,MAAM;EAAEC,KAAF;EAASC;AAAT,IAAoBH,UAAU,CAACI,GAAX,CAAe,QAAf,CAA1B;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAASR,KAAT,EAAgBC,MAAhB,IAA0BI,WAAxC;EACA,OAAQI,EAAD,IAAgBV,UAAU,CAACW,mBAAX,CAA+BD,EAAE,GAAGH,KAApC,CAAvB;AACD,CAHD;;AAKAF,iBAAiB,CAACO,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7EC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIA,OAAO,IAAIC,oBAAoB,GAAGT,iBAAiB,EAA5C;AACP,eAAeA,iBAAf"}
+{"version":3,"names":["Dimensions","PixelRatio","width","height","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","ratio","Math","min","rangedRatio","max","dp","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n  const ratio = Math.min(width, height) / deviceWidth;\n  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);\n  return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n  DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,MAAM;EAAEC,KAAF;EAASC;AAAT,IAAoBH,UAAU,CAACI,GAAX,CAAe,QAAf,CAA1B;AAEA,MAAMC,qBAAqB,GAAG,GAA9B;;AAEA,MAAMC,iBAAiB,GAAG,YAAyC;EAAA,IAAxCC,WAAwC,uEAA1BF,qBAA0B;EACjE,MAAMG,KAAK,GAAGC,IAAI,CAACC,GAAL,CAASR,KAAT,EAAgBC,MAAhB,IAA0BI,WAAxC;EACA,MAAMI,WAAW,GAAGF,IAAI,CAACC,GAAL,CAASD,IAAI,CAACG,GAAL,CAAS,IAAT,EAAeJ,KAAf,CAAT,EAAgC,IAAhC,CAApB;EACA,OAAQK,EAAD,IAAgBZ,UAAU,CAACa,mBAAX,CAA+BD,EAAE,GAAGF,WAApC,CAAvB;AACD,CAJD;;AAMAL,iBAAiB,CAACS,iBAAlB,GAAuCC,WAAD,IAAyC;EAC7EC,oBAAoB,GAAGD,WAAvB;AACD,CAFD;;AAIA,OAAO,IAAIC,oBAAoB,GAAGX,iBAAiB,EAA5C;AACP,eAAeA,iBAAf"}

package/lib/module/ui/GroupChannelPreview/index.js

@@ -19,6 +19,7 @@ const GroupChannelPreview = _ref => {
     bodyIcon,
     title,
     titleCaption,
+    titleCaptionLeft,
     frozen,
     notificationOff
   } = _ref;
@@ -45,7 +46,7 @@ const GroupChannelPreview = _ref => {
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.rightTopSection
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.channelInfo
+    style: styles.channelInfoContainer
   }, /*#__PURE__*/React.createElement(Text, {
     numberOfLines: 1,
     subtitle1: true,
@@ -65,10 +66,11 @@ const GroupChannelPreview = _ref => {
     icon: 'notifications-off-filled',
     color: colors.onBackground03
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles.titleCaption
-  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.titleCaptionContainer
+  }, titleCaptionLeft, /*#__PURE__*/React.createElement(Text, {
     caption2: true,
-    color: color.default.none.textTitleCaption
+    color: color.default.none.textTitleCaption,
+    style: styles.titleCaptionText
   }, titleCaption))), /*#__PURE__*/React.createElement(View, {
     style: styles.rightBottomSection
   }, /*#__PURE__*/React.createElement(View, {
@@ -129,7 +131,7 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     marginBottom: 4
   },
-  channelInfo: {
+  channelInfoContainer: {
     flex: 1,
     marginRight: 4,
     alignItems: 'center',
@@ -146,9 +148,13 @@ const styles = createStyleSheet({
   channelInfoFrozen: {
     marginRight: 4
   },
-  titleCaption: {
-    marginLeft: 4,
-    paddingTop: 2
+  titleCaptionContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    marginLeft: 4
+  },
+  titleCaptionText: {
+    marginTop: 2
   },
   rightBottomSection: {
     flex: 1,
@@ -186,5 +192,5 @@ const styles = createStyleSheet({
     width: '84.5%'
   }
 });
-export default /*#__PURE__*/React.memo(GroupChannelPreview);
+export default GroupChannelPreview;
 //# sourceMappingURL=index.js.map

package/lib/module/ui/GroupChannelPreview/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","conditionChaining","Image","createStyleSheet","useUIKitTheme","Badge","Icon","Text","GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","frozen","notificationOff","colors","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfo","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","textTitleCaption","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n\n  title: string;\n  titleCaption: string;\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  frozen,\n  notificationOff,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfo}>\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaption}>\n            <Text caption2 color={color.default.none.textTitleCaption}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\n            {bodyIcon && (\n              <Icon\n                size={18}\n                icon={bodyIcon}\n                color={color.default.none.bodyIcon}\n                containerStyle={[\n                  styles.bodyIcon,\n                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                ]}\n              />\n            )}\n            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n              {body}\n            </Text>\n          </View>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n      </View>\n      <Separator color={color.default.none.separator} />\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    alignItems: 'center',\n  },\n  coverContainer: {\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfo: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaption: {\n    marginLeft: 4,\n    paddingTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadBadge: {\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  separator: {\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    height: 1,\n    width: '84.5%',\n  },\n});\n\nexport default React.memo(GroupChannelPreview);\n"],"mappings":"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"}
+{"version":3,"names":["React","View","conditionChaining","Image","createStyleSheet","useUIKitTheme","Badge","Icon","Text","GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","colors","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfoContainer","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","textTitleCaption","titleCaptionText","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","marginTop","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n\n  title: string;\n\n  titleCaption: string;\n  titleCaptionLeft?: React.ReactElement;\n\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  titleCaptionLeft,\n  frozen,\n  notificationOff,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfoContainer}>\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaptionContainer}>\n            {titleCaptionLeft}\n            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\n            {bodyIcon && (\n              <Icon\n                size={18}\n                icon={bodyIcon}\n                color={color.default.none.bodyIcon}\n                containerStyle={[\n                  styles.bodyIcon,\n                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                ]}\n              />\n            )}\n            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n              {body}\n            </Text>\n          </View>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n      </View>\n      <Separator color={color.default.none.separator} />\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    alignItems: 'center',\n  },\n  coverContainer: {\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfoContainer: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaptionContainer: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    marginLeft: 4,\n  },\n  titleCaptionText: {\n    marginTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadBadge: {\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  separator: {\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    height: 1,\n    width: '84.5%',\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}

package/lib/module/ui/Header/index.js

@@ -1,11 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { conditionChaining } from '@sendbird/uikit-utils';
 import createStyleSheet from '../../styles/createStyleSheet';
-import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Text from '../Text';
@@ -28,12 +27,9 @@ const Header = _ref => {
   } = _ref;
   const {
     topInset,
-    defaultTitleAlign
+    defaultTitleAlign,
+    defaultHeight
   } = useHeaderStyle();
-  const {
-    width,
-    height
-  } = useWindowDimensions();
   const {
     colors
   } = useUIKitTheme();
@@ -62,7 +58,7 @@ const Header = _ref => {
     }]
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.header, {
-      height: getDefaultHeaderHeight(width > height)
+      height: defaultHeight
     }]
   }, /*#__PURE__*/React.createElement(LeftSide, {
     titleAlign: actualTitleAlign,

package/lib/module/ui/Header/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TouchableOpacity","View","useWindowDimensions","useSafeAreaInsets","conditionChaining","createStyleSheet","getDefaultHeaderHeight","useHeaderStyle","useUIKitTheme","Text","AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","width","height","colors","paddingLeft","paddingRight","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  { clearTitleMargin?: boolean }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header: ((props: HeaderProps) => JSX.Element) & {\n  Button: typeof HeaderButton;\n  Title: typeof HeaderTitle;\n  Subtitle: typeof HeaderSubtitle;\n} = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n}) => {\n  const { topInset, defaultTitleAlign } = useHeaderStyle();\n  const { width, height } = useWindowDimensions();\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          paddingTop: topInset,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle = ({ children, style, ...props }: TextProps) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle = ({ children, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nHeader.Button = HeaderButton;\nHeader.Title = HeaderTitle;\nHeader.Subtitle = HeaderSubtitle;\nexport default Header;\n"],"mappings":"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"}
+{"version":3,"names":["React","TouchableOpacity","View","useSafeAreaInsets","conditionChaining","createStyleSheet","useHeaderStyle","useUIKitTheme","Text","AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","defaultHeight","colors","paddingLeft","paddingRight","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","height","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  { clearTitleMargin?: boolean }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header: ((props: HeaderProps) => JSX.Element) & {\n  Button: typeof HeaderButton;\n  Title: typeof HeaderTitle;\n  Subtitle: typeof HeaderSubtitle;\n} = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n}) => {\n  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          paddingTop: topInset,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: defaultHeight }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle = ({ children, style, ...props }: TextProps) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle = ({ children, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nHeader.Button = HeaderButton;\nHeader.Title = HeaderTitle;\nHeader.Subtitle = HeaderSubtitle;\nexport default Header;\n"],"mappings":"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"}

package/lib/typescript/src/styles/HeaderStyleContext.d.ts

@@ -13,6 +13,7 @@ export declare type HeaderStyleContextType = {
     defaultTitleAlign: 'left' | 'center';
     statusBarTranslucent: boolean;
     topInset: number;
+    defaultHeight: number;
 };
 export declare const HeaderStyleContext: React.Context<HeaderStyleContextType>;
 declare type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;

package/lib/typescript/src/styles/getDefaultHeaderHeight.d.ts

@@ -1,2 +1,2 @@
-declare const getDefaultHeaderHeight: (isLandscape: boolean) => 56 | 48;
+declare const getDefaultHeaderHeight: (isLandscape: boolean) => 48 | 56;
 export default getDefaultHeaderHeight;

package/lib/typescript/src/ui/GroupChannelPreview/index.d.ts

@@ -5,6 +5,7 @@ declare type Props = {
     coverUrl: string;
     title: string;
     titleCaption: string;
+    titleCaptionLeft?: React.ReactElement;
     bodyIcon?: keyof typeof Icon.Assets;
     body: string;
     memberCount?: number;
@@ -13,5 +14,5 @@ declare type Props = {
     frozen?: boolean;
     notificationOff?: boolean;
 };
-declare const _default: React.MemoExoticComponent<({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, frozen, notificationOff, }: Props) => JSX.Element>;
-export default _default;
+declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, }: Props) => JSX.Element;
+export default GroupChannelPreview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "1.0.2"
+    "@sendbird/uikit-utils": "1.1.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -80,5 +80,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "257ece5f957e03ff5c08b79780b33d9d19adc5de"
+  "gitHead": "787ef6d52fec5d01e9b831d7a6f17e33614e2d09"
 }

package/src/styles/HeaderStyleContext.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { StatusBar } from 'react-native';
+import { StatusBar, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseHeaderProps, HeaderElement } from '../types';
+import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
   HeaderComponent: (
@@ -20,12 +21,14 @@ export type HeaderStyleContextType = {
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;
+  defaultHeight: number;
 };
 export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
   HeaderComponent: () => null,
   defaultTitleAlign: 'left',
   statusBarTranslucent: true,
   topInset: StatusBar.currentHeight ?? 0,
+  defaultHeight: getDefaultHeaderHeight(false),
 });
 
 type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
@@ -36,6 +39,7 @@ export const HeaderStyleProvider = ({
   statusBarTranslucent,
 }: React.PropsWithChildren<Props>) => {
   const { top } = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
 
   return (
     <HeaderStyleContext.Provider
@@ -44,6 +48,7 @@ export const HeaderStyleProvider = ({
         defaultTitleAlign,
         statusBarTranslucent,
         topInset: statusBarTranslucent ? top : 0,
+        defaultHeight: getDefaultHeaderHeight(width > height),
       }}
     >
       {children}

package/src/styles/createScaleFactor.ts

@@ -6,7 +6,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
 
 const createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {
   const ratio = Math.min(width, height) / deviceWidth;
-  return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);
+  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
+  return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
 
 createScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {

package/src/ui/GroupChannelPreview/index.tsx

@@ -15,7 +15,10 @@ type Props = {
   coverUrl: string;
 
   title: string;
+
   titleCaption: string;
+  titleCaptionLeft?: React.ReactElement;
+
   bodyIcon?: keyof typeof Icon.Assets;
   body: string;
 
@@ -37,6 +40,7 @@ const GroupChannelPreview = ({
   bodyIcon,
   title,
   titleCaption,
+  titleCaptionLeft,
   frozen,
   notificationOff,
 }: Props) => {
@@ -60,7 +64,7 @@ const GroupChannelPreview = ({
       </View>
       <View style={styles.rightSection}>
         <View style={styles.rightTopSection}>
-          <View style={styles.channelInfo}>
+          <View style={styles.channelInfoContainer}>
             <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
               {title}
             </Text>
@@ -74,8 +78,9 @@ const GroupChannelPreview = ({
             )}
             {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}
           </View>
-          <View style={styles.titleCaption}>
-            <Text caption2 color={color.default.none.textTitleCaption}>
+          <View style={styles.titleCaptionContainer}>
+            {titleCaptionLeft}
+            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>
               {titleCaption}
             </Text>
           </View>
@@ -132,7 +137,7 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     marginBottom: 4,
   },
-  channelInfo: {
+  channelInfoContainer: {
     flex: 1,
     marginRight: 4,
     alignItems: 'center',
@@ -149,9 +154,13 @@ const styles = createStyleSheet({
   channelInfoFrozen: {
     marginRight: 4,
   },
-  titleCaption: {
+  titleCaptionContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
     marginLeft: 4,
-    paddingTop: 2,
+  },
+  titleCaptionText: {
+    marginTop: 2,
   },
   rightBottomSection: {
     flex: 1,
@@ -190,4 +199,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(GroupChannelPreview);
+export default GroupChannelPreview;

package/src/ui/Header/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';
+import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import type { BaseHeaderProps } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
-import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Text, { TextProps } from '../Text';
@@ -38,8 +37,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   onPressRight,
   clearTitleMargin = false,
 }) => {
-  const { topInset, defaultTitleAlign } = useHeaderStyle();
-  const { width, height } = useWindowDimensions();
+  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
 
@@ -64,7 +62,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
         },
       ]}
     >
-      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>
+      <View style={[styles.header, { height: defaultHeight }]}>
         <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />
         <View
           style={[