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

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

@@ -1,6 +1,6 @@
 import type { TextProps } from '../Text';
-declare type OnPressUrl = (url: string, httpProtocol: boolean) => void;
-declare type Props = TextProps & {
+type OnPressUrl = (url: string, httpProtocol: boolean) => void;
+type Props = TextProps & {
     onPressUrl?: OnPressUrl;
     strict?: boolean;
 };

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

@@ -5,16 +5,17 @@ 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 RegexText } from './components/RegexText';
 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 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 +23,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 +46,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,21 +1,13 @@
 import React from 'react';
-import type { BaseHeaderProps, HeaderElement } from '../types';
-export declare type HeaderStyleContextType = {
-    HeaderComponent: (props: BaseHeaderProps<{
-        title?: HeaderElement;
-        left?: HeaderElement;
-        right?: HeaderElement;
-        onPressLeft?: () => void;
-        onPressRight?: () => void;
-    }, {
-        clearTitleMargin?: boolean;
-    }>) => React.ReactElement | null;
+import type { HeaderProps } from '../ui/Header';
+export type HeaderStyleContextType = {
+    HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
     defaultTitleAlign: 'left' | 'center';
     statusBarTranslucent: boolean;
     topInset: number;
     defaultHeight: number;
 };
 export declare const HeaderStyleContext: React.Context<HeaderStyleContextType>;
-declare type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
+type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
 export declare const HeaderStyleProvider: ({ children, HeaderComponent, defaultTitleAlign, statusBarTranslucent, }: React.PropsWithChildren<Props>) => JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import type { FontAttributes, UIKitTypography } from '../types';
-export declare type UIKitTypographyOverrides = Partial<UIKitTypography> & {
+export type UIKitTypographyOverrides = Partial<UIKitTypography> & {
     shared?: Partial<FontAttributes>;
 };
 declare const createTypography: (overrides?: UIKitTypographyOverrides, scaleFactor?: (dp: number) => number) => UIKitTypography;

package/lib/typescript/src/theme/UIKitThemeProvider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { UIKitTheme } from '../types';
-declare type Props = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     theme?: UIKitTheme;
 }>;
 declare const UIKitThemeProvider: ({ children, theme }: Props) => JSX.Element;

package/lib/typescript/src/theme/createTheme.d.ts

@@ -1,6 +1,6 @@
 import { UIKitTypographyOverrides } from '../styles/createTypography';
 import type { UIKitColors, UIKitTheme } from '../types';
-declare type Options = {
+type Options = {
     colorScheme: UIKitTheme['colorScheme'];
     colors: (palette: UIKitTheme['palette']) => UIKitColors;
     palette?: UIKitTheme['palette'];

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

@@ -14,9 +14,9 @@ export interface UIKitTypography {
     caption3: FontAttributes;
     caption4: FontAttributes;
 }
-export declare type TypoName = keyof UIKitTypography;
-export declare type FontAttributes = Pick<TextStyle, 'fontFamily' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'fontWeight'>;
-export declare type UIKitColorScheme = 'light' | 'dark';
+export type TypoName = keyof UIKitTypography;
+export type FontAttributes = Pick<TextStyle, 'fontFamily' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'fontWeight'>;
+export type UIKitColorScheme = 'light' | 'dark';
 export interface UIKitTheme {
     colorScheme: UIKitColorScheme;
     select<V>(options: {
@@ -26,8 +26,8 @@ export interface UIKitTheme {
     colors: UIKitColors;
     typography: UIKitTypography;
 }
-export declare type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'Message' | 'DateSeparator' | 'GroupChannelPreview';
-export declare type GetColorTree<Tree extends {
+export type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'Message' | 'DateSeparator' | 'GroupChannelPreview' | 'ProfileCard' | 'Reaction';
+export type GetColorTree<Tree extends {
     Variant: {
         [key in Component]: string;
     };
@@ -38,7 +38,7 @@ export declare type GetColorTree<Tree extends {
         [key in Component]: string;
     };
 }> = Tree;
-export declare type ComponentColorTree = GetColorTree<{
+export type ComponentColorTree = GetColorTree<{
     Variant: {
         Header: 'nav';
         Button: 'contained' | 'text';
@@ -49,6 +49,8 @@ export declare type ComponentColorTree = GetColorTree<{
         Message: 'incoming' | 'outgoing';
         DateSeparator: 'default';
         GroupChannelPreview: 'default';
+        ProfileCard: 'default';
+        Reaction: 'default' | 'rounded';
     };
     State: {
         Header: 'none';
@@ -60,6 +62,8 @@ export declare type ComponentColorTree = GetColorTree<{
         Message: 'enabled' | 'pressed';
         DateSeparator: 'none';
         GroupChannelPreview: 'none';
+        ProfileCard: 'none';
+        Reaction: 'enabled' | 'selected';
     };
     ColorPart: {
         Header: 'background' | 'borderBottom';
@@ -71,9 +75,11 @@ 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';
+        Reaction: 'background' | 'highlight';
     };
 }>;
-export declare type ComponentColors<T extends Component> = {
+export type ComponentColors<T extends Component> = {
     [key in ComponentColorTree['Variant'][T]]: {
         [key in ComponentColorTree['State'][T]]: {
             [key in ComponentColorTree['ColorPart'][T]]: string;
@@ -113,17 +119,19 @@ export interface UIKitColors {
         message: ComponentColors<'Message'>;
         dateSeparator: ComponentColors<'DateSeparator'>;
         groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+        profileCard: ComponentColors<'ProfileCard'>;
+        reaction: ComponentColors<'Reaction'>;
     };
 }
-export declare type HeaderElement = string | ReactElement | null;
-export declare type HeaderPartProps = {
+export type HeaderElement = string | ReactElement | null;
+export type HeaderPartProps = {
     title?: HeaderElement;
     right?: HeaderElement;
     left?: HeaderElement;
     onPressLeft?: (...params: any[]) => any;
     onPressRight?: (...params: any[]) => any;
 };
-export declare type BaseHeaderProps<HeaderParts extends HeaderPartProps = {}, AdditionalProps = {}> = {
+export type BaseHeaderProps<HeaderParts extends HeaderPartProps = {}, AdditionalProps = {}> = {
     titleAlign?: 'left' | 'center' | 'right';
     children?: ReactNode;
 } & HeaderParts & AdditionalProps;

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

@@ -1,12 +1,13 @@
-export declare type ActionMenuItem = {
+export type ActionMenuItem = {
     title?: string;
     menuItems: {
         title: string;
+        style?: 'destructive';
         onPress?: (() => Promise<void>) | (() => void);
         onError?: () => void;
     }[];
 };
-declare type Props = {
+type Props = {
     visible: boolean;
     onHide: () => void;
     onError?: (error: unknown) => void;

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

@@ -1,10 +1,10 @@
 import { AlertButton } from 'react-native';
-export declare type AlertItem = {
+export type AlertItem = {
     title?: string;
     message?: string;
     buttons?: AlertButton[];
 };
-declare type Props = {
+type Props = {
     visible: boolean;
     onHide: () => void;
     onDismiss?: () => void;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-declare type Props = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     size?: number;
     containerStyle?: StyleProp<ViewStyle>;
 }>;

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

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

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

@@ -1,11 +1,11 @@
 import { StyleProp, ViewStyle } from 'react-native';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
-declare type SubComponents = {
+type SubComponents = {
     Group: typeof AvatarGroup;
     Icon: typeof AvatarIcon;
 };
-declare type Props = {
+type Props = {
     uri?: string;
     size?: number;
     square?: boolean;

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

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
-declare type Props = {
+type Props = {
     count: number;
     maxCount?: number;
     badgeColor?: string;

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

@@ -1,5 +1,8 @@
 import type Icon from '../../components/Icon';
-export declare type BottomSheetItem = {
+type HeaderProps = {
+    onClose: () => Promise<void>;
+};
+export type BottomSheetItem = {
     sheetItems: {
         icon?: keyof typeof Icon.Assets;
         iconColor?: string;
@@ -7,12 +10,13 @@ export declare type BottomSheetItem = {
         titleColor?: string;
         onPress: () => void;
     }[];
+    HeaderComponent?: (props: HeaderProps) => JSX.Element;
 };
-declare type Props = {
+type Props = {
     visible: boolean;
     onHide: () => Promise<void>;
     onError?: (error: unknown) => void;
     onDismiss?: () => void;
 } & BottomSheetItem;
-declare const BottomSheet: ({ onDismiss, onHide, visible, sheetItems }: Props) => JSX.Element;
+declare const BottomSheet: ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => JSX.Element;
 export default BottomSheet;

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

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

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

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
-declare type Props = {
+type Props = {
     style?: StyleProp<ViewStyle>;
     text?: string;
     textColor?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-declare type Props = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
 }>;
 declare const DialogBox: ({ style, children }: Props) => JSX.Element;

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../../components/Icon';
-declare type Props = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
 }>;
 declare const DialogSheet: ((props: Props) => JSX.Element) & {
     Item: typeof SheetItem;
 };
-export declare type SheetItemProps = {
+export type SheetItemProps = {
     icon?: keyof typeof Icon.Assets;
     iconColor?: string;
     title: string;

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

@@ -3,7 +3,7 @@ import type { ActionMenuItem } from '../ActionMenu';
 import type { AlertItem } from '../Alert';
 import type { BottomSheetItem } from '../BottomSheet';
 import type { PromptItem } from '../Prompt';
-declare type DialogJob = {
+type DialogJob = {
     type: 'ActionMenu';
     props: ActionMenuItem;
 } | {
@@ -16,17 +16,17 @@ declare type DialogJob = {
     type: 'BottomSheet';
     props: BottomSheetItem;
 };
-declare type DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends {
+type DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends {
     type: T;
     props: infer P;
 } ? P : never;
-declare type DialogContextType = {
+type DialogContextType = {
     openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;
     alert: (props: DialogPropsBy<'Alert'>) => void;
     openPrompt: (props: DialogPropsBy<'Prompt'>) => void;
     openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;
 };
-declare type Props = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     defaultLabels?: {
         alert?: {
             ok?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Icon from '../../components/Icon';
-declare type Props = {
+type Props = {
     customCover?: React.ReactElement;
     coverUrl: string;
     title: string;
@@ -13,6 +13,9 @@ declare type Props = {
     maxBadgeCount?: number;
     frozen?: boolean;
     notificationOff?: boolean;
+    broadcast?: boolean;
+    mentioned?: boolean;
+    mentionTrigger?: string;
 };
-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, mentioned, mentionTrigger, }: Props) => JSX.Element;
 export default GroupChannelPreview;

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

@@ -2,8 +2,8 @@ import React from 'react';
 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<{
+type HeaderElement = string | React.ReactElement | null;
+export 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/LoadingSpinner/index.d.ts

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
-declare type Props = {
+type Props = {
     size?: number;
     color?: string;
     style?: StyleProp<ViewStyle>;

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import Icon from '../../components/Icon';
-export declare type MenuBarProps = {
+export 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';
+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/Placeholder/index.d.ts

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

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

@@ -0,0 +1,11 @@
+import { StyleProp, ViewStyle } from 'react-native';
+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/lib/typescript/src/ui/Prompt/index.d.ts

@@ -1,4 +1,4 @@
-export declare type PromptItem = {
+export type PromptItem = {
     title: string;
     placeholder?: string;
     defaultValue?: string;
@@ -7,7 +7,7 @@ export declare type PromptItem = {
     onCancel?: () => void;
     cancelLabel?: string;
 };
-declare type Props = {
+type Props = {
     visible: boolean;
     onHide: () => void;
     onDismiss?: () => void;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-declare type ToastType = 'normal' | 'error' | 'success';
-declare type Context = {
+type ToastType = 'normal' | 'error' | 'success';
+type Context = {
     show(text: string, type?: ToastType): void;
 };
-declare type Props = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     top?: number;
     bottom?: number;
     visible: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -16,7 +16,8 @@
   "scripts": {
     "test": "jest",
     "build": "bob build",
-    "clean": "del lib"
+    "clean": "del lib",
+    "generate-icons": "node src/assets/bundle-icons.js"
   },
   "keywords": [
     "react-native",
@@ -38,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.0.3"
+    "@sendbird/uikit-utils": "2.2.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -48,7 +49,7 @@
     "react-native-builder-bob": "^0.18.0",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
-    "typescript": "^4.1.3"
+    "typescript": "4.9.4"
   },
   "peerDependencies": {
     "react": ">=16.13.1",
@@ -80,5 +81,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "e3a34ae962741ffd2b647a466cf97e38f5006379"
+  "gitHead": "bd7ab217a07e91ba644c0cb69694a92b123326bf"
 }

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'),
@@ -44,6 +44,8 @@ const IconAssets = {
   'play': require('./icon-play.png'),
   'plus': require('./icon-plus.png'),
   'question': require('./icon-question.png'),
+  'radio-off': require('./icon-radio-off.png'),
+  'radio-on': require('./icon-radio-on.png'),
   'refresh': require('./icon-refresh.png'),
   'remove': require('./icon-remove.png'),
   'reply-filled': require('./icon-reply-filled.png'),

package/src/components/Modal/index.tsx

@@ -19,8 +19,9 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
+type ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';
 type Props = {
-  type?: 'slide' | 'fade';
+  type?: ModalAnimationType;
   onClose: () => void;
   backgroundStyle?: StyleProp<ViewStyle>;
   disableBackgroundClose?: boolean;
@@ -66,6 +67,7 @@ const Modal = ({
 
   return (
     <RNModal
+      statusBarTranslucent={statusBarTranslucent}
       transparent
       hardwareAccelerated
       visible={modalVisible}
@@ -116,12 +118,12 @@ const isHideGesture = (distanceY: number, velocityY: number) => {
   return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);
 };
 const useModalPanResponder = (
-  type: 'slide' | 'fade',
+  type: ModalAnimationType,
   translateY: Animated.Value,
   show: () => void,
   hide: () => void,
 ) => {
-  if (type === 'fade') return { panHandlers: {} };
+  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };
   return React.useRef(
     PanResponder.create({
       onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,
@@ -136,15 +138,15 @@ const useModalPanResponder = (
   ).current;
 };
 
-const useModalAnimation = (type: 'slide' | 'fade') => {
-  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;
+const useModalAnimation = (type: ModalAnimationType) => {
+  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;
   const baseAnimBackground = useRef(new Animated.Value(0)).current;
   const baseAnimContent = useRef(new Animated.Value(initialY)).current;
 
   const content = {
     opacity: baseAnimBackground.interpolate({
       inputRange: [0, 1],
-      outputRange: [type === 'slide' ? 1 : 0, 1],
+      outputRange: [type === 'fade' ? 0 : 1, 1],
     }),
     translateY: baseAnimContent,
   };