@sendbird/uikit-react-native-foundation 1.0.0-rc.4 → 1.0.2

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

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { ImageProps as NativeImageProps } from 'react-native';
 export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'onError'> {
     onLoad?: (event: {
@@ -10,6 +9,6 @@ export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'o
     }) => void;
     tintColor?: string;
 }
-export declare type SendbirdImageComponent = React.FC<SendbirdImageProps>;
+export declare type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
 declare const _default: SendbirdImageComponent;
 export default _default;

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

@@ -16,5 +16,5 @@ export declare type HeaderStyleContextType = {
 };
 export declare const HeaderStyleContext: React.Context<HeaderStyleContextType>;
 declare type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
-export declare const HeaderStyleProvider: React.FC<Props>;
+export declare const HeaderStyleProvider: ({ children, HeaderComponent, defaultTitleAlign, statusBarTranslucent, }: React.PropsWithChildren<Props>) => JSX.Element;
 export {};

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

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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare type ActionMenuItem = {
     title?: string;
     menuItems: {
@@ -13,5 +12,5 @@ declare type Props = {
     onError?: (error: unknown) => void;
     onDismiss?: () => void;
 } & ActionMenuItem;
-declare const ActionMenu: React.FC<Props>;
+declare const ActionMenu: ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => JSX.Element;
 export default ActionMenu;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AlertButton } from 'react-native';
 export declare type AlertItem = {
     title?: string;
@@ -10,5 +9,5 @@ declare type Props = {
     onHide: () => void;
     onDismiss?: () => void;
 } & AlertItem;
-declare const Alert: React.FC<Props>;
+declare const Alert: ({ onDismiss, visible, onHide, title, message, buttons }: Props) => JSX.Element;
 export default Alert;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-declare type Props = {
+declare type Props = React.PropsWithChildren<{
     size?: number;
     containerStyle?: StyleProp<ViewStyle>;
-};
-declare const AvatarGroup: React.FC<Props>;
+}>;
+declare const AvatarGroup: ({ children, containerStyle, size }: Props) => JSX.Element;
 export default AvatarGroup;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
 declare type Props = {
@@ -7,5 +6,5 @@ declare type Props = {
     backgroundColor?: string;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const AvatarIcon: React.FC<Props>;
+declare const AvatarIcon: ({ size, icon, containerStyle, backgroundColor }: Props) => JSX.Element;
 export default AvatarIcon;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
@@ -13,5 +12,5 @@ declare type Props = {
     muted?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const Avatar: React.FC<Props> & SubComponents;
+declare const Avatar: ((props: Props) => JSX.Element) & SubComponents;
 export default Avatar;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     count: number;
@@ -8,5 +7,5 @@ declare type Props = {
     style?: StyleProp<ViewStyle>;
     size?: 'small' | 'default';
 };
-declare const Badge: React.FC<Props>;
+declare const Badge: ({ count, maxCount, badgeColor, textColor, style, size }: Props) => JSX.Element;
 export default Badge;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type Icon from '../Icon';
 export declare type BottomSheetItem = {
     sheetItems: {
@@ -15,5 +14,5 @@ declare type Props = {
     onError?: (error: unknown) => void;
     onDismiss?: () => void;
 } & BottomSheetItem;
-declare const BottomSheet: React.FC<Props>;
+declare const BottomSheet: ({ onDismiss, onHide, visible, sheetItems }: 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 '../Icon';
-declare type Props = {
+declare type Props = React.PropsWithChildren<{
     style?: StyleProp<ViewStyle>;
     icon?: keyof typeof Icon.Assets;
     variant?: 'contained' | 'text';
@@ -9,6 +9,6 @@ declare type Props = {
     onPress?: () => void;
     buttonColor?: string;
     contentColor?: string;
-};
-declare const Button: React.FC<Props>;
+}>;
+declare const Button: ({ icon, variant, buttonColor, contentColor, disabled, onPress, style, children, }: Props) => JSX.Element;
 export default Button;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     style?: StyleProp<ViewStyle>;
@@ -6,5 +5,5 @@ declare type Props = {
     textColor?: string;
     backgroundColor?: string;
 };
-declare const ChannelFrozenBanner: React.FC<Props>;
+declare const ChannelFrozenBanner: ({ text, backgroundColor, textColor, style }: Props) => JSX.Element;
 export default ChannelFrozenBanner;

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

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

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

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

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

@@ -26,7 +26,7 @@ declare type DialogContextType = {
     openPrompt: (props: DialogPropsBy<'Prompt'>) => void;
     openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;
 };
-declare type Props = {
+declare type Props = React.PropsWithChildren<{
     defaultLabels?: {
         alert?: {
             ok?: string;
@@ -37,8 +37,8 @@ declare type Props = {
             cancel?: string;
         };
     };
-};
-export declare const DialogProvider: React.FC<Props>;
+}>;
+export declare const DialogProvider: ({ defaultLabels, children }: Props) => JSX.Element;
 export declare const useActionMenu: () => Pick<DialogContextType, "openMenu">;
 export declare const useAlert: () => Pick<DialogContextType, "alert">;
 export declare const usePrompt: () => Pick<DialogContextType, "openPrompt">;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     style?: StyleProp<ViewStyle>;
     space?: number;
 };
-declare const Divider: React.FC<Props>;
+declare const Divider: ({ style, space }: Props) => JSX.Element;
 export default Divider;

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

@@ -13,5 +13,5 @@ declare type Props = {
     frozen?: boolean;
     notificationOff?: boolean;
 };
-declare const _default: React.NamedExoticComponent<Props>;
+declare const _default: React.MemoExoticComponent<({ customCover, coverUrl, memberCount, badgeCount, maxBadgeCount, body, bodyIcon, title, titleCaption, frozen, notificationOff, }: Props) => JSX.Element>;
 export default _default;

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

@@ -12,18 +12,14 @@ declare type HeaderProps = BaseHeaderProps<{
 }, {
     clearTitleMargin?: boolean;
 }>;
-declare const Header: React.FC<HeaderProps> & {
+declare const Header: ((props: HeaderProps) => JSX.Element) & {
     Button: typeof HeaderButton;
     Title: typeof HeaderTitle;
     Subtitle: typeof HeaderSubtitle;
 };
-declare const HeaderTitle: React.FC<{
-    children: string;
-} & TextProps>;
-declare const HeaderSubtitle: React.FC<{
-    children: string;
-} & TextProps>;
-declare const HeaderButton: React.FC<TouchableOpacityProps & {
-    color?: string;
-}>;
+declare const HeaderTitle: ({ children, style, ...props }: TextProps) => JSX.Element;
+declare const HeaderSubtitle: ({ children, style, ...props }: TextProps) => JSX.Element;
+declare const HeaderButton: ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & {
+    color?: string | undefined;
+}) => JSX.Element;
 export default Header;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ImageStyle, StyleProp, ViewStyle } from 'react-native';
 import IconAssets from '../../assets/icon';
 declare type IconNames = keyof typeof IconAssets;
@@ -9,7 +8,7 @@ declare type Props = {
     style?: StyleProp<ImageStyle>;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const Icon: React.FC<Props> & {
+declare const Icon: ((props: Props) => JSX.Element) & {
     Assets: typeof IconAssets;
 };
 export default Icon;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     size?: number;
     color?: string;
     style?: StyleProp<ViewStyle>;
 };
-declare const LoadingSpinner: React.FC<Props>;
+declare const LoadingSpinner: ({ size, color, style }: Props) => JSX.Element;
 export default LoadingSpinner;

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

@@ -11,5 +11,5 @@ export declare type MenuBarProps = {
     actionLabel?: string;
     actionItem?: React.ReactNode;
 };
-declare const MenuBar: React.FC<MenuBarProps>;
+declare const MenuBar: ({ variant, disabled, onPress, name, icon, iconColor, iconBackgroundColor, actionLabel, actionItem, }: MenuBarProps) => JSX.Element;
 export default MenuBar;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ModalProps, StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     type?: 'slide' | 'fade';
@@ -14,5 +13,5 @@ declare type Props = {
  * Modal Close: Triggered by Modal.props.onClose() call
  * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false
  * */
-declare const Modal: React.FC<Props>;
+declare const Modal: ({ children, onClose, backgroundStyle, onDismiss, type, visible, disableBackgroundClose, enableKeyboardAvoid, statusBarTranslucent, ...props }: Props) => JSX.Element;
 export default Modal;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Icon from '../Icon';
 declare type Props = {
     loading?: boolean;
@@ -7,5 +6,5 @@ declare type Props = {
     errorRetryLabel?: string;
     onPressRetry?: () => void;
 };
-declare const Placeholder: React.FC<Props>;
+declare const Placeholder: ({ icon, loading, message, errorRetryLabel, onPressRetry }: Props) => JSX.Element;
 export default Placeholder;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare type PromptItem = {
     title: string;
     placeholder?: string;
@@ -14,5 +13,5 @@ declare type Props = {
     onDismiss?: () => void;
     autoFocus?: boolean;
 } & PromptItem;
-declare const Prompt: React.FC<Props>;
+declare const Prompt: ({ onDismiss, visible, onHide, autoFocus, title, defaultValue, placeholder, onSubmit, onCancel, submitLabel, cancelLabel, }: Props) => JSX.Element;
 export default Prompt;

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

@@ -1,11 +1,11 @@
 import React from 'react';
-interface SwitchProps {
+declare type SwitchProps = React.PropsWithChildren<{
     trackColor?: string;
     thumbColor?: string;
     inactiveThumbColor?: string;
     inactiveTrackColor?: string;
     value: boolean;
     onChangeValue: (val: boolean) => void;
-}
-declare const Switch: React.FC<SwitchProps>;
+}>;
+declare const Switch: ({ value, onChangeValue, inactiveThumbColor, inactiveTrackColor, trackColor, thumbColor, }: SwitchProps) => JSX.Element;
 export default Switch;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import { TextProps as RNTextProps } from 'react-native';
 import type { TypoName, UIKitTheme } from '../../types';
 declare type TypographyProps = Partial<Record<TypoName, boolean>>;
 export declare type TextProps = RNTextProps & TypographyProps & {
     color?: ((colors: UIKitTheme['colors']) => string) | string;
 };
-declare const Text: React.FC<TextProps>;
+declare const Text: ({ children, color, style, ...props }: TextProps) => JSX.Element;
 export default Text;

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

@@ -3,16 +3,16 @@ declare type ToastType = 'normal' | 'error' | 'success';
 declare type Context = {
     show(text: string, type?: ToastType): void;
 };
-declare type Props = {
+declare type Props = React.PropsWithChildren<{
     top?: number;
     bottom?: number;
     visible: boolean;
     type: ToastType;
     children: string;
-};
-declare const Toast: React.FC<Props>;
-export declare const ToastProvider: React.FC<{
-    dismissTimeout?: number;
 }>;
+declare const Toast: ({ visible, type, children, top, bottom }: Props) => JSX.Element;
+export declare const ToastProvider: ({ children, dismissTimeout, }: React.PropsWithChildren<{
+    dismissTimeout?: number | undefined;
+}>) => JSX.Element;
 export declare const useToast: () => Context;
 export default Toast;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { TextProps } from '../Text';
 declare type OnPressUrl = (url: string, httpProtocol: boolean) => void;
 declare type Props = TextProps & {
     onPressUrl?: OnPressUrl;
     strict?: boolean;
 };
-declare const URLParsedText: React.FC<Props>;
+declare const URLParsedText: ({ children, onPressUrl, strict, ...props }: Props) => JSX.Element;
 export default URLParsedText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.2",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,11 +38,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "1.0.0-rc.4"
+    "@sendbird/uikit-utils": "1.0.2"
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-native": "^0.66.15",
+    "@types/react": "*",
+    "@types/react-native": "*",
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.0",
@@ -80,5 +80,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "d5044c5fd0a2e25c0d3ab426094c679f49c84d1c"
+  "gitHead": "257ece5f957e03ff5c08b79780b33d9d19adc5de"
 }

package/src/components/Image/index.ts

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { ImageProps as NativeImageProps } from 'react-native';
 import { NativeModules } from 'react-native';
 
@@ -8,7 +7,7 @@ export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'o
   tintColor?: string;
 }
 
-export type SendbirdImageComponent = React.FC<SendbirdImageProps>;
+export type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
 
 function getImageModule(): SendbirdImageComponent {
   const hasFastImage = Boolean(NativeModules.FastImageView);

package/src/styles/HeaderStyleContext.tsx

@@ -29,12 +29,12 @@ export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
 });
 
 type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
-export const HeaderStyleProvider: React.FC<Props> = ({
+export const HeaderStyleProvider = ({
   children,
   HeaderComponent = () => null,
   defaultTitleAlign,
   statusBarTranslucent,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const { top } = useSafeAreaInsets();
 
   return (

package/src/theme/UIKitThemeProvider.tsx

@@ -4,8 +4,10 @@ import type { UIKitTheme } from '../types';
 import LightUIKitTheme from './LightUIKitTheme';
 import UIKitThemeContext from './UIKitThemeContext';
 
-type Props = { theme?: UIKitTheme };
-const UIKitThemeProvider: React.FC<Props> = ({ children, theme = LightUIKitTheme }) => {
+type Props = React.PropsWithChildren<{
+  theme?: UIKitTheme;
+}>;
+const UIKitThemeProvider = ({ children, theme = LightUIKitTheme }: Props) => {
   return <UIKitThemeContext.Provider value={theme}>{children}</UIKitThemeContext.Provider>;
 };
 

package/src/ui/ActionMenu/index.tsx

@@ -26,7 +26,7 @@ type Props = {
   onError?: (error: unknown) => void;
   onDismiss?: () => void;
 } & ActionMenuItem;
-const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, menuItems }) => {
+const ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const [pending, setPending] = useState(false);

package/src/ui/Alert/index.tsx

@@ -20,14 +20,7 @@ type Props = {
   onHide: () => void;
   onDismiss?: () => void;
 } & AlertItem;
-const Alert: React.FC<Props> = ({
-  onDismiss,
-  visible,
-  onHide,
-  title = '',
-  message = '',
-  buttons = [{ text: 'OK' }],
-}) => {
+const Alert = ({ onDismiss, visible, onHide, title = '', message = '', buttons = [{ text: 'OK' }] }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
 

package/src/ui/Avatar/AvatarGroup.tsx

@@ -3,8 +3,11 @@ import { StyleProp, View, ViewStyle } from 'react-native';
 
 const MAX = 4;
 
-type Props = { size?: number; containerStyle?: StyleProp<ViewStyle> };
-const AvatarGroup: React.FC<Props> = ({ children, containerStyle, size = 56 }) => {
+type Props = React.PropsWithChildren<{
+  size?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}>;
+const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
   const childAmount = React.Children.count(children);
 
   if (childAmount === 0) {

package/src/ui/Avatar/AvatarIcon.tsx

@@ -11,7 +11,7 @@ type Props = {
   backgroundColor?: string;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const AvatarIcon: React.FC<Props> = ({ size = 56, icon, containerStyle, backgroundColor }) => {
+const AvatarIcon = ({ size = 56, icon, containerStyle, backgroundColor }: Props) => {
   const { colors, palette } = useUIKitTheme();
   return (
     <View

package/src/ui/Avatar/index.tsx

@@ -10,7 +10,10 @@ import Icon from '../Icon';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
 
-type SubComponents = { Group: typeof AvatarGroup; Icon: typeof AvatarIcon };
+type SubComponents = {
+  Group: typeof AvatarGroup;
+  Icon: typeof AvatarIcon;
+};
 type Props = {
   uri?: string;
   size?: number;
@@ -18,7 +21,13 @@ type Props = {
   muted?: boolean;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Avatar: React.FC<Props> & SubComponents = ({ uri, square, muted = false, size = 56, containerStyle }) => {
+const Avatar: ((props: Props) => JSX.Element) & SubComponents = ({
+  uri,
+  square,
+  muted = false,
+  size = 56,
+  containerStyle,
+}) => {
   const { colors, palette } = useUIKitTheme();
   const [loadFailure, setLoadFailure] = useState(false);
 
@@ -47,7 +56,7 @@ const Avatar: React.FC<Props> & SubComponents = ({ uri, square, muted = false, s
   );
 };
 
-const MutedOverlay: React.FC<{ size: number }> = ({ size }) => {
+const MutedOverlay = ({ size }: { size: number }) => {
   const { palette } = useUIKitTheme();
   return (
     <View style={[styles.container, StyleSheet.absoluteFill]}>

package/src/ui/Badge/index.tsx

@@ -16,7 +16,7 @@ type Props = {
   size?: 'small' | 'default';
 };
 
-const Badge: React.FC<Props> = ({ count, maxCount, badgeColor, textColor, style, size = 'default' }) => {
+const Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default' }: Props) => {
   const { colors } = useUIKitTheme();
   const isSmall = size === 'small';
   return (

package/src/ui/BottomSheet/index.tsx

@@ -22,7 +22,7 @@ type Props = {
   onError?: (error: unknown) => void;
   onDismiss?: () => void;
 } & BottomSheetItem;
-const BottomSheet: React.FC<Props> = ({ onDismiss, onHide, visible, sheetItems }) => {
+const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { width } = useWindowDimensions();
   const { bottom, left, right } = useSafeAreaInsets();

package/src/ui/Button/index.tsx

@@ -6,7 +6,7 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import Icon from '../Icon';
 import Text from '../Text';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
   icon?: keyof typeof Icon.Assets;
   variant?: 'contained' | 'text';
@@ -14,8 +14,8 @@ type Props = {
   onPress?: () => void;
   buttonColor?: string;
   contentColor?: string;
-};
-const Button: React.FC<Props> = ({
+}>;
+const Button = ({
   icon,
   variant = 'contained',
   buttonColor,
@@ -24,7 +24,7 @@ const Button: React.FC<Props> = ({
   onPress,
   style,
   children,
-}) => {
+}: Props) => {
   const { colors } = useUIKitTheme();
 
   const getStateColor = (pressed: boolean, disabled?: boolean) => {

package/src/ui/ChannelFrozenBanner/index.tsx

@@ -12,7 +12,7 @@ type Props = {
   backgroundColor?: string;
 };
 
-const ChannelFrozenBanner: React.FC<Props> = ({ text = 'Channel is frozen', backgroundColor, textColor, style }) => {
+const ChannelFrozenBanner = ({ text = 'Channel is frozen', backgroundColor, textColor, style }: Props) => {
   const { palette } = useUIKitTheme();
 
   return (

package/src/ui/Dialog/DialogBox.tsx

@@ -4,10 +4,10 @@ import { StyleProp, View, ViewStyle } from 'react-native';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
-};
-const DialogBox: React.FC<Props> = ({ style, children }) => {
+}>;
+const DialogBox = ({ style, children }: Props) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>