chat 1.0.6 → 3.0.0

package/src/components/Inbox/types.ts

@@ -1,371 +0,0 @@
-import {
-	FlatListProps,
-	ViewStyle,
-	Animated,
-	TextStyle,
-	ImageProps,
-	ListRenderItemInfo
-} from 'react-native'
-import { ReactNode, ComponentType } from 'react'
-import { SwipeableProperties } from 'react-native-gesture-handler/Swipeable'
-import { LinearGradient } from 'expo-linear-gradient'
-import {
-	ExistingRoomModel,
-	RoomMembers,
-	LastMessage
-} from '../../classes/Room/types'
-
-export default interface InboxProps<
-	InboxItem extends ExistingRoomModel = ExistingRoomModel
-> {
-	flatListProps?: Omit<Omit<FlatListProps<InboxItem>, 'renderItem'>, 'data'>
-	keyExtractor?: FlatListProps<InboxItem>['keyExtractor']
-	renderItem?: FlatListProps<InboxItem>['renderItem']
-	// TODO change to renderRoomItem
-	/**
-	 * if you want to use your own renderItem function, but include the props we made
-	 * the alternative is a normal props.renderItem() which gets the raw flatlist data
-	 */
-	renderItemWithProps?: (props: InboxItemProps<InboxItem>) => ReactNode
-	rooms: Array<InboxItem>
-	renderHeader?:
-		| null
-		| ((headerProps: InboxMethodProps<InboxItem>['renderHeader']) => ReactNode)
-	renderFooter?:
-		| null
-		| ((footerProps: InboxMethodProps<InboxItem>['renderFooter']) => ReactNode)
-	ContainerComponent?: ComponentType
-	HeaderComponent?: ComponentType<InboxMethodProps<InboxItem>['renderHeader']>
-	FooterComponent?: ComponentType<InboxMethodProps<InboxItem>['renderFooter']>
-	InboxItemComponent?: ComponentType<InboxItemProps<InboxItem>>
-	containerStyle?: ViewStyle
-	roomNameFunc?: (arg: InboxMethodProps<InboxItem>['roomNameFunc']) => string
-	onPressItem: (id: string, pointerInside?: boolean) => void
-	animatedScrollNode?: Animated.Value
-	extraData?: FlatListProps<InboxItem>['extraData']
-	bigHeader?: boolean
-	headerTitle?: string
-	renderItemTitle?: ((title: string) => ReactNode) | null
-	renderItemDate?: ((date: Date) => ReactNode) | null
-	ItemTitleComponent?: ComponentType<InboxItemTitleProps>
-	titleStyle?: TextStyle
-	titleContainerStyle?: ViewStyle
-	ItemDateComponent?: ComponentType<DateProps>
-	dateToStringFunc?: DateProps['dateToStringFunc']
-	dateStyle?: TextStyle
-	unreadIndicatorColor?: UnreadIndicatorProps['backgroundColor']
-	unreadTextColor?: UnreadIndicatorProps['textColor']
-	showUnreadIndicatorCount?: UnreadIndicatorProps['showCount']
-	showUnreadIndicator?: UnreadIndicatorProps['show']
-	UnreadIndicatorComponent?: ComponentType<UnreadIndicatorProps>
-	renderUnreadIndicator?: ((props: UnreadIndicatorProps) => ReactNode) | null
-	unreadIndicatorStyle?: UnreadIndicatorProps['backgroundStyle']
-	unreadIndicatorTextStyle?: UnreadIndicatorProps['textStyle']
-	unreadIndicatorPostion?:
-		| 'left'
-		| 'right'
-		| 'bottom-left'
-		| 'bottom-right'
-		| 'top-right'
-		| 'top-left'
-		| 'center-left'
-		| 'center-right'
-	onPressNewRoom?: () => void
-	renderItemSubtitle?: (lastMessageText: string) => ReactNode
-	ItemSubtitleComponent?: ComponentType<InboxItemSubtitleProps>
-	itemSubtitleTextStyle?: InboxItemSubtitleProps['textStyle']
-	renderAvatar?: null | ((props: AvatarProps) => ReactNode)
-	renderInitials?: null | ((props: InitialsProps) => ReactNode)
-	ItemAvatarComponent?: ComponentType<AvatarProps>
-	ItemInitialsComponent?: ComponentType<InitialsProps>
-	prioritizeAvatarOverInitials?: boolean
-	roomInitialsFunc?: (
-		arg: InboxMethodProps<InboxItem>['roomInitialsFunc']
-	) => string
-	avatarSize?: AvatarProps['size']
-	avatarImageProps?: AvatarProps['imageProps']
-	initialsTextStyle?: InitialsProps['textStyle']
-	initialsContainerStyle?: InitialsProps['containerStyle']
-	fallbackToMultipleAvatarsIfNoGroupAvatar?: boolean
-	fallbackToMultipleAvatarsIfNoGroupName?: boolean
-	disableAvatar?: boolean
-	initialsBackgroundColor?: InitialsProps['backgroundColor']
-	initialsTextColor?: InitialsProps['textColor']
-	onLongPressItem?: (id: string, pointerInside?: boolean) => void
-	swipeableRow?: boolean
-	safeArea?: boolean
-
-	/**
-	 * An array of items that will show on the right when the user swipes.
-	 *
-	 * @example
-	 * ```javascript
-	 * import { Inbox, Room } from 'usechat'
-	 * import { Animated } from 'react-native'
-	 * import { Ionicons } from '@expo/vector-icons'
-	 *
-	 * return (
-	 * 	<Inbox
-	 *   swipeActionWidth={80}
-	 *   swipeRightActions={[
-	 *  	 {
-	 *  		 text: 'Delete',
-	 *  		 backgroundColor: 'red',
-	 *  		 color: 'white',
-	 *  		 renderIcon: progress => (
-	 *  			 <Animated.View
-	 *  				 style={{
-	 *  					 transform: [
-	 *  						 { scale: progress.interpolate({ inputRange: [0, 1.2], outputRange: [0.5, 1.2], extrapolate: 'clamp' }) },
-	 *  					 ],
-	 *  					 opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),
-	 *  				 }}
-	 *  			 >
-	 *  				 <Ionicons style={{ marginTop: 10 }} name="ios-trash" size={30} color="white" />
-	 *  			 </Animated.View>
-	 *  		 ),
-	 *  		 onPress: id => new Room({ id }).leave(),
-	 *  	 },
-	 *   ]}
-	 * 	/>
-	 * )
-	 * ```
-	 */
-	swipeRightActions?: SwipeableProps['leftActions']
-
-	/**
-	 * An array of items that will show on the left when the user swipes.
-	 *
-	 * @example
-	 * ```javascript
-	 * import { Inbox, Room } from 'usechat'
-	 * import { Animated } from 'react-native'
-	 * import { Ionicons } from '@expo/vector-icons'
-	 *
-	 * return (
-	 * 	<Inbox
-	 *   swipeActionWidth={80}
-	 *   swipeLeftActions={[
-	 *  	 {
-	 *  		 text: 'Delete',
-	 *  		 backgroundColor: 'red',
-	 *  		 color: 'white',
-	 *  		 renderIcon: progress => (
-	 *  			 <Animated.View
-	 *  				 style={{
-	 *  					 transform: [
-	 *  						 { scale: progress.interpolate({ inputRange: [0, 1.2], outputRange: [0.5, 1.2], extrapolate: 'clamp' }) },
-	 *  					 ],
-	 *  					 opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),
-	 *  				 }}
-	 *  			 >
-	 *  				 <Ionicons style={{ marginTop: 10 }} name="ios-trash" size={30} color="white" />
-	 *  			 </Animated.View>
-	 *  		 ),
-	 *  		 onPress: id => new Room({ id }).leave(),
-	 *  	 },
-	 *   ]}
-	 * 	/>
-	 * )
-	 * ```
-	 */
-	swipeLeftActions?: SwipeableProps['rightActions']
-	renderSwipeAction?: SwipeableProps['renderAction']
-	swipeActionWidth?: SwipeableProps['actionWidth']
-	itemBackgroundColor?: string
-	swipeableRowProps?: SwipeableProps['gestureHandlerProps']
-	enableRoomTransitions?: boolean
-	roomTransitionConfig?: ReactNode
-	// TODO
-	showTypingIndicator?: boolean
-	renderTypingIndicator?: () => ReactNode | null
-	membersToTypingStringFunc?: (members: RoomMembers) => string
-	maxNumberOfInitials?: number
-	unreadIndicatorType?: UnreadIndicatorProps['type']
-	unreadIndicatorGradientProps?: UnreadIndicatorProps['gradientProps']
-	unreadIndicatorSize?: UnreadIndicatorProps['size']
-	itemContainerStyle?: ViewStyle
-	renderRightActions?: SwipeableProps['renderRightActions']
-	renderLeftActions?: SwipeableProps['renderLeftActions']
-	actionTextStyle?: SwipeableProps['textStyle']
-	separatorColor?: string
-	separatorSize?: number
-}
-
-export interface InboxMethodProps<
-	InboxItem extends ExistingRoomModel = ExistingRoomModel
-> {
-	renderItem: ListRenderItemInfo<InboxItem>
-	renderHeader: {
-		scrollY: Animated.Value
-		big?: boolean
-		onPressNewRoom?: InboxProps<InboxItem>['onPressNewRoom']
-	}
-	renderFooter: {
-		scrollY: Animated.Value
-	}
-	roomInitialsFunc: {
-		members: RoomMembers
-		name: string
-		maxNumberOfInitials: InboxProps<InboxItem>['maxNumberOfInitials']
-	}
-	roomNameFunc: { members: RoomMembers; name: string }
-}
-
-export interface InboxItemProps<
-	InboxItem extends ExistingRoomModel = ExistingRoomModel
-> {
-	onPress?: (
-		pointerInside?: boolean
-	) => ReturnType<InboxProps<InboxItem>['onPressItem']>
-	onLongPress?: (pointerInside?: boolean) => void
-	lastMessageCreatedAt: LastMessage['createdAt']
-	lastMessageText: LastMessage['text']
-	name: string
-	unreadCount: ExistingRoomModel['unreadCount']
-	renderTitle?: InboxProps<InboxItem>['renderItemTitle']
-	TitleComponent?: InboxProps<InboxItem>['ItemTitleComponent']
-	renderDate?: InboxProps<InboxItem>['renderItemDate']
-	titleContainerStyle?: InboxProps<InboxItem>['titleContainerStyle']
-	titleStyle?: InboxProps<InboxItem>['titleStyle']
-	DateComponent?: InboxProps<InboxItem>['ItemDateComponent']
-	unreadTextColor?: InboxProps<InboxItem>['unreadTextColor']
-	unreadIndicatorColor?: InboxProps<InboxItem>['unreadIndicatorColor']
-	showUnreadIndicatorCount?: InboxProps<InboxItem>['showUnreadIndicatorCount']
-	showUnreadIndicator: InboxProps<InboxItem>['showUnreadIndicator']
-	UnreadIndicatorComponent?: InboxProps<InboxItem>['UnreadIndicatorComponent']
-	renderUnreadIndicator?: InboxProps<InboxItem>['renderUnreadIndicator']
-	unreadIndicatorStyle?: InboxProps<InboxItem>['unreadIndicatorStyle']
-	unreadIndicatorTextStyle?: InboxProps<InboxItem>['unreadIndicatorTextStyle']
-	unreadIndicatorPosition?: InboxProps<InboxItem>['unreadIndicatorPostion']
-	dateToStringFunc?: InboxProps<InboxItem>['dateToStringFunc']
-	renderSubtitle?: InboxProps<InboxItem>['renderItemSubtitle']
-	SubtitleComponent?: InboxProps<InboxItem>['ItemSubtitleComponent']
-	subtitleTextStyle?: InboxProps<InboxItem>['itemSubtitleTextStyle']
-	roomInitialsFunc?: InboxProps<InboxItem>['roomInitialsFunc']
-	renderAvatar?: InboxProps<InboxItem>['renderAvatar']
-	renderInitials?: InboxProps<InboxItem>['renderInitials']
-	AvatarComponent?: InboxProps<InboxItem>['ItemAvatarComponent']
-	InitialsComponent?: InboxProps<InboxItem>['ItemInitialsComponent']
-	prioritizeAvatarOverInitials?: InboxProps<
-		InboxItem
-	>['prioritizeAvatarOverInitials']
-	avatar?: string | { initials: string; avatar: string }[]
-	avatarSize?: AvatarProps['size']
-	avatarImageProps?: AvatarProps['imageProps']
-	initials: string
-	initialsTextStyle?: InitialsProps['textStyle']
-	initialsContainerStyle?: InitialsProps['containerStyle']
-	disableAvatar?: InboxProps<InboxItem>['disableAvatar']
-	initialsBackgroundColor?: InitialsProps['backgroundColor']
-	initialsTextColor?: InitialsProps['textColor']
-	swipeRightActions?: SwipeableProps['leftActions']
-	swipeLeftActions?: SwipeableProps['rightActions']
-	renderSwipeAction?: SwipeableProps['renderAction']
-	swipeActionWidth?: SwipeableProps['actionWidth']
-	swipeable?: boolean
-	id: string
-	backgroundColor: InboxProps<InboxItem>['itemBackgroundColor']
-	swipeableRowProps?: SwipeableProps['gestureHandlerProps']
-	unreadIndicatorType?: UnreadIndicatorProps['type']
-	unreadIndicatorGradientProps?: UnreadIndicatorProps['gradientProps']
-	unreadIndicatorSize?: UnreadIndicatorProps['size']
-	containerStyle?: InboxProps<InboxItem>['itemContainerStyle']
-	dateStyle?: InboxProps<InboxItem>['dateStyle']
-	renderRightActions?: SwipeableProps['renderRightActions']
-	renderLeftActions?: SwipeableProps['renderLeftActions']
-	actionTextStyle?: SwipeableProps['textStyle']
-	renderTypingIndicator?: InboxProps<InboxItem>['renderTypingIndicator']
-	showTypingIndicator?: InboxProps<InboxItem>['showTypingIndicator']
-	numberOfPeopleTyping?: number
-}
-
-export interface DateProps {
-	date: Date
-	dateToStringFunc?: (date: Date) => string
-	style?: TextStyle
-}
-
-export interface InboxItemTitleProps {
-	title: string
-	style?: TextStyle
-	containerStyle?: ViewStyle
-}
-
-export interface InboxItemSubtitleProps {
-	lastMessageText: string
-	textStyle?: TextStyle
-}
-
-export interface UnreadIndicatorProps {
-	backgroundColor?: string
-	textColor?: string
-	showCount?: boolean
-	show?: boolean
-	unreadCount?: number
-	backgroundStyle?: ViewStyle
-	textStyle?: TextStyle
-	position: 'bottom' | 'top' | 'center'
-	type: 'gradient' | 'solid'
-	gradientProps?: LinearGradient['props']
-	size?: number
-}
-
-export interface AvatarProps {
-	avatar: ExistingRoomModel['avatar']
-	size: number
-	imageProps?: ImageProps
-	ImageComponent?: ComponentType
-}
-
-export interface InitialsProps {
-	size: number
-	initials: string
-	textStyle?: TextStyle
-	containerStyle?: ViewStyle
-	textColor?: string
-	backgroundColor?: string
-}
-
-export interface SwipeableProps {
-	rightActions?: null | SwipeableAction[]
-	leftActions?: null | SwipeableAction[]
-	id: string
-	actionWidth?: number
-	gestureHandlerProps?: SwipeableProperties
-	textStyle?: TextStyle
-	renderLeftActions?:
-		| null
-		| ((
-				actions: SwipeableAction[],
-				progress: Animated.Value | Animated.AnimatedInterpolation,
-				drag: Animated.AnimatedInterpolation
-		  ) => ReactNode)
-	renderRightActions?:
-		| null
-		| ((
-				action: SwipeableAction[],
-				progress: Animated.Value | Animated.AnimatedInterpolation,
-				drag: Animated.AnimatedInterpolation
-		  ) => ReactNode)
-	renderAction?:
-		| null
-		| ((
-				action: SwipeableAction,
-				index: number,
-				progress: Animated.Value | Animated.AnimatedInterpolation,
-				drag: Animated.AnimatedInterpolation,
-				side: 'left' | 'right'
-		  ) => ReactNode)
-}
-
-export interface SwipeableAction {
-	text: string
-	renderIcon?: (
-		progress?: Animated.Value | Animated.AnimatedInterpolation,
-		drag?: Animated.AnimatedInterpolation
-	) => ReactNode
-	color: string
-	backgroundColor: string
-	onPress?: (inboxItemId: string) => void
-}

