@sendbird/uikit-react-native-foundation 2.0.3 → 2.1.0

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

@@ -10,11 +10,11 @@ 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 ActionMenu } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';
 export { default as Avatar } from './ui/Avatar';
 export { default as Badge } from './ui/Badge';
-export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
+export { default as BottomSheet } 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';
@@ -22,16 +22,18 @@ export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as OutlinedButton } from './ui/OutlinedButton';
 export { default as Placeholder } from './ui/Placeholder';
+export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
 export { default as createScaleFactor } from './styles/createScaleFactor';
 export { default as createStyleSheet } from './styles/createStyleSheet';
-export { default as createTypography, UIKitTypographyOverrides } from './styles/createTypography';
+export { default as createTypography } from './styles/createTypography';
 export { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';
-export { HeaderStyleContext, HeaderStyleProvider, HeaderStyleContextType } from './styles/HeaderStyleContext';
+export { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';
 export { default as useHeaderStyle } from './styles/useHeaderStyle';
 /** Theme **/
 export { default as createTheme } from './theme/createTheme';
@@ -43,3 +45,7 @@ export { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';
 export { default as useUIKitTheme } from './theme/useUIKitTheme';
 /** Types **/
 export type { TypoName, UIKitTheme, UIKitTypography, FontAttributes, BaseHeaderProps, UIKitColorScheme, UIKitColors, ComponentColorTree, UIKitPalette, HeaderElement, HeaderPartProps, ComponentColors, Component, GetColorTree, } from './types';
+export type { ActionMenuItem } from './ui/ActionMenu';
+export type { BottomSheetItem } from './ui/BottomSheet';
+export type { UIKitTypographyOverrides } from './styles/createTypography';
+export type { HeaderStyleContextType } from './styles/HeaderStyleContext';

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

@@ -1,15 +1,7 @@
 import React from 'react';
-import type { BaseHeaderProps, HeaderElement } from '../types';
+import type { HeaderProps } from '../ui/Header';
 export declare type HeaderStyleContextType = {
-    HeaderComponent: (props: BaseHeaderProps<{
-        title?: HeaderElement;
-        left?: HeaderElement;
-        right?: HeaderElement;
-        onPressLeft?: () => void;
-        onPressRight?: () => void;
-    }, {
-        clearTitleMargin?: boolean;
-    }>) => React.ReactElement | null;
+    HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
     defaultTitleAlign: 'left' | 'center';
     statusBarTranslucent: boolean;
     topInset: number;

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

@@ -26,7 +26,7 @@ export interface UIKitTheme {
     colors: UIKitColors;
     typography: UIKitTypography;
 }
-export declare type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'Message' | 'DateSeparator' | 'GroupChannelPreview';
+export declare type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'Message' | 'DateSeparator' | 'GroupChannelPreview' | 'ProfileCard';
 export declare type GetColorTree<Tree extends {
     Variant: {
         [key in Component]: string;
@@ -49,6 +49,7 @@ export declare type ComponentColorTree = GetColorTree<{
         Message: 'incoming' | 'outgoing';
         DateSeparator: 'default';
         GroupChannelPreview: 'default';
+        ProfileCard: 'default';
     };
     State: {
         Header: 'none';
@@ -60,6 +61,7 @@ export declare type ComponentColorTree = GetColorTree<{
         Message: 'enabled' | 'pressed';
         DateSeparator: 'none';
         GroupChannelPreview: 'none';
+        ProfileCard: 'none';
     };
     ColorPart: {
         Header: 'background' | 'borderBottom';
@@ -71,6 +73,7 @@ export declare type ComponentColorTree = GetColorTree<{
         Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
         DateSeparator: 'text' | 'background';
         GroupChannelPreview: 'textTitle' | 'textTitleCaption' | 'textBody' | 'memberCount' | 'bodyIcon' | 'background' | 'coverBackground' | 'bodyIconBackground' | 'separator';
+        ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
     };
 }>;
 export declare type ComponentColors<T extends Component> = {
@@ -113,6 +116,7 @@ export interface UIKitColors {
         message: ComponentColors<'Message'>;
         dateSeparator: ComponentColors<'DateSeparator'>;
         groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+        profileCard: ComponentColors<'ProfileCard'>;
     };
 }
 export declare type HeaderElement = string | ReactElement | null;

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

@@ -2,6 +2,7 @@ export declare type ActionMenuItem = {
     title?: string;
     menuItems: {
         title: string;
+        style?: 'destructive';
         onPress?: (() => Promise<void>) | (() => void);
         onError?: () => void;
     }[];

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

@@ -13,6 +13,7 @@ declare type Props = {
     maxBadgeCount?: number;
     frozen?: boolean;
     notificationOff?: boolean;
+    broadcast?: boolean;
 };
-declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, }: Props) => JSX.Element;
+declare const GroupChannelPreview: ({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, titleCaptionLeft, frozen, notificationOff, broadcast, }: Props) => JSX.Element;
 export default GroupChannelPreview;

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

@@ -3,7 +3,7 @@ import { TouchableOpacityProps } from 'react-native';
 import { TextProps } from '../../components/Text';
 import type { BaseHeaderProps } from '../../index';
 declare type HeaderElement = string | React.ReactElement | null;
-declare type HeaderProps = BaseHeaderProps<{
+export declare type HeaderProps = BaseHeaderProps<{
     title?: HeaderElement;
     left?: HeaderElement;
     right?: HeaderElement;
@@ -11,6 +11,7 @@ declare type HeaderProps = BaseHeaderProps<{
     onPressRight?: () => void;
 }, {
     clearTitleMargin?: boolean;
+    statusBarTopInsetAs?: 'padding' | 'margin';
 }>;
 declare const Header: ((props: HeaderProps) => JSX.Element) & {
     Button: typeof HeaderButton;

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

@@ -4,6 +4,7 @@ export declare type MenuBarProps = {
     variant?: 'default' | 'contained';
     onPress: () => void;
     disabled?: boolean;
+    visible?: boolean;
     icon: keyof typeof Icon.Assets;
     iconColor?: string;
     iconBackgroundColor?: string;
@@ -11,5 +12,5 @@ export declare type MenuBarProps = {
     actionLabel?: string;
     actionItem?: React.ReactNode;
 };
-declare const MenuBar: ({ variant, disabled, onPress, name, icon, iconColor, iconBackgroundColor, actionLabel, actionItem, }: MenuBarProps) => JSX.Element;
+declare const MenuBar: ({ variant, disabled, visible, onPress, name, icon, iconColor, iconBackgroundColor, actionLabel, actionItem, }: MenuBarProps) => JSX.Element | null;
 export default MenuBar;

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

@@ -0,0 +1,8 @@
+import { StyleProp, ViewStyle } from 'react-native';
+declare type OutlinedButtonProps = {
+    children: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+};
+declare const OutlinedButton: ({ children, onPress, containerStyle }: OutlinedButtonProps) => JSX.Element;
+export default OutlinedButton;

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

@@ -0,0 +1,11 @@
+import { StyleProp, ViewStyle } from 'react-native';
+declare type Props = {
+    uri: string;
+    username: string;
+    button?: JSX.Element;
+    bodyLabel: string;
+    body: string;
+    containerStyle?: StyleProp<ViewStyle>;
+};
+declare const ProfileCard: ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => JSX.Element;
+export default ProfileCard;

package/package.json

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

package/src/assets/icon/index.ts

@@ -33,7 +33,7 @@ const IconAssets = {
   'leave': require('./icon-leave.png'),
   'members': require('./icon-members.png'),
   'message': require('./icon-message.png'),
-  'moderations': require('./icon-moderations.png'),
+  'moderation': require('./icon-moderation.png'),
   'more': require('./icon-more.png'),
   'mute': require('./icon-mute.png'),
   'notifications-filled': require('./icon-notifications-filled.png'),

package/src/components/Modal/index.tsx

@@ -66,6 +66,7 @@ const Modal = ({
 
   return (
     <RNModal
+      statusBarTranslucent={statusBarTranslucent}
       transparent
       hardwareAccelerated
       visible={modalVisible}

package/src/index.ts

@@ -12,11 +12,11 @@ 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 ActionMenu } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';
 export { default as Avatar } from './ui/Avatar';
 export { default as Badge } from './ui/Badge';
-export { default as BottomSheet, BottomSheetItem } from './ui/BottomSheet';
+export { default as BottomSheet } 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';
@@ -24,7 +24,9 @@ export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as OutlinedButton } from './ui/OutlinedButton';
 export { default as Placeholder } from './ui/Placeholder';
+export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
 
@@ -32,9 +34,9 @@ export { default as Toast, useToast, ToastProvider } from './ui/Toast';
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
 export { default as createScaleFactor } from './styles/createScaleFactor';
 export { default as createStyleSheet } from './styles/createStyleSheet';
-export { default as createTypography, UIKitTypographyOverrides } from './styles/createTypography';
+export { default as createTypography } from './styles/createTypography';
 export { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';
-export { HeaderStyleContext, HeaderStyleProvider, HeaderStyleContextType } from './styles/HeaderStyleContext';
+export { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';
 export { default as useHeaderStyle } from './styles/useHeaderStyle';
 
 /** Theme **/
@@ -63,3 +65,7 @@ export type {
   Component,
   GetColorTree,
 } from './types';
+export type { ActionMenuItem } from './ui/ActionMenu';
+export type { BottomSheetItem } from './ui/BottomSheet';
+export type { UIKitTypographyOverrides } from './styles/createTypography';
+export type { HeaderStyleContextType } from './styles/HeaderStyleContext';

package/src/styles/HeaderStyleContext.tsx

@@ -2,22 +2,11 @@ import React from 'react';
 import { StatusBar, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import type { BaseHeaderProps, HeaderElement } from '../types';
+import type { HeaderProps } from '../ui/Header';
 import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
-  HeaderComponent: (
-    props: BaseHeaderProps<
-      {
-        title?: HeaderElement;
-        left?: HeaderElement;
-        right?: HeaderElement;
-        onPressLeft?: () => void;
-        onPressRight?: () => void;
-      },
-      { clearTitleMargin?: boolean }
-    >,
-  ) => React.ReactElement | null;
+  HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;

package/src/theme/DarkUIKitTheme.ts

@@ -169,6 +169,16 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundDark01,
+            textBodyLabel: palette.onBackgroundDark02,
+            textBody: palette.onBackgroundDark01,
+            background: palette.background500,
+          },
+        },
+      },
     },
   }),
 });

package/src/theme/LightUIKitTheme.ts

@@ -169,6 +169,16 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundLight01,
+            textBodyLabel: palette.onBackgroundLight02,
+            textBody: palette.onBackgroundLight01,
+            background: palette.background50,
+          },
+        },
+      },
     },
   }),
 });

