@sendbird/uikit-react-native-foundation 1.1.1 → 1.1.3

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

@@ -109,9 +109,9 @@ const GroupChannelPreview = _ref => {
   }, body))), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, badgeCount > 0 && /*#__PURE__*/_react.default.createElement(_Badge.default, {
     count: badgeCount,
     maxCount: maxBadgeCount
-  })))), /*#__PURE__*/_react.default.createElement(Separator, {
+  }))), /*#__PURE__*/_react.default.createElement(Separator, {
     color: color.default.none.separator
-  }));
+  })));
 };
 
 const Separator = _ref2 => {
@@ -130,11 +130,11 @@ const styles = (0, _createStyleSheet.default)({
     height: 76,
     width: '100%',
     flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingTop: 10,
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   coverContainer: {
+    marginLeft: 16,
     marginRight: 16
   },
   channelCover: {
@@ -143,7 +143,9 @@ const styles = (0, _createStyleSheet.default)({
     borderRadius: 28
   },
   rightSection: {
-    flex: 1
+    flex: 1,
+    paddingTop: 10,
+    paddingRight: 16
   },
   rightTopSection: {
     flexDirection: 'row',
@@ -207,10 +209,10 @@ const styles = (0, _createStyleSheet.default)({
   },
   separator: {
     position: 'absolute',
-    right: 0,
+    left: 0,
+    right: -16,
     bottom: 0,
-    height: 1,
-    width: '84.5%'
+    height: 1
   }
 });
 var _default = GroupChannelPreview;

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

@@ -1 +1 @@
-{"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","bodyWrapper","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","height","width","flexDirection","paddingHorizontal","paddingTop","alignItems","marginRight","borderRadius","flex","marginBottom","flexShrink","marginLeft","marginTop","unreadBadge","minWidth","minHeight","justifyContent","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}>\n            <View style={styles.bodyWrapper}>\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>\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    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingTop: 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    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\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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"}
+{"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","bodyWrapper","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","height","width","flexDirection","alignItems","justifyContent","marginLeft","marginRight","borderRadius","flex","paddingTop","paddingRight","marginBottom","flexShrink","marginTop","unreadBadge","minWidth","minHeight","position","left","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}>\n            <View style={styles.bodyWrapper}>\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>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n        <Separator color={color.default.none.separator} />\n      </View>\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    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  coverContainer: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n    paddingTop: 10,\n    paddingRight: 16,\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    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\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    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}

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

@@ -29,11 +29,15 @@ const ToastContext = /*#__PURE__*/(0, _react.createContext)(null);
 
 const useOpacity = () => {
   const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const transition = (0, _react.useCallback)(value => _reactNative.Animated.timing(opacity, {
-    toValue: value,
-    duration: 500,
-    useNativeDriver: true
-  }).start(), []);
+
+  const transition = value => {
+    _reactNative.Animated.timing(opacity, {
+      toValue: value,
+      duration: 500,
+      useNativeDriver: true
+    }).start();
+  };
+
   return {
     opacity,
     show: () => transition(1),
@@ -140,11 +144,15 @@ const ToastProvider = _ref2 => {
         });
       }
     }
-  }, children, /*#__PURE__*/_react.default.createElement(Toast, {
+  }, children, /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
+    behavior: _reactNative.Platform.OS === 'ios' ? 'position' : undefined,
+    keyboardVerticalOffset: -bottom,
+    pointerEvents: 'none'
+  }, /*#__PURE__*/_react.default.createElement(Toast, {
     type: state.type,
     visible: state.visible,
     bottom: bottom + styles.toastPosition.bottom
-  }, state.text));
+  }, state.text)));
 };
 
 exports.ToastProvider = ToastProvider;

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

