@sendbird/uikit-react-native-foundation 1.1.2 → 2.0.0-rc.0

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

@@ -1,10 +1,10 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 const ToastContext = /*#__PURE__*/createContext(null);
 
 const useOpacity = () => {

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","useCallback","useContext","useEffect","useMemo","useRef","useState","Animated","useSafeAreaInsets","Icon","Text","createStyleSheet","useUIKitTheme","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 Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\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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"}

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

@@ -1,7 +1,14 @@
 /** Assets **/
 export { default as IconAssets } from './assets/icon';
 /** Component **/
+export { default as Divider } from './components/Divider';
+export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
+export { default as Modal } from './components/Modal';
+export { default as Switch } from './components/Switch';
+export { default as Text } from './components/Text';
+export { default as TextInput } from './components/TextInput';
+export { default as URLParsedText } from './components/URLParsedText';
 /** UI **/
 export { default as ActionMenu, ActionMenuItem } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';
@@ -11,20 +18,13 @@ export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
-export { default as Divider } from './ui/Divider';
 export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
-export { default as Icon } from './ui/Icon';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
-export { default as Modal } from './ui/Modal';
 export { default as Placeholder } from './ui/Placeholder';
 export { default as Prompt } from './ui/Prompt';
-export { default as Switch } from './ui/Switch';
-export { default as Text } from './ui/Text';
-export { default as TextInput } from './ui/TextInput';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
-export { default as URLParsedText } from './ui/URLParsedText';
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
 export { default as createScaleFactor } from './styles/createScaleFactor';

package/lib/typescript/src/ui/Avatar/AvatarIcon.d.ts

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = {
     icon: keyof typeof Icon.Assets;
     size?: number;

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

@@ -1,4 +1,4 @@
-import type Icon from '../Icon';
+import type Icon from '../../components/Icon';
 export declare type BottomSheetItem = {
     sheetItems: {
         icon?: keyof typeof Icon.Assets;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
     icon?: keyof typeof Icon.Assets;

package/lib/typescript/src/ui/Dialog/DialogSheet.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
 }>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = {
     customCover?: React.ReactElement;
     coverUrl: string;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacityProps } from 'react-native';
+import { TextProps } from '../../components/Text';
 import type { BaseHeaderProps } from '../../index';
-import { TextProps } from '../Text';
 declare type HeaderElement = string | React.ReactElement | null;
 declare type HeaderProps = BaseHeaderProps<{
     title?: HeaderElement;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 export declare type MenuBarProps = {
     variant?: 'default' | 'contained';
     onPress: () => void;

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

@@ -1,4 +1,4 @@
-import Icon from '../Icon';
+import Icon from '../../components/Icon';
 declare type Props = {
     loading?: boolean;
     icon: keyof typeof Icon.Assets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "1.1.2",
+  "version": "2.0.0-rc.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,13 +38,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "1.1.2"
+    "@sendbird/uikit-utils": "2.0.0-rc.0"
   },
   "devDependencies": {
     "@types/react": "*",
     "@types/react-native": "*",
     "react": "17.0.2",
-    "react-native": "0.66.4",
+    "react-native": "0.67.4",
     "react-native-builder-bob": "^0.18.0",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
@@ -80,5 +80,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "3bfe51786e73bedc419116e447b79d6b57f9178c"
+  "gitHead": "394d5e3e259086c2226a24406462f119d4af9860"
 }

package/src/index.ts

@@ -1,7 +1,15 @@
 /** Assets **/
 export { default as IconAssets } from './assets/icon';
+
 /** Component **/
+export { default as Divider } from './components/Divider';
+export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
+export { default as Modal } from './components/Modal';
+export { default as Switch } from './components/Switch';
+export { default as Text } from './components/Text';
+export { default as TextInput } from './components/TextInput';
+export { default as URLParsedText } from './components/URLParsedText';
 
 /** UI **/
 export { default as ActionMenu, ActionMenuItem } from './ui/ActionMenu';
@@ -12,20 +20,13 @@ export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
-export { default as Divider } from './ui/Divider';
 export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
-export { default as Icon } from './ui/Icon';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
-export { default as Modal } from './ui/Modal';
 export { default as Placeholder } from './ui/Placeholder';
 export { default as Prompt } from './ui/Prompt';
-export { default as Switch } from './ui/Switch';
-export { default as Text } from './ui/Text';
-export { default as TextInput } from './ui/TextInput';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
-export { default as URLParsedText } from './ui/URLParsedText';
 
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';

package/src/ui/ActionMenu/index.tsx

@@ -3,13 +3,13 @@ import { TouchableOpacity, View } from 'react-native';
 
 import { Logger } from '@sendbird/uikit-utils';
 
+import Modal from '../../components/Modal';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import DialogBox from '../Dialog/DialogBox';
 import LoadingSpinner from '../LoadingSpinner';
-import Modal from '../Modal';
-import Text from '../Text';
 
 export type ActionMenuItem = {
   title?: string;

package/src/ui/Alert/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { AlertButton, View } from 'react-native';
 
+import Modal from '../../components/Modal';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import DialogBox from '../Dialog/DialogBox';
-import Modal from '../Modal';
-import Text from '../Text';
 
 export type AlertItem = {
   title?: string;

package/src/ui/Avatar/AvatarIcon.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
 
 type Props = {
   icon: keyof typeof Icon.Assets;

package/src/ui/Avatar/index.tsx

@@ -3,10 +3,10 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Icon from '../../components/Icon';
 import Image from '../../components/Image';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
 

package/src/ui/Badge/index.tsx

@@ -3,9 +3,9 @@ import { Platform, StyleProp, View, ViewStyle } from 'react-native';
 
 import { truncatedBadgeCount } from '@sendbird/uikit-utils';
 
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Text from '../Text';
 
 type Props = {
   count: number;

package/src/ui/BottomSheet/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import type Icon from '../../components/Icon';
+import Modal from '../../components/Modal';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import DialogSheet from '../Dialog/DialogSheet';
-import type Icon from '../Icon';
-import Modal from '../Modal';
 
 export type BottomSheetItem = {
   sheetItems: {

package/src/ui/Button/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Pressable, StyleProp, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;

package/src/ui/ChannelFrozenBanner/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Text from '../Text';
 
 type Props = {
   style?: StyleProp<ViewStyle>;

package/src/ui/Dialog/DialogSheet.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
@@ -64,6 +64,7 @@ const styles = createStyleSheet({
     marginLeft: 16,
   },
   sheetItemText: {
+    flex: 1,
     marginHorizontal: 24,
   },
 });

package/src/ui/GroupChannelPreview/index.tsx

@@ -3,12 +3,12 @@ import { View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Icon from '../../components/Icon';
 import Image from '../../components/Image';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Badge from '../Badge';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type Props = {
   customCover?: React.ReactElement;

package/src/ui/Header/index.tsx

@@ -4,11 +4,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Text, { TextProps } from '../../components/Text';
 import type { BaseHeaderProps } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Text, { TextProps } from '../Text';
 
 type HeaderElement = string | React.ReactElement | null;
 type HeaderProps = BaseHeaderProps<

package/src/ui/LoadingSpinner/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, StyleProp, ViewStyle } from 'react-native';
 
+import Icon from '../../components/Icon';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
 
 type Props = {
   size?: number;

package/src/ui/MenuBar/index.tsx

@@ -3,11 +3,11 @@ import { Pressable, View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Divider from '../../components/Divider';
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Divider from '../Divider';
-import Icon from '../Icon';
-import Text from '../Text';
 
 export type MenuBarProps = {
   variant?: 'default' | 'contained';

package/src/ui/Placeholder/index.tsx

@@ -3,12 +3,12 @@ import { View } from 'react-native';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
-import Icon from '../Icon';
 import LoadingSpinner from '../LoadingSpinner';
-import Text from '../Text';
 
 type Props = {
   loading?: boolean;

package/src/ui/Prompt/index.tsx

@@ -3,14 +3,14 @@ import { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions
 
 import { NOOP } from '@sendbird/uikit-utils';
 
+import Modal from '../../components/Modal';
+import Text from '../../components/Text';
+import TextInput from '../../components/TextInput';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import DialogBox from '../Dialog/DialogBox';
-import Modal from '../Modal';
-import Text from '../Text';
-import TextInput from '../TextInput';
 
 export type PromptItem = {
   title: string;

package/src/ui/Toast/index.tsx

@@ -2,10 +2,10 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useR
 import { Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-import Icon from '../Icon';
-import Text from '../Text';
 
 type ToastType = 'normal' | 'error' | 'success';
 type Context = { show(text: string, type?: ToastType): void };