package/src/types.ts

@@ -39,7 +39,9 @@ export type Component =
   | 'Placeholder'
   | 'Message'
   | 'DateSeparator'
-  | 'GroupChannelPreview';
+  | 'GroupChannelPreview'
+  | 'ProfileCard';
+
 export type GetColorTree<
   Tree extends {
     Variant: {
@@ -65,6 +67,7 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'incoming' | 'outgoing';
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
+    ProfileCard: 'default';
   };
   State: {
     Header: 'none';
@@ -76,6 +79,7 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'enabled' | 'pressed';
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
+    ProfileCard: 'none';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -96,6 +100,7 @@ export type ComponentColorTree = GetColorTree<{
       | 'coverBackground'
       | 'bodyIconBackground'
       | 'separator';
+    ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -139,6 +144,7 @@ export interface UIKitColors {
     message: ComponentColors<'Message'>;
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+    profileCard: ComponentColors<'ProfileCard'>;
   };
 }
 

package/src/ui/ActionMenu/index.tsx

@@ -15,6 +15,7 @@ export type ActionMenuItem = {
   title?: string;
   menuItems: {
     title: string;
+    style?: 'destructive';
     onPress?: (() => Promise<void>) | (() => void);
     onError?: () => void;
   }[];
@@ -83,7 +84,15 @@ const ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: P
                   }
                 }}
               >
