@sendbird/uikit-react-native-foundation 1.0.0 → 1.1.0

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",
+  "version": "1.1.0",
   "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"
+    "@sendbird/uikit-utils": "1.1.0"
   },
   "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": "c95ed8b6819a446b1136d2849939df57c323ac23"
+  "gitHead": "787ef6d52fec5d01e9b831d7a6f17e33614e2d09"
 }

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { StatusBar } from 'react-native';
+import { StatusBar, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseHeaderProps, HeaderElement } from '../types';
+import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
   HeaderComponent: (
@@ -20,22 +21,25 @@ export type HeaderStyleContextType = {
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;
+  defaultHeight: number;
 };
 export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
   HeaderComponent: () => null,
   defaultTitleAlign: 'left',
   statusBarTranslucent: true,
   topInset: StatusBar.currentHeight ?? 0,
+  defaultHeight: getDefaultHeaderHeight(false),
 });
 
 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();
+  const { width, height } = useWindowDimensions();
 
   return (
     <HeaderStyleContext.Provider
@@ -44,6 +48,7 @@ export const HeaderStyleProvider: React.FC<Props> = ({
         defaultTitleAlign,
         statusBarTranslucent,
         topInset: statusBarTranslucent ? top : 0,
+        defaultHeight: getDefaultHeaderHeight(width > height),
       }}
     >
       {children}

package/src/styles/createScaleFactor.ts

@@ -6,7 +6,8 @@ const DESIGNED_DEVICE_WIDTH = 360;
 
 const createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {
   const ratio = Math.min(width, height) / deviceWidth;
-  return (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);
+  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
+  return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
 
 createScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {

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]}>

package/src/ui/Dialog/DialogSheet.tsx

@@ -6,10 +6,10 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import Icon from '../Icon';
 import Text from '../Text';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
-};
-const DialogSheet: React.FC<Props> & { Item: typeof SheetItem } = ({ style, children }) => {
+}>;
+const DialogSheet: ((props: Props) => JSX.Element) & { Item: typeof SheetItem } = ({ style, children }) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>
@@ -24,7 +24,7 @@ export type SheetItemProps = {
   title: string;
   titleColor?: string;
 };
-const SheetItem: React.FC<SheetItemProps> = ({ icon, title, iconColor, titleColor }) => {
+const SheetItem = ({ icon, title, iconColor, titleColor }: SheetItemProps) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.sheetItemContainer, { backgroundColor: colors.ui.dialog.default.none.background }]}>

package/src/ui/Dialog/index.tsx

@@ -45,14 +45,14 @@ const ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'
 const PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);
 const BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);
 
-type Props = {
+type Props = React.PropsWithChildren<{
   defaultLabels?: {
     alert?: { ok?: string };
     prompt?: { placeholder?: string; ok?: string; cancel?: string };
   };
-};
+}>;
 const DISMISS_TIMEOUT = 3000;
