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

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

@@ -27,7 +27,7 @@ type Props = {
   notificationOff?: boolean;
 };
 
-const GroupChannelPreview: React.FC<Props> = ({
+const GroupChannelPreview = ({
   customCover,
   coverUrl,
   memberCount,
@@ -39,7 +39,7 @@ const GroupChannelPreview: React.FC<Props> = ({
   titleCaption,
   frozen,
   notificationOff,
-}) => {
+}: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
 

package/src/ui/Header/index.tsx

@@ -24,7 +24,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;
@@ -82,7 +82,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 +94,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 +106,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 +121,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>;

package/src/ui/MenuBar/index.tsx

@@ -23,7 +23,7 @@ export type MenuBarProps = {
   actionLabel?: string;
   actionItem?: React.ReactNode;
 };
-const MenuBar: React.FC<MenuBarProps> = ({
+const MenuBar = ({
   variant = 'default',
   disabled,
   onPress,
@@ -33,7 +33,7 @@ const MenuBar: React.FC<MenuBarProps> = ({
   iconBackgroundColor,
   actionLabel,
   actionItem = null,
-}) => {
+}: MenuBarProps) => {
   const { palette, colors } = useUIKitTheme();
 
   return (

package/src/ui/Modal/index.tsx

@@ -34,7 +34,7 @@ type Props = {
  * Modal Close: Triggered by Modal.props.onClose() call
  * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false
  * */
-const Modal: React.FC<Props> = ({
+const Modal = ({
   children,
   onClose,
   backgroundStyle,
@@ -45,7 +45,7 @@ const Modal: React.FC<Props> = ({
   enableKeyboardAvoid = false,
   statusBarTranslucent,
   ...props
-}) => {
+}: Props) => {
   const { palette } = useUIKitTheme();
   const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);
   const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);

package/src/ui/Placeholder/index.tsx

@@ -19,7 +19,7 @@ type Props = {
   onPressRetry?: () => void;
 };
 
-const Placeholder: React.FC<Props> = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }) => {
+const Placeholder = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }: Props) => {
   const { colors } = useUIKitTheme();
 
   // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container

package/src/ui/Prompt/index.tsx

@@ -28,7 +28,7 @@ type Props = {
   onDismiss?: () => void;
   autoFocus?: boolean;
 } & PromptItem;
-const Prompt: React.FC<Props> = ({
+const Prompt = ({
   onDismiss,
   visible,
   onHide,
@@ -40,7 +40,7 @@ const Prompt: React.FC<Props> = ({
   onCancel = NOOP,
   submitLabel = 'Submit',
   cancelLabel = 'Cancel',
-}) => {
+}: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const inputRef = useRef<RNTextInput>(null);

package/src/ui/Switch/index.tsx

@@ -4,7 +4,7 @@ import { Animated, Platform, Pressable } from 'react-native';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
-interface SwitchProps {
+type SwitchProps = React.PropsWithChildren<{
   trackColor?: string;
   thumbColor?: string;
   inactiveThumbColor?: string;
@@ -12,15 +12,15 @@ interface SwitchProps {
 
   value: boolean;
   onChangeValue: (val: boolean) => void;
-}
-const Switch: React.FC<SwitchProps> = ({
+}>;
+const Switch = ({
   value,
   onChangeValue,
   inactiveThumbColor,
   inactiveTrackColor,
   trackColor,
   thumbColor,
-}) => {
+}: SwitchProps) => {
   const { select, palette, colors } = useUIKitTheme();
   const position = useRef(new Animated.Value(0)).current;
 

package/src/ui/Text/index.tsx

@@ -6,7 +6,7 @@ import type { TypoName, UIKitTheme } from '../../types';
 
 type TypographyProps = Partial<Record<TypoName, boolean>>;
 export type TextProps = RNTextProps & TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string };
-const Text: React.FC<TextProps> = ({ children, color, style, ...props }) => {
+const Text = ({ children, color, style, ...props }: TextProps) => {
   const { colors } = useUIKitTheme();
   const typoStyle = useTypographyFilter(props);
   return (

package/src/ui/Toast/index.tsx

@@ -12,13 +12,13 @@ type Context = { show(text: string, type?: ToastType): void };
 
 const ToastContext = createContext<Context | null>(null);
 
-type Props = {
+type Props = React.PropsWithChildren<{
   top?: number;
   bottom?: number;
   visible: boolean;
   type: ToastType;
   children: string;
-};
+}>;
 
 const useOpacity = () => {
   const opacity = useRef(new Animated.Value(0)).current;
@@ -32,7 +32,8 @@ const useOpacity = () => {
     hide: () => transition(0),
   };
 };
-const Toast: React.FC<Props> = ({ visible, type, children, top, bottom }) => {
+
+const Toast = ({ visible, type, children, top, bottom }: Props) => {
   const { colors, select, palette } = useUIKitTheme();
   const { opacity, show, hide } = useOpacity();
 
@@ -67,7 +68,10 @@ const Toast: React.FC<Props> = ({ visible, type, children, top, bottom }) => {
 };
 
 const VISIBLE_MS = 3000;
-export const ToastProvider: React.FC<{ dismissTimeout?: number }> = ({ children, dismissTimeout = VISIBLE_MS }) => {
+export const ToastProvider = ({
+  children,
+  dismissTimeout = VISIBLE_MS,
+}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {
   const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });
   const { bottom } = useSafeAreaInsets();
 

package/src/ui/URLParsedText/index.tsx

@@ -18,7 +18,7 @@ type Props = TextProps & {
   onPressUrl?: OnPressUrl;
   strict?: boolean;
 };
-const URLParsedText: React.FC<Props> = ({ children, onPressUrl = openUrl, strict, ...props }) => {
+const URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {
   const parsedChildren = useMemo((): React.ReactNode => {
     return React.Children.map(React.Children.toArray(children), (child) => {
       if (typeof child === 'string') {