-                <Text subtitle2 color={colors.ui.dialog.default.none.text} numberOfLines={1}>
+                <Text
+                  subtitle2
+                  color={
+                    item.style === 'destructive'
+                      ? colors.ui.dialog.default.none.destructive
+                      : colors.ui.dialog.default.none.text
+                  }
+                  numberOfLines={1}
+                >
                   {item.title}
                 </Text>
               </TouchableOpacity>

package/src/ui/GroupChannelPreview/index.tsx

@@ -28,6 +28,7 @@ type Props = {
 
   frozen?: boolean;
   notificationOff?: boolean;
+  broadcast?: boolean;
 };
 
 const GroupChannelPreview = ({
@@ -43,6 +44,7 @@ const GroupChannelPreview = ({
   titleCaptionLeft,
   frozen,
   notificationOff,
+  broadcast,
 }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
@@ -65,6 +67,14 @@ const GroupChannelPreview = ({
       <View style={styles.rightSection}>
         <View style={styles.rightTopSection}>
           <View style={styles.channelInfoContainer}>
+            {broadcast && (
+              <Icon
+                size={16}
+                icon={'broadcast'}
+                color={colors.secondary}
+                containerStyle={styles.channelInfoBroadcast}
+              />
+            )}
             <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
               {title}
             </Text>
@@ -148,6 +158,9 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
+  channelInfoBroadcast: {
+    marginRight: 4,
+  },
   channelInfoTitle: {
     flexShrink: 1,
     marginRight: 4,

package/src/ui/Header/index.tsx

@@ -11,7 +11,7 @@ import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
 type HeaderElement = string | React.ReactElement | null;
-type HeaderProps = BaseHeaderProps<
+export type HeaderProps = BaseHeaderProps<
   {
     title?: HeaderElement;
     left?: HeaderElement;
@@ -19,7 +19,10 @@ type HeaderProps = BaseHeaderProps<
     onPressLeft?: () => void;
     onPressRight?: () => void;
   },
-  { clearTitleMargin?: boolean }
+  {
+    clearTitleMargin?: boolean;
+    statusBarTopInsetAs?: 'padding' | 'margin';
+  }
 >;
 
 const AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
@@ -36,8 +39,10 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   onPressLeft,
   onPressRight,
   clearTitleMargin = false,
+  statusBarTopInsetAs = 'padding',
 }) => {
   const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
+
   const { colors } = useUIKitTheme();
   const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
 
@@ -54,9 +59,9 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
       style={[
         styles.container,
         {
+          [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: topInset,
           paddingLeft: paddingLeft + styles.container.paddingHorizontal,
           paddingRight: paddingRight + styles.container.paddingHorizontal,
-          paddingTop: topInset,
           backgroundColor: colors.ui.header.nav.none.background,
           borderBottomColor: colors.ui.header.nav.none.borderBottom,
         },

package/src/ui/MenuBar/index.tsx

@@ -14,6 +14,7 @@ export type MenuBarProps = {
 
   onPress: () => void;
   disabled?: boolean;
+  visible?: boolean;
 
   icon: keyof typeof Icon.Assets;
   iconColor?: string;
@@ -26,6 +27,7 @@ export type MenuBarProps = {
 const MenuBar = ({
   variant = 'default',
   disabled,
+  visible = true,
   onPress,
   name,
   icon,
@@ -36,6 +38,8 @@ const MenuBar = ({
 }: MenuBarProps) => {
   const { palette, colors } = useUIKitTheme();
 
+  if (!visible) return null;
+
   return (
     <View>
       <Pressable disabled={disabled} onPress={onPress} style={styles.container}>

package/src/ui/OutlinedButton/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
+
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type OutlinedButtonProps = {
+  children: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+};
+
+const OutlinedButton = ({ children, onPress, containerStyle }: OutlinedButtonProps) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.outlinedButton, { borderColor: colors.onBackground01 }, containerStyle]}
+    >
+      <Text button color={colors.onBackground01} numberOfLines={1} style={styles.outlinedButtonText}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  outlinedButton: {
+    borderRadius: 4,
+    padding: 16,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outlinedButtonText: {
+    textAlign: 'center',
+    width: '100%',
+  },
+});
+
+export default OutlinedButton;

package/src/ui/ProfileCard/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import Divider from '../../components/Divider';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+
+type Props = {
+  uri: string;
+  username: string;
+
+  button?: JSX.Element;
+
+  bodyLabel: string;
+  body: string;
+
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const ProfileCard = ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.profileCard.default.none;
+
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }, containerStyle]}>
+      <View style={styles.profileContainer}>
+        <Avatar uri={uri} size={80} containerStyle={styles.profileAvatar} />
+        <Text h1 color={color.textUsername} numberOfLines={1}>
+          {username}
+        </Text>
+      </View>
+      {button && <View style={styles.messageButtonArea}>{button}</View>}
+      <Divider space={16} />
+      <View style={styles.profileInfoContainer}>
+        <Text body2 color={color.textBodyLabel} style={styles.profileInfoBodyLabel}>
+          {bodyLabel}
+        </Text>
+        <Text body3 numberOfLines={1} color={color.textBody}>
+          {body}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingTop: 32,
+    width: '100%',
+  },
+  profileContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 24,
+  },
+  profileAvatar: {
+    marginBottom: 8,
+  },
+  profileInfoContainer: {
+    padding: 16,
+  },
+  profileInfoBodyLabel: {
+    marginBottom: 4,
+  },
+  messageButtonArea: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+});
+
+export default ProfileCard;