@@ -1 +1 @@
-{"version":3,"names":["ToastContext","createContext","useOpacity","opacity","useRef","Animated","Value","current","transition","useCallback","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","useUIKitTheme","color","useMemo","dark","error300","light","error200","secondary300","secondary200","backgroundColor","useEffect","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","useState","useSafeAreaInsets","hideTimeout","setTimeout","prev","clearTimeout","toastPosition","useToast","context","useContext","Error","createStyleSheet","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = useCallback(\n    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),\n    [],\n  );\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n        {state.text}\n      </Toast>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}
+{"version":3,"names":["ToastContext","createContext","useOpacity","opacity","useRef","Animated","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","useUIKitTheme","color","useMemo","dark","error300","light","error200","secondary300","secondary200","backgroundColor","useEffect","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","useState","useSafeAreaInsets","hideTimeout","setTimeout","prev","clearTimeout","Platform","OS","undefined","toastPosition","useToast","context","useContext","Error","createStyleSheet","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated, KeyboardAvoidingView, Platform } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = (value: number) => {\n    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();\n  };\n\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <KeyboardAvoidingView\n        behavior={Platform.OS === 'ios' ? 'position' : undefined}\n        keyboardVerticalOffset={-bottom}\n        pointerEvents={'none'}\n      >\n        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n          {state.text}\n        </Toast>\n      </KeyboardAvoidingView>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}

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

@@ -92,9 +92,9 @@ const GroupChannelPreview = _ref => {
   }, body))), /*#__PURE__*/React.createElement(View, null, badgeCount > 0 && /*#__PURE__*/React.createElement(Badge, {
     count: badgeCount,
     maxCount: maxBadgeCount
-  })))), /*#__PURE__*/React.createElement(Separator, {
+  }))), /*#__PURE__*/React.createElement(Separator, {
     color: color.default.none.separator
-  }));
+  })));
 };
 
 const Separator = _ref2 => {
@@ -113,11 +113,11 @@ const styles = createStyleSheet({
     height: 76,
     width: '100%',
     flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingTop: 10,
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   coverContainer: {
+    marginLeft: 16,
     marginRight: 16
   },
   channelCover: {
@@ -126,7 +126,9 @@ const styles = createStyleSheet({
     borderRadius: 28
   },
   rightSection: {
-    flex: 1
+    flex: 1,
+    paddingTop: 10,
+    paddingRight: 16
   },
   rightTopSection: {
     flexDirection: 'row',
@@ -190,10 +192,10 @@ const styles = createStyleSheet({
   },
   separator: {
     position: 'absolute',
-    right: 0,
+    left: 0,
+    right: -16,
     bottom: 0,
-    height: 1,
-    width: '84.5%'
+    height: 1
   }
 });
 export default GroupChannelPreview;

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","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","bodyWrapper","bodyIconBackground","bodyText","textBody","separator","Separator","height","width","flexDirection","paddingHorizontal","paddingTop","alignItems","marginRight","borderRadius","flex","marginBottom","flexShrink","marginLeft","marginTop","unreadBadge","minWidth","minHeight","justifyContent","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}>\n            <View style={styles.bodyWrapper}>\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>\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    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingTop: 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    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\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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"}
+{"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","bodyWrapper","bodyIconBackground","bodyText","textBody","separator","Separator","height","width","flexDirection","alignItems","justifyContent","marginLeft","marginRight","borderRadius","flex","paddingTop","paddingRight","marginBottom","flexShrink","marginTop","unreadBadge","minWidth","minHeight","position","left","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}>\n            <View style={styles.bodyWrapper}>\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>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n        <Separator color={color.default.none.separator} />\n      </View>\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    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  coverContainer: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n    paddingTop: 10,\n    paddingRight: 16,\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    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\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    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
@@ -9,11 +9,15 @@ const ToastContext = /*#__PURE__*/createContext(null);
 
 const useOpacity = () => {
   const opacity = useRef(new Animated.Value(0)).current;
-  const transition = useCallback(value => Animated.timing(opacity, {
-    toValue: value,
-    duration: 500,
-    useNativeDriver: true
-  }).start(), []);
+
+  const transition = value => {
+    Animated.timing(opacity, {
+      toValue: value,
+      duration: 500,
+      useNativeDriver: true
+    }).start();
+  };
+
   return {
     opacity,
     show: () => transition(1),
@@ -119,11 +123,15 @@ export const ToastProvider = _ref2 => {
         });
       }
     }
-  }, children, /*#__PURE__*/React.createElement(Toast, {
+  }, children, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    behavior: Platform.OS === 'ios' ? 'position' : undefined,
+    keyboardVerticalOffset: -bottom,
+    pointerEvents: 'none'
+  }, /*#__PURE__*/React.createElement(Toast, {
     type: state.type,
     visible: state.visible,
     bottom: bottom + styles.toastPosition.bottom
-  }, state.text));
+  }, state.text)));
 };
 export const useToast = () => {
   const context = useContext(ToastContext);

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

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","Animated","useSafeAreaInsets","createStyleSheet","useUIKitTheme","Icon","Text","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = useCallback(\n    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),\n    [],\n  );\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n        {state.text}\n      </Toast>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}
+{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useRef","useState","Animated","KeyboardAvoidingView","Platform","useSafeAreaInsets","createStyleSheet","useUIKitTheme","Icon","Text","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","OS","undefined","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated, KeyboardAvoidingView, Platform } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = (value: number) => {\n    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();\n  };\n\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <KeyboardAvoidingView\n        behavior={Platform.OS === 'ios' ? 'position' : undefined}\n        keyboardVerticalOffset={-bottom}\n        pointerEvents={'none'}\n      >\n        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n          {state.text}\n        </Toast>\n      </KeyboardAvoidingView>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "1.1.1"
+    "@sendbird/uikit-utils": "1.1.3"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -80,5 +80,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "7b0384ecf1025f70e8a19f0490231273893f3f56"
+  "gitHead": "99c133a8bbee3d806bf72ffc040acdd5c883d1d7"
 }