package/src/components/RoomCreator/Content/Footer/Button/index.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import {
-	Text,
-	TouchableOpacity,
-	StyleSheet,
-	ActivityIndicator,
-	View
-} from 'react-native'
-import { RenderButtonProps } from '../../../types'
-
-export default (props: RenderButtonProps) => {
-	const background = { backgroundColor: props.backgroundColor }
-	return (
-		<TouchableOpacity
-			onPress={props.onPress}
-			style={[
-				styles.button,
-				!props.ready ? styles.disabled : props.index > 0 ? styles.second : {},
-				background
-			]}
-		>
-			<Text style={[styles.text, { color: props.textColor }]}>
-				{props.text}
-			</Text>
-			{props.loading && (
-				<View style={[styles.loader, background]}>
-					<ActivityIndicator color={props.textColor} />
-				</View>
-			)}
-		</TouchableOpacity>
-	)
-}
-
-const styles = StyleSheet.create({
-	button: {
-		padding: 10,
-		backgroundColor: 'blue',
-		alignItems: 'center',
-		flex: 1
-	},
-	second: { backgroundColor: 'hotpink' },
-	disabled: {
-		backgroundColor: 'lightgray'
-	},
-	text: {
-		fontWeight: 'bold',
-		fontSize: 18,
-		color: 'white'
-	},
-	loader: {
-		...StyleSheet.absoluteFillObject,
-		justifyContent: 'center',
-		alignItems: 'center'
-	}
-})