-export const DialogProvider: React.FC<Props> = ({ defaultLabels, children }) => {
+export const DialogProvider = ({ defaultLabels, children }: Props) => {
   const waitDismissTimeout = useRef<NodeJS.Timeout>();
   const waitDismissPromise = useRef<() => void>();
   const waitDismiss = useCallback((resolver: () => void) => {

package/src/ui/Divider/index.tsx

@@ -9,7 +9,7 @@ type Props = {
   space?: number;
 };
 
-const Divider: React.FC<Props> = ({ style, space }) => {
+const Divider = ({ style, space }: Props) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[style, styles.divider, { paddingHorizontal: space }]}>

package/src/ui/GroupChannelPreview/index.tsx

@@ -15,7 +15,10 @@ type Props = {
   coverUrl: string;
 
   title: string;
+
   titleCaption: string;
+  titleCaptionLeft?: React.ReactElement;
+
   bodyIcon?: keyof typeof Icon.Assets;
   body: string;
 
@@ -27,7 +30,7 @@ type Props = {
   notificationOff?: boolean;
 };
 
-const GroupChannelPreview: React.FC<Props> = ({
+const GroupChannelPreview = ({
   customCover,
   coverUrl,
   memberCount,
@@ -37,9 +40,10 @@ const GroupChannelPreview: React.FC<Props> = ({
   bodyIcon,
   title,
   titleCaption,
+  titleCaptionLeft,
   frozen,
   notificationOff,
-}) => {
+}: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
 
@@ -60,7 +64,7 @@ const GroupChannelPreview: React.FC<Props> = ({
       </View>
       <View style={styles.rightSection}>
         <View style={styles.rightTopSection}>
-          <View style={styles.channelInfo}>
+          <View style={styles.channelInfoContainer}>
             <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
               {title}
             </Text>
@@ -74,8 +78,9 @@ const GroupChannelPreview: React.FC<Props> = ({
             )}
             {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}
           </View>
-          <View style={styles.titleCaption}>
-            <Text caption2 color={color.default.none.textTitleCaption}>
+          <View style={styles.titleCaptionContainer}>
+            {titleCaptionLeft}
+            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>
               {titleCaption}
             </Text>
           </View>
@@ -132,7 +137,7 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     marginBottom: 4,
   },
-  channelInfo: {
+  channelInfoContainer: {
     flex: 1,
     marginRight: 4,
     alignItems: 'center',
@@ -149,9 +154,13 @@ const styles = createStyleSheet({
   channelInfoFrozen: {
     marginRight: 4,
   },
-  titleCaption: {
+  titleCaptionContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
     marginLeft: 4,
-    paddingTop: 2,
+  },
+  titleCaptionText: {
+    marginTop: 2,
   },
   rightBottomSection: {
     flex: 1,
@@ -190,4 +199,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(GroupChannelPreview);
+export default GroupChannelPreview;

package/src/ui/Header/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';
+import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import type { BaseHeaderProps } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
-import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Text, { TextProps } from '../Text';
@@ -24,7 +23,7 @@ type HeaderProps = BaseHeaderProps<
 >;
 
 const AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
-const Header: React.FC<HeaderProps> & {
+const Header: ((props: HeaderProps) => JSX.Element) & {
   Button: typeof HeaderButton;
   Title: typeof HeaderTitle;
   Subtitle: typeof HeaderSubtitle;
@@ -38,8 +37,7 @@ const Header: React.FC<HeaderProps> & {
   onPressRight,
   clearTitleMargin = false,
 }) => {
-  const { topInset, defaultTitleAlign } = useHeaderStyle();
-  const { width, height } = useWindowDimensions();
+  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
 
@@ -64,7 +62,7 @@ const Header: React.FC<HeaderProps> & {
         },
       ]}
     >
-      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>
+      <View style={[styles.header, { height: defaultHeight }]}>
         <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />
         <View
           style={[
@@ -82,7 +80,7 @@ const Header: React.FC<HeaderProps> & {
   );
 };
 
-const LeftSide: React.FC<HeaderProps> = ({ titleAlign, onPressLeft, left }) => {
+const LeftSide = ({ titleAlign, onPressLeft, left }: HeaderProps) => {
   if (titleAlign === 'center') {
     return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;
   }
@@ -94,7 +92,7 @@ const LeftSide: React.FC<HeaderProps> = ({ titleAlign, onPressLeft, left }) => {
   );
 };
 
-const RightSide: React.FC<HeaderProps> = ({ titleAlign, onPressRight, right }) => {
+const RightSide = ({ titleAlign, onPressRight, right }: HeaderProps) => {
   if (titleAlign === 'center') {
     return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;
   }
@@ -106,14 +104,14 @@ const RightSide: React.FC<HeaderProps> = ({ titleAlign, onPressRight, right }) =
   );
 };
 
-const HeaderTitle: React.FC<{ children: string } & TextProps> = ({ children, style, ...props }) => {
+const HeaderTitle = ({ children, style, ...props }: TextProps) => {
   return (
     <Text {...props} h1 numberOfLines={1} style={style}>
       {children}
     </Text>
   );
 };
-const HeaderSubtitle: React.FC<{ children: string } & TextProps> = ({ children, style, ...props }) => {
+const HeaderSubtitle = ({ children, style, ...props }: TextProps) => {
   const { colors } = useUIKitTheme();
   return (
     <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>
@@ -121,13 +119,7 @@ const HeaderSubtitle: React.FC<{ children: string } & TextProps> = ({ children,
     </Text>
   );
 };
-const HeaderButton: React.FC<TouchableOpacityProps & { color?: string }> = ({
-  children,
-  disabled,
-  onPress,
-  color,
-  ...props
-}) => {
+const HeaderButton = ({ children, disabled, onPress, color, ...props }: TouchableOpacityProps & { color?: string }) => {
   return (
     <TouchableOpacity
       style={styles.button}

package/src/ui/Icon/index.tsx

@@ -15,8 +15,13 @@ type Props = {
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
 };
-
-const Icon: React.FC<Props> & { Assets: typeof IconAssets } = ({ icon, color, size = 24, containerStyle, style }) => {
+const Icon: ((props: Props) => JSX.Element) & { Assets: typeof IconAssets } = ({
+  icon,
+  color,
+  size = 24,
+  containerStyle,
+  style,
+}) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
   return (

package/src/ui/LoadingSpinner/index.tsx

@@ -10,7 +10,7 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-const LoadingSpinner: React.FC<Props> = ({ size = 24, color, style }) => {
+const LoadingSpinner = ({ size = 24, color, style }: Props) => {
   const { colors } = useUIKitTheme();
   return (
     <Rotate style={style}>
@@ -37,7 +37,7 @@ const useLoopAnimated = (duration: number, useNativeDriver = true) => {
   return animated;
 };
 
-const Rotate: React.FC<{ style: StyleProp<ViewStyle> }> = ({ children, style }) => {
+const Rotate = ({ children, style }: React.PropsWithChildren<{ style: StyleProp<ViewStyle> }>) => {
   const loop = useLoopAnimated(1000);
   const rotate = loop.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
   return <Animated.View style={[style, { transform: [{ rotate }] }]}>{children}</Animated.View>;