@sendbird/uikit-react-native 1.0.0-rc.1

package/src/domain/groupChannelSettings/component/GroupChannelSettingsMenu.tsx

@@ -0,0 +1,77 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import { Icon, MenuBar, Switch, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import { GroupChannelSettingsContexts } from '../module/moduleContext';
+import type { GroupChannelSettingsProps } from '../types';
+
+const GroupChannelSettingsMenu: React.FC<GroupChannelSettingsProps['Menu']> = ({
+  onPressMenuMembers,
+  onPressMenuLeaveChannel,
+  menuItemsCreator = (menu) => menu,
+}) => {
+  const { sdk } = useSendbirdChat();
+  const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const toggleNotification = async () => {
+    if (channel.myPushTriggerOption === 'off') {
+      await channel.setMyPushTriggerOption('default');
+    } else {
+      await channel.setMyPushTriggerOption('off');
+    }
+  };
+
+  const menuItems: MenuBarProps[] = menuItemsCreator([
+    {
+      icon: 'notifications',
+      name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION,
+      onPress: toggleNotification,
+      actionItem: <Switch value={channel.myPushTriggerOption !== 'off'} onChangeValue={toggleNotification} />,
+    },
+    {
+      icon: 'members',
+      name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_MEMBERS,
+      onPress: () => onPressMenuMembers(),
+      actionLabel: String(channel.memberCount),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'leave',
+      iconColor: colors.error,
+      name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_LEAVE_CHANNEL,
+      onPress: () => {
+        channel.leave().then(() => {
+          onPressMenuLeaveChannel();
+          sdk.clearCachedMessages([channel.url]).catch();
+        });
+      },
+    },
+  ]);
+
+  return (
+    <View>
+      {menuItems.map((menu) => {
+        return (
+          <MenuBar
+            key={menu.name}
+            onPress={menu.onPress}
+            name={menu.name}
+            disabled={menu.disabled}
+            icon={menu.icon}
+            iconColor={menu.iconColor}
+            iconBackgroundColor={menu.iconBackgroundColor}
+            actionLabel={menu.actionLabel}
+            actionItem={menu.actionItem}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default GroupChannelSettingsMenu;

package/src/domain/groupChannelSettings/index.ts

@@ -0,0 +1,5 @@
+export { default as GroupChannelSettingsHeader } from './component/GroupChannelSettingsHeader';
+export { default as GroupChannelSettingsInfo } from './component/GroupChannelSettingsInfo';
+export { default as GroupChannelSettingsMenu } from './component/GroupChannelSettingsMenu';
+export { default as createGroupChannelSettingsModule } from './module/createGroupChannelSettingsModule';
+export { GroupChannelSettingsContextsProvider, GroupChannelSettingsContexts } from './module/moduleContext';

package/src/domain/groupChannelSettings/module/createGroupChannelSettingsModule.tsx

@@ -0,0 +1,17 @@
+import GroupChannelSettingsHeader from '../component/GroupChannelSettingsHeader';
+import GroupChannelSettingsInfo from '../component/GroupChannelSettingsInfo';
+import GroupChannelSettingsMenu from '../component/GroupChannelSettingsMenu';
+import type { GroupChannelSettingsModule } from '../types';
+import { GroupChannelSettingsContextsProvider } from './moduleContext';
+
+const createGroupChannelSettingsModule = ({
+  Header = GroupChannelSettingsHeader,
+  Info = GroupChannelSettingsInfo,
+  Menu = GroupChannelSettingsMenu,
+  Provider = GroupChannelSettingsContextsProvider,
+  ...module
+}: Partial<GroupChannelSettingsModule> = {}): GroupChannelSettingsModule => {
+  return { Header, Info, Menu, Provider, ...module };
+};
+
+export default createGroupChannelSettingsModule;

package/src/domain/groupChannelSettings/module/moduleContext.tsx

@@ -0,0 +1,146 @@
+import React, { createContext, useCallback } from 'react';
+
+import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
+import {
+  NOOP,
+  SendbirdGroupChannel,
+  SendbirdGroupChannelParams,
+  SendbirdOpenChannel,
+  isDifferentChannel,
+  useForceUpdate,
+  useUniqId,
+} from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import type { GroupChannelSettingsContextsType, GroupChannelSettingsProps } from '../types';
+
+export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
+  Fragment: createContext({
+    channel: {} as SendbirdGroupChannel,
+    headerTitle: '',
+    headerRight: '',
+    onPressHeaderRight: NOOP,
+  }),
+};
+
+const HOOK_NAME = 'GroupChannelSettingsContextsProvider';
+export const GroupChannelSettingsContextsProvider: React.FC<GroupChannelSettingsProps['Provider']> = ({
+  children,
+  channel,
+}) => {
+  const uniqId = useUniqId(HOOK_NAME);
+  const forceUpdate = useForceUpdate();
+  const { STRINGS } = useLocalization();
+  const { sdk } = useSendbirdChat();
+  const { fileService } = usePlatformService();
+
+  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
+
+  const onChannelChanged = (channel: SendbirdGroupChannel | SendbirdOpenChannel) => {
+    if (isDifferentChannel(channel, activeChannel) || !channel.isGroupChannel()) return;
+    setActiveChannel(channel);
+    forceUpdate();
+  };
+
+  useChannelHandler(
+    sdk,
+    `${HOOK_NAME}_${uniqId}`,
+    {
+      onChannelChanged: onChannelChanged,
+      onChannelFrozen: onChannelChanged,
+      onChannelUnfrozen: onChannelChanged,
+    },
+    [activeChannel],
+  );
+
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { openPrompt } = usePrompt();
+  const { openMenu } = useActionMenu();
+
+  const updateChannel = useCallback(
+    async (params: SendbirdGroupChannelParams) => {
+      const updatedChannel = await activeChannel.updateChannel(params);
+      setActiveChannel(updatedChannel);
+      forceUpdate();
+    },
+    [activeChannel],
+  );
+
+  const changeChannelName = useCallback(() => {
+    openPrompt({
+      title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_TITLE,
+      submitLabel: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_OK,
+      placeholder: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER,
+      defaultValue: activeChannel.name,
+      onSubmit: async (channelName) => {
+        const params = new sdk.GroupChannelParams();
+        params.name = channelName;
+        await updateChannel(params);
+      },
+    });
+  }, [STRINGS, updateChannel, activeChannel.name]);
+
+  const changeChannelImage = useCallback(() => {
+    openMenu({
+      title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE_MENU_TITLE,
+      menuItems: [
+        {
+          title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE_MENU_CAMERA,
+          onPress: async () => {
+            const file = await fileService.openCamera({
+              mediaType: 'photo',
+              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+            });
+            if (!file) return;
+
+            const params = new sdk.GroupChannelParams();
+            params.coverImage = file;
+            await updateChannel(params);
+          },
+        },
+        {
+          title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY,
+          onPress: async () => {
+            const files = await fileService.openMediaLibrary({
+              selectionLimit: 1,
+              mediaType: 'photo',
+              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+            });
+            if (!files || !files[0]) return;
+
+            const params = new sdk.GroupChannelParams();
+            params.coverImage = files[0];
+            await updateChannel(params);
+          },
+        },
+      ],
+    });
+  }, [STRINGS, updateChannel]);
+
+  const onPressHeaderRight = useCallback(() => {
+    openSheet({
+      sheetItems: [
+        { title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME, onPress: changeChannelName },
+        { title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_IMAGE, onPress: changeChannelImage },
+      ],
+    });
+  }, [STRINGS, changeChannelImage, changeChannelName]);
+
+  return (
+    <ProviderLayout>
+      <GroupChannelSettingsContexts.Fragment.Provider
+        value={{
+          channel: activeChannel,
+          headerTitle: STRINGS.GROUP_CHANNEL_SETTINGS.HEADER_TITLE,
+          headerRight: STRINGS.GROUP_CHANNEL_SETTINGS.HEADER_RIGHT,
+          onPressHeaderRight,
+        }}
+      >
+        {children}
+      </GroupChannelSettingsContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelSettings/types.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export interface GroupChannelSettingsProps {
+  Fragment: {
+    channel: GroupChannelSettingsProps['Provider']['channel'];
+    onPressHeaderLeft: GroupChannelSettingsProps['Header']['onPressHeaderLeft'];
+    onPressMenuMembers: GroupChannelSettingsProps['Menu']['onPressMenuMembers'];
+    onPressMenuLeaveChannel: GroupChannelSettingsProps['Menu']['onPressMenuLeaveChannel'];
+    menuItemsCreator?: GroupChannelSettingsProps['Menu']['menuItemsCreator'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  Info: {};
+  Menu: {
+    onPressMenuMembers: () => void;
+    onPressMenuLeaveChannel: () => void;
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+}
+
+/**
+ * Internal context for GroupChannelSettings
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export interface GroupChannelSettingsContextsType {
+  Fragment: React.Context<{
+    channel: SendbirdGroupChannel;
+    headerTitle: string;
+    headerRight: string;
+    onPressHeaderRight: () => void;
+  }>;
+}
+export interface GroupChannelSettingsModule {
+  Provider: React.FC<GroupChannelSettingsProps['Provider']>;
+  Header: CommonComponent<GroupChannelSettingsProps['Header']>;
+  Info: CommonComponent<GroupChannelSettingsProps['Info']>;
+  Menu: CommonComponent<GroupChannelSettingsProps['Menu']>;
+}
+
+export type GroupChannelSettingsFragment = React.FC<GroupChannelSettingsProps['Fragment']>;

package/src/domain/groupChannelUserList/types.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdGroupChannel, SendbirdGroupChannelParams } from '@sendbird/uikit-utils';
+
+import type { GroupChannelType } from '../groupChannelList/types';
+import type { UserListProps } from '../userList/types';
+
+type UserIds = string[];
+
+export interface GroupChannelCreateProps<User> {
+  Fragment: {
+    onPressHeaderLeft: () => void;
+    onCreateChannel: (channel: SendbirdGroupChannel) => void;
+    channelType?: GroupChannelType;
+    userIdsGenerator?: (users: User[]) => UserIds;
+    onBeforeCreateChannel?: (
+      params: SendbirdGroupChannelParams,
+      users: User[],
+    ) => SendbirdGroupChannelParams | Promise<SendbirdGroupChannelParams>;
+    sortComparator?: UseUserListOptions<User>['sortComparator'];
+    queryCreator?: UseUserListOptions<User>['queryCreator'];
+    renderUser?: UserListProps<User>['List']['renderUser'];
+  };
+}
+export type GroupChannelCreateFragment<User> = React.FC<GroupChannelCreateProps<User>['Fragment']>;
+
+export interface GroupChannelInviteProps<User> {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: () => void;
+    onInviteMembers: (channel: SendbirdGroupChannel) => void;
+    userIdsGenerator?: (users: User[]) => UserIds;
+    queryCreator?: UseUserListOptions<User>['queryCreator'];
+    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<User>['sortComparator'];
+  };
+}
+export type GroupChannelInviteFragment<User> = React.FC<GroupChannelInviteProps<User>['Fragment']>;
+
+export interface GroupChannelMembersProps<User> {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: () => void;
+    sortComparator?: UseUserListOptions<User>['sortComparator'];
+    renderUser?: UserListProps<User>['List']['renderUser'];
+  };
+}
+export type GroupChannelMembersFragment<User> = React.FC<GroupChannelMembersProps<User>['Fragment']>;

package/src/domain/userList/component/UserListHeader.tsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+
+import { Icon, Text, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { UserListContexts } from '../module/moduleContext';
+import type { UserListContextsType, UserListProps } from '../types';
+
+const UserListHeader = <T,>({
+  onPressHeaderLeft,
+  onPressHeaderRight,
+  right,
+  left,
+  shouldActivateHeaderRight = (selectedUsers) => selectedUsers.length > 0,
+}: UserListProps<T>['Header']) => {
+  const { headerTitle, headerRight } = useContext(UserListContexts.Fragment);
+  const { selectedUsers } = useContext(UserListContexts.List as UserListContextsType<T>['List']);
+  const { HeaderComponent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+
+  const isActive = shouldActivateHeaderRight(selectedUsers);
+
+  return (
+    <HeaderComponent
+      title={headerTitle}
+      right={
+        right ?? (
+          <Text button color={isActive ? colors.primary : colors.onBackground04}>
+            {headerRight}
+          </Text>
+        )
+      }
+      onPressRight={isActive ? () => onPressHeaderRight(selectedUsers) : undefined}
+      left={left ?? <Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+    />
+  );
+};
+
+export default UserListHeader;

package/src/domain/userList/component/UserListList.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback, useContext } from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { UserListContexts } from '../module/moduleContext';
+import type { UserListContextsType, UserListProps } from '../types';
+
+const UserListList = <T,>({
+  users,
+  onRefresh,
+  refreshing,
+  renderUser,
+  onLoadNext,
+  ListEmptyComponent,
+}: UserListProps<T>['List']) => {
+  const context = useContext(UserListContexts.List as UserListContextsType<T>['List']);
+  const renderItem: ListRenderItem<T> = useCallback(
+    ({ item }) => renderUser?.(item, context.selectedUsers, context.setSelectedUsers),
+    [renderUser, context.selectedUsers, context.setSelectedUsers],
+  );
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={users}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+      renderItem={renderItem}
+      onEndReached={onLoadNext}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+    />
+  );
+};
+
+export default UserListList;

package/src/domain/userList/component/UserListStatusEmpty.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const UserListStatusEmpty = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'no-users'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default UserListStatusEmpty;

package/src/domain/userList/component/UserListStatusError.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { UserListModule } from '../types';
+
+const UserListStatusLoading: UserListModule<unknown>['StatusError'] = ({ onPressRetry }) => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default UserListStatusLoading;

package/src/domain/userList/component/UserListStatusLoading.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const UserListStatusLoading = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'loading'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default UserListStatusLoading;

package/src/domain/userList/index.ts

@@ -0,0 +1,7 @@
+export { default as UserListList } from './component/UserListList';
+export { default as UserListHeader } from './component/UserListHeader';
+export { default as UserListStatusEmpty } from './component/UserListStatusEmpty';
+export { default as UserListStatusError } from './component/UserListStatusError';
+export { default as UserListStatusLoading } from './component/UserListStatusLoading';
+export { default as createUserListModule } from './module/createUserListModule';
+export { UserListContextsProvider, UserListContexts } from './module/moduleContext';

package/src/domain/userList/module/createUserListModule.tsx

@@ -0,0 +1,21 @@
+import UserListHeader from '../component/UserListHeader';
+import UserListList from '../component/UserListList';
+import UserListStatusEmpty from '../component/UserListStatusEmpty';
+import UserListStatusError from '../component/UserListStatusError';
+import UserListStatusLoading from '../component/UserListStatusLoading';
+import type { UserListModule } from '../types';
+import { UserListContextsProvider } from './moduleContext';
+
+const createUserListModule = <T,>({
+  Header = UserListHeader,
+  List = UserListList,
+  StatusLoading = UserListStatusLoading,
+  StatusEmpty = UserListStatusEmpty,
+  StatusError = UserListStatusError,
+  Provider = UserListContextsProvider,
+  ...module
+}: Partial<UserListModule<T>> = {}): UserListModule<T> => {
+  return { Header, List, StatusLoading, StatusEmpty, StatusError, Provider, ...module };
+};
+
+export default createUserListModule;

package/src/domain/userList/module/moduleContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useState } from 'react';
+
+import type { ContextValue } from '@sendbird/uikit-utils';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import type { UserListContextsType, UserListProps } from '../types';
+
+export const UserListContexts: UserListContextsType<unknown> = {
+  Fragment: createContext({
+    headerTitle: '',
+    headerRight: '',
+  }),
+  List: createContext<ContextValue<UserListContextsType<unknown>['List']>>({
+    selectedUsers: [],
+    setSelectedUsers: NOOP,
+  }),
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const UserListContextsProvider: React.FC<UserListProps<any>['Provider']> = ({
+  children,
+  headerTitle,
+  headerRight,
+}) => {
+  const [selectedUsers, setSelectedUsers] = useState<unknown[]>([]);
+
+  return (
+    <ProviderLayout>
+      <UserListContexts.Fragment.Provider value={{ headerTitle, headerRight: headerRight(selectedUsers) }}>
+        <UserListContexts.List.Provider value={{ selectedUsers, setSelectedUsers }}>
+          {children}
+        </UserListContexts.List.Provider>
+      </UserListContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/userList/types.ts

@@ -0,0 +1,65 @@
+import type React from 'react';
+
+import type { ContextValue } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export interface UserListProps<User> {
+  /** Props for `UserListModule.Header` **/
+  Header: {
+    right?: React.ReactElement;
+    left?: React.ReactElement;
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: (selectedUsers: User[]) => Promise<void>;
+    shouldActivateHeaderRight?: (selectedUsers: User[]) => boolean;
+  };
+  /** Props for `UserListModule.List` **/
+  List: {
+    /** User list from SendbirdChat SDK or Custom query {@link Fragment.queryCreator} **/
+    users: User[];
+    /** Render user component **/
+    renderUser: (
+      user: User,
+      selectedUsers: ContextValue<UserListContextsType<User>['List']>['selectedUsers'],
+      setSelectedUsers: ContextValue<UserListContextsType<User>['List']>['setSelectedUsers'],
+    ) => React.ReactElement | null;
+    /** Load next user list **/
+    onLoadNext: () => Promise<void>;
+    /** Refresh user list **/
+    onRefresh?: () => Promise<void>;
+    /** Refreshing state **/
+    refreshing?: boolean;
+    /** List empty component **/
+    ListEmptyComponent?: React.ReactElement;
+  };
+  /** Props for `UserListModule.Provider` **/
+  Provider: {
+    headerTitle: string;
+    headerRight: (selectedUsers: Array<User>) => string;
+  };
+}
+
+/**
+ * Internal context for UserList
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export interface UserListContextsType<User> {
+  Fragment: React.Context<{
+    headerTitle: string;
+    headerRight: string;
+  }>;
+  List: React.Context<{
+    selectedUsers: User[];
+    setSelectedUsers: React.Dispatch<React.SetStateAction<User[]>>;
+  }>;
+}
+
+export interface UserListModule<User> {
+  Provider: React.FC<UserListProps<User>['Provider']>;
+  Header: CommonComponent<UserListProps<User>['Header']>;
+  List: CommonComponent<UserListProps<User>['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<{ onPressRetry: () => void }>;
+}