package/src/components/RoomCreator/Content/Footer/Input/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { RoomCreatorInputProps } from '../../../types'
-import { View, TextInput, StyleSheet } from 'react-native'
-
-export default (props: RoomCreatorInputProps) => {
-	return (
-		<View style={[styles.container, props.inputContainerStyle]}>
-			<TextInput
-				onChangeText={props.onChangeText}
-				value={props.text}
-				placeholder="Type a new message..."
-				style={[styles.input, props.inputStyle]}
-				{...(props.inputProps || {})}
-			/>
-		</View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {},
-	input: {
-		paddingHorizontal: 10,
-		paddingTop: 16,
-		paddingBottom: 16,
-		fontSize: 17
-	}
-})

package/src/components/RoomCreator/Content/Footer/index.tsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import { StyleSheet, SafeAreaView } from 'react-native'
-import { RoomCreatorFooterProps, RenderButtonProps } from '../../types'
-import ButtonComponent from './Button'
-import Input from './Input'
-
-export default function(props: RoomCreatorFooterProps) {
-	function renderButton(button: RenderButtonProps) {
-		if (props.renderButton === null) return null
-		if (props.renderButton) return props.renderButton(button)
-
-		const Component = props.ButtonComponent || ButtonComponent
-
-		return <Component key={`${button.text}${Math.random()}`} {...button} />
-	}
-	const renderButtons = () => {
-		return (
-			<SafeAreaView style={styles.buttons}>
-				{props.buttons.map((button, index) => {
-					const ready = props.ready
-					const loading = !!button.loading
-					const buttonProps: RenderButtonProps = {
-						backgroundColor: ready
-							? button.color || 'blue'
-							: button.disabledColor || 'lightgray',
-						text: button.text,
-						onPress: () =>
-							button.onPress({
-								selected: props.selected,
-								ready,
-								loading,
-								text: props.text || ''
-							}),
-						textColor:
-							(ready ? button.textColor : button.disabledTextColor) || 'white',
-						ready,
-						index,
-						loading
-					}
-
-					return renderButton(buttonProps)
-				})}
-			</SafeAreaView>
-		)
-	}
-	const maybeRenderInput = () => {
-		if (!props.enableTextInput) return null
-		if (!props.ready && !props.showInputWhenNotReady) return null
-
-		return (
-			<Input
-				text={props.text}
-				onChangeText={props.onChangeText}
-				inputProps={props.inputProps}
-				inputContainerStyle={props.inputContainerStyle}
-				inputStyle={props.inputStyle}
-			/>
-		)
-	}
-	return (
-		<>
-			{maybeRenderInput()}
-			{renderButtons()}
-		</>
-	)
-}
-
-const styles = StyleSheet.create({
-	buttons: {
-		flexDirection: 'row'
-	}
-})