package/src/ui/GroupChannelPreview/index.tsx

@@ -107,8 +107,8 @@ const GroupChannelPreview = ({
           </View>
           <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
         </View>
+        <Separator color={color.default.none.separator} />
       </View>
-      <Separator color={color.default.none.separator} />
     </View>
   );
 };
@@ -121,11 +121,11 @@ const styles = createStyleSheet({
     height: 76,
     width: '100%',
     flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingTop: 10,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   coverContainer: {
+    marginLeft: 16,
     marginRight: 16,
   },
   channelCover: {
@@ -135,6 +135,8 @@ const styles = createStyleSheet({
   },
   rightSection: {
     flex: 1,
+    paddingTop: 10,
+    paddingRight: 16,
   },
   rightTopSection: {
     flexDirection: 'row',
@@ -198,10 +200,10 @@ const styles = createStyleSheet({
   },
   separator: {
     position: 'absolute',
-    right: 0,
+    left: 0,
+    right: -16,
     bottom: 0,
     height: 1,
-    width: '84.5%',
   },
 });
 

package/src/ui/Toast/index.tsx

@@ -1,5 +1,5 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, KeyboardAvoidingView, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import createStyleSheet from '../../styles/createStyleSheet';
@@ -22,10 +22,10 @@ type Props = React.PropsWithChildren<{
 
 const useOpacity = () => {
   const opacity = useRef(new Animated.Value(0)).current;
-  const transition = useCallback(
-    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),
-    [],
-  );
+  const transition = (value: number) => {
+    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();
+  };
+
   return {
     opacity,
     show: () => transition(1),
@@ -87,9 +87,15 @@ export const ToastProvider = ({
   return (
     <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>
       {children}
-      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>
-        {state.text}
-      </Toast>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'position' : undefined}
+        keyboardVerticalOffset={-bottom}
+        pointerEvents={'none'}
+      >
+        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>
+          {state.text}
+        </Toast>
+      </KeyboardAvoidingView>
     </ToastContext.Provider>
   );
 };