package/src/components/RoomCreator/Content/Item/Icon/index.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { SelectedIconProps } from '../../../types'
-import { View } from 'react-native'
-import { Ionicons } from '@expo/vector-icons'
-
-export default (props: SelectedIconProps) => {
-	return (
-		<View>
-			<Ionicons
-				name="ios-checkmark-circle"
-				size={28}
-				color={props.active ? props.activeColor : props.inactiveColor}
-			/>
-		</View>
-	)
-}

package/src/components/RoomCreator/Content/Item/index.tsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
-import { RoomCreatorItemProps } from '../../types'
-import Icon from './Icon'
-import Avatar from '../../../Avatar'
-import Initials from '../../../Inbox/Item/Initials'
-import { getInitials } from '../../../../helpers/getInitials'
-
-export default React.memo((props: RoomCreatorItemProps) => {
-	if (props.selected) console.log('selected!!', props.id)
-	const onPress = () => props.toggleSelected(props.id)
-	const renderSelectedIcon = () => {
-		if (props.renderSelectedIcon === null) return null
-		const iconProps = {
-			activeColor: props.selectedIconActiveColor || '#147EFB',
-			inactiveColor: props.selectedIconInactiveColor || '#D3D3D360',
-			active: props.selected
-		}
-		if (props.renderSelectedIcon) return props.renderSelectedIcon(iconProps)
-
-		return <Icon {...iconProps} />
-	}
-	const renderAvatarOrInitials = () => {
-		return props.avatar ? (
-			<Avatar avatar={props.avatar} size={50} />
-		) : (
-			<Initials size={50} initials={getInitials(props.name)} />
-		)
-	}
-	return (
-		<View>
-			<TouchableOpacity onPress={onPress} style={styles.container}>
-				<View style={styles.wrapper}>
-					{renderAvatarOrInitials()}
-					<View style={styles.content}>
-						{!!props.handle && <Text style={styles.name}>{props.handle}</Text>}
-						<Text>{props.name}</Text>
-					</View>
-					<View style={styles.checkContainer}>{renderSelectedIcon()}</View>
-				</View>
-			</TouchableOpacity>
-		</View>
-	)
-})
-
-const styles = StyleSheet.create({
-	container: {
-		paddingHorizontal: 16,
-		paddingVertical: 10
-		// borderBottomWidth: 0.5,
-		// borderBottomColor: 'lightgray'
-	},
-	wrapper: {
-		flexDirection: 'row',
-		alignItems: 'center'
-	},
-	content: {
-		flex: 1,
-		marginLeft: 16
-	},
-	name: {
-		fontWeight: 'bold'
-	},
-	image: {
-		height: 50,
-		width: 50,
-		borderRadius: 25,
-		overflow: 'hidden'
-	},
-	checkContainer: {
-		justifyContent: 'center'
-	},
-	check: {
-		height: 25,
-		width: 25,
-		borderRadius: 12.5,
-		backgroundColor: 'lightgray'
-		// overflow: 'hidden',
-	},
-	checked: {
-		// backgroundColor: 'blue',
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'flex-start'
-		// paddingBottom: 4,
-	}
-})

package/src/components/RoomCreator/Content/index.tsx

@@ -1,75 +0,0 @@
-import React, { useCallback } from 'react'
-import { View, FlatList, StyleSheet } from 'react-native'
-import Item from './Item'
-import {
-	RoomCreatorContentProps,
-	RoomCreatorFooterProps,
-	RoomCreatorItemProps,
-	User
-} from '../types'
-import Footer from './Footer'
-
-export default (props: RoomCreatorContentProps) => {
-	const renderItem = ({ item }: { item: User }) => {
-		if (props.renderItem === null) return null
-
-		const itemProps: RoomCreatorItemProps = {
-			...item,
-			selected: !!props.selected[item.id],
-			toggleSelected: props.toggleSelected,
-			renderSelectedIcon: props.renderSelectedIcon,
-			selectedIconActiveColor: props.selectedIconActiveColor,
-			selectedIconInactiveColor: props.selectedIconInactiveColor
-		}
-
-		if (props.renderItem) return props.renderItem(itemProps)
-
-		return <Item {...itemProps} />
-	}
-
-	const keyExtractor = useCallback((item: User) => item.id, [])
-
-	const renderFooter = () => {
-		if (props.renderFooter === null) return null
-
-		const footerProps: RoomCreatorFooterProps = {
-			renderButton: props.renderButton,
-			buttons: props.buttons,
-			ButtonComponent: props.ButtonComponent,
-			ready: props.ready,
-			selected: props.selected,
-			enableTextInput: !!props.enableTextInput,
-			inputContainerStyle: props.inputContainerStyle,
-			inputStyle: props.inputStyle,
-			showInputWhenNotReady: !!props.showInputWhenNotReady,
-			inputProps: props.inputProps,
-			onChangeText: props.onChangeText,
-			text: props.text
-		}
-		if (props.renderFooter) return props.renderFooter(footerProps)
-
-		return <Footer {...footerProps} />
-	}
-
-	return (
-		<View style={styles.container}>
-			<View style={styles.wrapper}>
-				<FlatList
-					bounces={false}
-					keyExtractor={keyExtractor}
-					renderItem={renderItem}
-					data={props.users}
-					extraData={props.selected}
-					keyboardDismissMode="on-drag"
-					keyboardShouldPersistTaps="handled"
-				/>
-				{renderFooter()}
-			</View>
-		</View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: { backgroundColor: 'white', flex: 1 },
-	wrapper: { flex: 1, justifyContent: 'space-between' }
-})