chat 1.0.8 → 3.0.0

package/src/components/Chat/types.ts

@@ -1,913 +0,0 @@
-import {
-	TextInputProps,
-	TextStyle,
-	StyleProp,
-	ViewStyle,
-	Animated,
-	Image,
-	ListRenderItemInfo,
-	FlatListProps,
-	FlatList,
-	View,
-	ScrollViewProps,
-	TextInput,
-} from 'react-native'
-import { ComponentType, ReactNode, ReactElement, MutableRefObject } from 'react'
-import { NewMessageModel, MessageMedia } from '../../classes/Message/types'
-import { AvatarProps, InitialsProps } from '../../components/Inbox/types'
-import { TypingIndicatorProps } from '../../components/TypingIndicator'
-
-// TODO improve name position, styles, etc
-
-/**
- * Component that provides a full-on chat screen. Inspired by GiftedChat and works directly with the chat backend.
-/**
- * Chat props
- * @template MessageModel 
- */
-export interface ChatProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	// id: string
-	/**
-	 * **Required:** Array of messages to be rendered.
-	 *
-	 * The default schema looks like this:
-	 * ```ts
-	 * interface NewMessageModel {
-	 * 	text: string
-	 * 	createdAt: Date
-	 * 	user: {
-	 * 		id: string
-	 * 		name: string
-	 * 		avatar: string
-	 * 	}
-	 * 	system?: boolean
-	 * 	media?: MessageMedia
-	 * 	// Any additional custom parameters are passed through
-	 * }
-	 * ```
-	 *
-	 * If you want to customize the schema using typescript, you can import and extend the `NewMessageModel`.
-	 */
-	messages: MessageModel[]
-	// TODO make multiple prop type options so they fail if they aren't together
-	/**
-	 * Text input state value.
-	 * If you use this prop, you must also use the onInputTextChanged prop with it to handle the text state on your own.
-	 */
-	text?: ComposerProps['text']
-	/**
-	 * Function called whenever the composer text changes (when a message is sent or someone types).
-	 * **IMPORTANT**
-	 * If you use this prop, you must also use the `text` prop with it.
-	 */
-	onInputTextChanged?: ComposerProps['onInputTextChanged']
-	/**
-	 * Callback function called whenever a message is sent.
-	 * @param messages - An array of messages. The reason this is an array is because you might have an image and text, and you might want to send them as separate messages.
-	 */
-	onSend: (messages: (MessageModel | NewMessageModel)[]) => void
-	/**
-	 * Props passed to the TextInput component. See [react-native's docs](https://facebook.github.io/react-native/docs/textinput.html)
-	 */
-	textInputProps?: InputProps['inputProps']
-	/**
-	 * Optional styles for the view that wraps the entire component.
-	 * Default: { flex: 1 }
-	 *
-	 * If you're new to react native, see the docs for styles [here](https://facebook.github.io/react-native/docs/style)
-	 */
-	containerStyle?: ViewStyle
-	/**
-	 * Optional styles for FlatList's contentContainerStyle. [See React Native Docs](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)
-	 */
-	contentContainerStyle?: ViewStyle
-	/**
-	 * Custom React component that wraps the entire Chat component. By default, it is an Animated.View from react-native-reanimated, nested inside
-	 */
-	ContainerComponent?: ComponentType
-	/**
-	 * Disable reanimated's transition API when new messages send, someone starts/stops typing, etc.
-	 *
-	 * _Shout-out to Krzysztof Magiera for the awesome react-native-reanimated lib._
-	 */
-	disableTransitions?: boolean
-	/**
-	 * Optional custom transition for the reanimated transitions API. [See docs for transitions](https://github.com/kmagiera/react-native-reanimated#transitions-) (you'll see more in their examples/).
-	 * Will fire this transition whenever a new message is sent/received, or when someone else starts/stops typing (unless typing indicators are disabled.)
-	 *
-	 * **Default:**
-	 * ```javascript
-	 * const transitionConfig = (
-	 *	<Transition.Sequence>
-	 *		<Transition.Together>
-	 *			<Transition.Out type="fade" />
-	 *			<Transition.Change interpolation="easeOut" />
-	 *		</Transition.Together>
-	 *		<Transition.In type="fade" />
-	 *	</Transition.Sequence>
-	 * )
-	 * ```
-	 *
-	 *
-	 */
-	transitionConfig?: ReactNode
-	/**
-	 * Default false.
-	 * If true, disables the reanimated Transition on the initial mount / load of messages
-	 */
-	disableTransitionOnMount?: boolean
-	/**
-	 * **Important** Be sure to use `useCallback` for this value if you're using react hooks to avoid re-renders.
-	 * Style prop for the bubble text, based on whether or not the user sent it (`me`) or someone else did (`others`)
-	 *
-	 * @example
-	 * ``` javascript
-	 * const bubbleTextStyle = useCallback(({ isMe }) => ({ color: isMe ? 'white' : 'green' }), [])
-	 * return <Messages bubbleTextStyle={bubbleTextStyle} />
-	 * ```
-	 */
-	bubbleTextStyle?: PartialUserOptions<MessageProps['bubbleTextStyle']>
-	/**
-	 * **Important** Be sure to use `useCallback` for this value if you're using react hooks to avoid re-renders.
-	 * Style prop for the bubble view, based on whether or not the user sent it (`me`) or someone else did (`others`):
-	 *
-	 * @example
-	 * ``` javascript
-	 * const bubbleStyle = useCallback(({ isMe }) => ({ backgroundColor: isMe ? 'green' : 'white' }), [])
-	 * return <Messages bubbleStyle={bubbleStyle} />
-	 * ```
-	 */
-	bubbleStyle?: PartialUserOptions<MessageProps['bubbleStyle']>
-	/**
-	 * **Important** Be sure to use `useCallback` for this value if you're using react hooks to avoid re-renders.
-	 * Style prop for the bubble's container view, based on whether or not the user sent it (`me`) or someone else did (`others`).
-	 *
-	 * **Note:** The container is not the bubble itself, rather the view that holds the bubble, responsible for choosing which side of the screen it goes on, etc.
-	 * If you want to edit the bubble directly, see bubbleStyle or bubbleTextStyle props.
-	 *
-	 * @example
-	 * ``` javascript
-	 * const messageContainerStyle = useCallback(({ isMe }) => ({ justifyContent: isMe ? 'flex-end' : 'flex-start' }), [])
-	 * return <Messages messageContainerStyle={messageContainerStyle} />
-	 * ```
-	 */
-	messageContainerStyle?: PartialUserOptions<
-		MessageProps['messageContainerStyle']
-	>
-	/**
-	 * Style prop for the bubble's wrapper view, based on whether or not the user sent it (`me`) or someone else did (`others`).
-	 *
-	 * This view is _inside_ of the bubble's container view. It wraps the bubble *and* the avatar. You might use this if you want to switch which side the avatar is on.
-	 *
-	 * @remarks
-	 * - To change which side of the screen a message bubble actually shows up on, see `messageContainerStyle` prop.
-	 * - To change the background color and other styles of a bubble, see `bubbleStyle` prop.
-	 * - To update bubble text, see `bubbleTextStyle` prop.
-	 *
-	 * @example
-	 * ``` javascript
-	 * // switch "my" avatar to show up on the left instead of the right.
-	 * const messageWrapperStyle = useCallback(({ isMe }) => ({ flexDirection: isMe ? 'row-reverse' : undefined }), [])
-	 * return <Messages messageWrapperStyle={messageWrapperStyle} />
-	 * ```
-	 */
-	messageWrapperStyle?: PartialUserOptions<MessageProps['messageWrapperStyle']>
-	/**
-	 * Boolean that disables the swipe-from-side actions on specific messages. Overrides the `swipeActions` prop.
-	 */
-	disableSwipeActions?: boolean
-	/**
-	 * A dictionary { left, right }, each value of which is an array of pre-made actions that let you swipe on a message and do something with it (for instance, reply or react to one).
-	 * Default: { right: ['reply'] }
-	 *
-	 * Options: ['reply', 'react', 'edit', 'delete']
-	 *
-	 * if `disableSwipeActions` prop is true, then this prop is ignored.
-	 */
-	swipeActions?: SwipeableProps['swipeActions']
-	/**
-	 * Which side the actions swipe from. Defaults to right.
-	 *
-	 * For example, the swipe to reply to message will swipe from right if this is right.
-	 *
-	 * If you're using react navigation's stack navigator, I'd suggesting leaving this as the default.
-	 * That said, you could customize react-navigation's gesture distance (see:
-	 * [react-navigation's docs](https://reactnavigation.org/docs/en/stack-navigator.html#gestureresponsedistance)
-	 * )
-	 */
-	// swipeActionsFrom?: 'right' | 'left'
-	/**
-	 * React node that replaces the default actions when swiping a message.
-	 *
-	 * @param props - { action: string, drag: Animated.Value, progress: Animated.AnimatedInterpolation }
-	 *
-	 * Perhaps you only want to use a custom icon when replying, for example.
-	 * @example
-	 * ```js
-	 * return (
-	 *  <Messages
-	 *   renderSwipeAction={props => (
-	 *     props.action === 'reply ? <YourCustomAction {} /> : <Messages.SwipeAction {...props} />
-	 *   )}
-	 *  />
-	 * )
-	 *
-	 * ```
-	 *
-	 * See related props: `swipeActions`, `disableSwipeActions`, `swipeActionWidth`
-	 */
-	renderSwipeAction?: SwipeableProps['renderSwipeAction']
-	/**
-	 * How wide the swipe actions are. Default: 80
-	 *
-	 * See related props: `swipeActions`, `disableSwipeActions`, `renderSwipeAction`
-	 */
-	swipeActionWidth?: SwipeableProps['actionWidth']
-	/**
-	 * Custom function to render the media that's in a message. It could be a image or video.
-	 */
-	renderMessageMedia?: MessageProps['renderMedia']
-	messageVerticalMargin?: number
-	/**
-	 * Function that generates a random ID for messages that are sent. By default, it uses uuid.v4()
-	 */
-	messageIdGenerator?: () => string
-	/**
-	 * _Deprecated_ use the `namesOfUsersTyping` prop instead.
-	 *
-	 * Boolean to indicate if users are typing. Can be used with the `useMessages` hook.
-	 * @example
-	 * ```
-	 * const [{data}, {usersAreTyping}] = useMessages({ id: 'someRoomId' })
-	 *
-	 * return <Messages messages={data} usersAreTyping={usersAreTyping} />
-	 * ```
-	 */
-	// usersAreTyping?: boolean
-	/**
-	 * List of the names of people typing. This can be useful if you want to show text like:
-	 * "Michael, Jim & Jan are typing..."
-	 *
-	 * Can be used with the `useMessages` hook.
-	 * @example
-	 * ```
-	 * // namesOfUsersTyping will not include you if you are typing.
-	 * const [{data}, {namesOfUsersTyping}] = useMessages({ id: 'someRoomId' })
-	 *
-	 * return <Chat messages={data} namesOfUsersTyping={namesOfUsersTyping} />
-	 * ```
-	 */
-	namesOfUsersTyping?: string[]
-	/**
-	 * Function to replace the normal <TypingIndicator /> component.
-	 *
-	 * **Note:** This is not a necessary prop to customize the typing indicator. There are many props to customize the typing indicator without rendering a fully new one.
-	 * See `typingIndicatorProps` and `typingIndicatorContainerStyle`
-	 */
-	renderTypingIndicator?: (props: TypingProps) => ReactNode
-	extraData?: FlatListProps<MessageModel>['extraData']
-	MessageComponent?: ComponentType
-	user: NewMessageModel['user']
-	hideMyAvatar?: boolean
-	showAvatarForEveryMessage?: boolean
-	renderAvatar?: ((props: AvatarProps) => ReactNode) | null
-	renderMessageFooter?: MessageProps['renderFooter']
-	/**
-	 * (Optional) Use this to render a custom message component.
-	 * @param props Receives MessageProps
-	 *
-	 * If you're looking to entirely override the message render function in the FlatList component, use the renderItem prop.
-	 */
-	renderMessage?: null | ((props: MessageProps) => ReactElement)
-	/**
-	 * (Optional) Use this to render a custom bubble component. This will render inside of the messageWrapper. Not the same as renderMessage, which renders the top-level message component.
-	 * @param props - receives BubbleProps
-	 */
-	renderBubble?: null | ((props: BubbleProps) => ReactNode)
-	/**
-	 * If you're thinking of using this, there's a good change you're looking for the renderMessageProp
-	 * (Advanced) You probably shouldn't use this prop unless you want a high level of customization.
-	 * This overrides the default renderItem function for the FlatList.
-	 * See React Native's FlatList renderItem docs.
-	 */
-	renderItem?: (props: ListRenderItemInfo<MessageModel>) => ReactElement
-	/**
-	 * (Optional) override default FlatList keyExtractor: (item) => item.id
-	 */
-	keyExtractor?: FlatListProps<MessageModel>['keyExtractor']
-	/**
-	 * Render component under the TextInput, similar to the way iMessage does.
-	 * @param props: Same props passed to the Composer
-	 */
-	renderComposerFooter?: (props: ComposerFooterProps) => ReactNode
-	/**
-	 * Extend the props for the ListView that renders the messages.
-	 */
-	flatListProps?: Omit<Omit<FlatListProps<MessageModel>, 'renderItem'>, 'data'>
-	/**
-	 * Renders at the end of the messages list. Different from renderFooter, which is fixed at the bottom, this moves with the scroll.
-	 */
-	ListFooterComponent?: FlatListProps<MessageModel>['ListFooterComponent']
-	/**
-	 * Render React component above the messages.
-	 * For instance, maybe you want to render "New messages ^" to indicate someone should scroll up
-	 */
-	renderHeader?: () => ReactNode
-	/**
-	 * Render React component fixed at the bottom below the messages list. Different from ListFooterComponent prop, which scrolls with messages.
-	 */
-	renderFooter?: () => ReactNode
-	/**
-	 * Custom composer component. The "Composer" encapsulates the entire creation bar at the bottom.
-	 */
-	renderComposer?: (props: ComposerProps) => ReactNode
-	/**
-	 * Custom TextInput component inside the composer. Different from the renderComposer prop, which renders the entire composer component.
-	 */
-	renderTextInput?: ComposerProps['renderTextInput']
-	/**
-	 * Custom send button component. The "Composer" encapsulates the entire creation bar at the bottom.
-	 */
-	renderSendButton?: ComposerProps['renderSendButton']
-	/**
-	 * Custom view style for the container holding the send button. To edit the background color, see `tintColor` prop.
-	 */
-	sendButtonContainerStyle?: SendButtonProps['containerStyle']
-	/**
-	 * Function called when message is pressed.
-	 */
-	onPressMessage?: (message: MessageModel) => void
-	/**
-	 * Function called when message is double tapped.
-	 */
-	onDoubleTapMessage?: (message: MessageModel) => void
-	/**
-	 * Function called when message is long pressed.
-	 */
-	onLongPressMessage?: (message: MessageModel) => void
-	/**
-	 * How long the interval should be to detect a long press.
-	 *
-	 * *Default: 400ms
-	 */
-	messageLongPressDelay?: MessageProps['longPressDelay']
-	/**
-	 * What kind of "press" method should work for clicking a message.
-	 * Can be "single" or "double".
-	 *
-	 * Related: messageDoubleTapDelay prop
-	 */
-	// messagePressType?: MessageProps['pressType']
-	/**
-	 * How long the interval should be between taps to detect a double tap.
-	 * **Important** The `messagePressType` prop must be set to "double" for this to apply.
-	 *
-	 * *Default: 200ms*
-	 */
-	messageDoubleTapDelay?: MessageProps['doubleTapDelay']
-	/**
-	 * See [react-native docs](https://www.google.com/search?q=image+props+react+native&oq=image+props+react+native&aqs=chrome.0.0l5j69i64.1740j0j7&sourceid=chrome&ie=UTF-8) for image props.
-	 */
-	imageProps?: MessageProps['imageProps']
-	initialText?: string
-	/**
-	 * Text that sits in TextInput when it's empty. Defaults to "Type a message..."
-	 */
-	placeholderText?: InputProps['placeholderText']
-	/**
-	 * Color for text that sits in TextInput when it's empty.
-	 */
-	placeholderColor?: InputProps['placeholderColor']
-	/**
-	 * Boolean to set whether or not the Chat component container should be wrapped with a SafeAreaView.
-	 * Default: `false`
-	 */
-	safeArea?: boolean
-	/**
-	 * Override the composer's local media state.
-	 * This can be useful if you're using redux or another similar state manager.
-	 *
-	 * **Note:** must be used with the `onMediaChanged` prop.
-	 */
-	media?: MessageMedia[]
-	/**
-	 * Handle the composer's media selection on your own.
-	 * This can be useful if you're using redux or another similar state manager.
-	 *
-	 * **Note:** must be used with the `media` prop.
-	 */
-	onChangeMedia?: (media: NewMessageModel[]) => void
-	/**
-	 * funtion that returns a custom component to render composer media
-	 * @params props - ({ media }) => ReactNode
-	 * where media is an array of media items
-	 *
-	 * @example
-	 * ```jsx
-	 * <Messages
-	 *   renderComposerMedia={({ media }) =>
-	 *    media.map(item => item.contentType === 'image' ? <Image uri={{ uri: item.uri } style={{ height: 100, width: 100 }} /> : null)
-	 *   }
-	 * />
-	 * ```
-	 */
-	renderComposerMedia?: (props: {
-		media: Omit<MessageMedia, 'url'>
-	}) => ReactNode
-	/**
-	 * Dictionary to customize the send button mode based on the input text length. Mode be one of these strings: 'icon', 'text', 'hidden'.
-	 *
-	 * **Default:**
-
-	 * ```javascript
-	 * const sendButtonMode = {
-	 * 	withText: 'icon',
-	 * 	empty: 'hidden'
-	 * }
-	 * ```
-	 */
-	sendButtonMode?: PartialInputOptions<SendButtonMode>
-	/**
-	 * Default: `false`
-	 * Set `true` if you don't want the messages to scroll to the end when you send a new message.
-	 */
-	disableScrollToBottomOnSend?: boolean
-	/**
-	 * Optional react-native animated value that tracks the position of the scroll.
-	 *
-	 */
-	animatedScrollNode?: Animated.Value
-	/**
-	 * If true, messages will scroll to bottom every time a new message comes in, regardless of who sends it.
-	 * Default: `false`.
-	 * If true, this prop overrides `disableScrollToBottomOnSend`.
-	 */
-	scrollToBottomOnAllNewMessages?: boolean
-	/**
-	 * Callback function for when messages are viewed
-	 * @param viewInfo - Dictionary with details about the messages being viewed
-	 * @param viewInfo.visibleMessages - Array of current messages that are visible
-	 * @param viewInfo.latestMessageId - If the most recent message in this chat room is visible, then this will return its ID. Otherwise, this will be null.
-	 *
-	 * `chat` uses the logic from latestMessageId to clear unread counts. This is helpful if you want to avoid uploading to your backend every single time a message is viewed, and instead only when you view the most recent one (since you can clear out the previous.)
-	 * @example
-	 * ```javascript
-	 * export default ({ id }) => {
-	 * 	const [{ data }, { send }] = useMessages({ id })
-	 * 	const onViewMessages = useViewMessages({ roomId: id })
-	 *
-	 * 	return <Messages messages={data} onSend={send} onViewMessages={onViewMessages} />
-	 * }
-	 * ```
-	 */
-	onViewMessages?: (viewInfo: {
-		visibleMessages: MessageModel[]
-		latestMessageId: string | null
-	}) => void
-	/**
-	 * **🚨** If you're using this prop to track viewed messages, see the `onViewMessages` prop instead.
-	 *
-	 * Optional FlatList prop. [See react native docs](https://facebook.github.io/react-native/docs/0.18/flatlist#onviewableitemschanged).
-	 */
-	onViewableItemsChanged?: FlatList<
-		MessageModel
-	>['props']['onViewableItemsChanged']
-	/**
-	 * General tint color for the chat, used for the buttons, text, etc.
-	 */
-	tintColor?: string
-	/**
-	 * If true, component will implement its own KeyboardAvoidingView component for ios and android.
-	 *
-	 * Default: `true`
-	 *
-	 * **Note:** If you're using react navigation's stack navigator, this can have bugs. For some reason, the react-navigation's Header component pushes down the view. One solution is to set the stack to `headerTransparent`: `true`. The downside of this is you'll have to set the FlatList's contentContainerStyle to have a top padding to offset the header height. If you're using a bottom tab navigator too, just disable the hiding on keyboard show prop for that navigator.
-	 */
-	avoidKeyboard?: boolean
-	/**
-	 * Style the outer container of the composer (not to be confused with `inputContainerStyle`)
-	 */
-	composerContainerStyle?: StyleProp<ViewStyle>
-	/**
-	 * Style the container immediately wrapping the TextInput (not to be confused with `composerContainerStyle`)
-	 */
-	inputContainerStyle?: StyleProp<ViewStyle>
-	/**
-	 * Directly style the TextInput component.
-	 */
-	inputStyle?: TextInputProps['style']
-	// TODO
-	/**
-	 * **Note:** For basic system message customizations, see these props instead: `systemMessageTextStyle`, `systemMessageTextStyle`, `systemMessageContainerStyle`, `systemMessageDateStyle`, systemMessageDateToStringFunc
-	 *
-	 * This prop is a function that returns a custom system message component. You can also extend the <SystemMessage /> component if you'd like.
-	 *
-	 * @example
-	 * ```javascript
-	 * return <Messages renderSystemMessage={props => (
-	 * 	<SystemMessage
-	 *    {...props}
-	 *    // custom props
-	 *  />
-	 * )} />
-	 * ```
-	 */
-	renderSystemMessage?: null | ((props: SystemMessageProps) => ReactElement)
-	/**
-	 * Style the text for a custom message.
-	 */
-	systemMessageTextStyle?: StyleProp<TextStyle>
-	/**
-	 * Style the view that wraps a system message and its date.
-	 */
-	systemMessageContainerStyle?: StyleProp<ViewStyle>
-	/**
-	 * Style the text for a system message's date.
-	 */
-	systemMessageDateStyle?: StyleProp<TextStyle>
-	/**
-	 * System that dates in a date and returns a string to be printed as the date for system messages.
-	 *
-	 * By default, uses moment.js. This is the default function:
-	 * ```javascript
-	 * import moment from 'moment'
-	 *
-	 * date => moment(date).calendar(undefined, {
-	 *  	lastDay: '[Yesterday]',
-	 *  	sameDay: 'LT',
-	 *  	nextDay: '[Tomorrow at] LT',
-	 *  	lastWeek: 'dddd',
-	 *  	nextWeek: '[Next] dddd',
-	 *  	sameElse: 'L'
-	 *  })
-	 * ```
-	 */
-	systemMessageDateToStringFunc?: SystemMessageProps['dateToStringFunc']
-	/**
-	 * Style the text that shows a person's name above their message.
-	 */
-	nameStyle?: TextStyle
-	/**
-	 * Boolean to enable name being shown every time someone else sends a message. Default `false`.
-	 *
-	 * @remarks
-	 * To enable name for messages the user sends too, see the `showMyName` prop.
-	 */
-	showNameForEveryMessage?: boolean
-	/**
-	 * Boolean to enable name being for the person sending messages. Default `false`
-	 */
-	showMyName?: boolean
-	/**
-	 * Custom function to render a date in between messages. Dates are rendered in between messages when messages are sent on a new day.
-	 */
-	renderDate?: null | ((date: Date) => ReactNode)
-	/**
-	 * See React Native's ScrollView docs. This prop manages whether or not the chat scrollview should persist through taps when keyboard is open.
-	 */
-	keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps']
-	/**
-	 * See React Native's ScrollView docs. This prop manages the way the keyboard is closed when someone scrolls
-	 */
-	keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
-	/**
-	 * Ref that gets forwarded to the Messages component. Exposes the following methods:
-	 *
-	 * - `focusInput` (for input)
-	 * - `blurInput` (for input)
-	 * - `scrollToEnd` Remember that this FlatList is inverted so you should think of 0 as the bottom of the screen. (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend))
-	 * - `scrollToIndex` (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex))
-	 * - `scrollToItem` (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltoitem))
-	 * - `scrollToOffset` Remember that this FlatList is inverted so you should think of 0 as the bottom of the screen. (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltooffset))
-	 *
-	 */
-	chatRef?: MutableRefObject<ChatRef<MessageModel>>
-	/**
-	 * size for the avatar/initials component that renders next to messages
-	 * default: `40`
-	 */
-	avatarSize?: number
-	/**
-	 * React Native Image props passed to the avatar. For max customization, see `renderAvatar` prop.
-	 */
-	avatarImageProps?: AvatarProps['imageProps']
-	/**
-	 * Background color for the initials component that will show in the absense of an avatar.
-	 */
-	initialsBackgroundColor?: PartialUserOptions<string>
-	/**
-	 * Text color for the initials component that will show in the absense of an avatar.
-	 */
-	initialsTextColor?: PartialUserOptions<string>
-	/**
-	 * Custom component to render the Initials component when there isn't an avatar present.
-	 * Takes one argument (InitialsProps).
-	 *
-	 * @example
-	 * ```javascript
-	 * return <Messages renderInitials={props => <Initials {...props} />} />
-	 * ```
-	 */
-	renderInitials?: (props: InitialsProps) => ReactNode
-	/**
-	 * **Important** Use React's `useCallback` hook for this value if you're using react hooks to avoid re-renders.
-	 *
-	 * Function receives one argument: a dictionary with boolean `isMe` value. If true, then this is the screen for the person sending the message.
-	 *
-	 * The return value of this function determines the background color for message bubbles. If an array is returned, it will make a gradient background color.
-	 * This function can return one of the following: 1) string (solid color background), 2) array of strings (for gradient), 3) function that returns a string, or 4) function that returns an array of strings for a gradient.
-	 *
-	 * If a function is returned, it will receive the message as its only argument. This is very useful if you want to have different colors determined by who sent the message, what kind of content it has, etc.
-	 *
-	 * @remarks
-	 * If you return a function, it will receive a dictionary containing the message information, and the message's id as the only argument. It must return an array or string.
-	 *
-	 * @example
-	 * ```js
-	 * const bubbleBackgroundColor = useCallback(({ isMe }) => {
-	 *  if (isMe) {
-	 *   return 'darkblue' // if you want, you can just return a string for one color
-	 *
-	 *   // you can also pass an array of colors for a gradient
-	 *   return ['lightgray', 'darkblue']
-	 *  }
-	 *
-	 *  // instead of a string or array of strings, you could also pass a function:
-	 *  // passing a function that returns a color (or array of colors for a gradient) lets you use message data to determine the colors
-	 *  return message => message.user.id === 'user_1' ? 'lavender' : 'green'
-	 *
-	 * // or, if you want a gradient, you could do this:
-	 *  return message => message.user.name === 'Fernando' ? ['darkgreen', 'lightgray'] : ['lavender', 'lightgray']
-	 *
-	 * }, [])
-	 * return <Messages bubbleBackgroundColor={bubbleBackgroundColor} />
-	 * ```
-	 */
-	bubbleBackgroundColor?: PartialUserOptions<
-		MessageProps['bubbleBackgroundColor']
-	>
-	/**
-	 * **Important** Be sure to use `useCallback` for this value if you're using react hooks to avoid re-renders.
-	 * Edit the bubble's text color based on who sent a message. Takes a dictionary {me, others} where each key optionally takes a color string argument.
-	 *
-	 * @example
-	 * ```js
-	 * const bubbleTextColor = useCallback(({ isMe }) => ({ color: isMe ? 'white' : 'black' }), [])
-	 * return <Messages bubbleTextColor={bubbleTextColor} />
-	 * ```
-	 */
-	bubbleTextColor?: PartialUserOptions<BubbleProps['textColor']>
-	/**
-	 * Custom React Component to replace the default React Native image. Perhaps you use fast image or expo image cache here.
-	 */
-	AvatarImageComponent?: ComponentType
-	/**
-	 * Pass props to the `<TypingIndicator />` component.
-	 * If using react hooks, be sure to use `useMemo` for the props you pass to avoid re-render.
-	 */
-	typingIndicatorProps?: TypingIndicatorProps
-	/**
-	 * React native `View` props, passed to the view that holds the typing indicator whenever someone is typing.
-	 */
-	typingIndicatorContainerStyle?: ViewStyle
-	/**
-	 * Boolean. If `true`, the names of people typing will show up next to the typing indicator.
-	 * If `false`, names won't show up.
-	 *
-	 * Fredrick, Franklin, and Finkleberry are typing...
-	 */
-	showTypingText?: boolean
-	/**
-	 * Allow send when you press enter.
-	 */
-	sendOnKeyboardReturn?: boolean
-	/**
-	 * Optional function that returns a react element to render the text of a message. Receives the message as props.
-	 */
-	renderMessageText?: (props: {
-		text: string
-		style: StyleProp<TextStyle>
-	}) => ReactNode
-}
-
-export interface MessageProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	renderText?: ChatProps['renderMessageText']
-	id: string
-	isMe: boolean
-	text: MessageModel['text']
-	system: MessageModel['system']
-	bubbleTextStyle?: StyleProp<TextStyle>
-	bubbleStyle?: StyleProp<ViewStyle>
-	messageContainerStyle?: StyleProp<ViewStyle>
-	messageWrapperStyle?: StyleProp<ViewStyle>
-	name: MessageModel['user']['name']
-	delivered?: boolean
-	read?: boolean
-	renderFooter?: (props: { id: string }) => ReactNode
-	// flatten media props
-	mediaHeight?: MessageMedia['height']
-	mediaWidth?: MessageMedia['width']
-	mediaUrl?: MessageMedia['url']
-	mediaUri?: MessageMedia['uri']
-	mediaContentType?: MessageMedia['contentType']
-	renderMedia?: (props: { media: MessageMedia }) => ReactNode
-	// onPress?: (message: MessageModel) => void
-	// onLongPress?: (message: MessageModel) => void
-	// onDoubleTap?: (message: MessageModel) => void
-	onPress?: TouchableProps['onPress']
-	onLongPress?: TouchableProps['onLongPress']
-	onDoubleTap?: TouchableProps['onDoubleTap']
-	doubleTapDelay?: number
-	longPressDelay?: number
-	imageProps?: Image['props']
-	// pressType: 'single' | 'double'
-	disableSwipeActions?: SwipeableProps['disableSwipeActions']
-	swipeActions?: SwipeableProps['swipeActions']
-	renderSwipeAction?: SwipeableProps['renderSwipeAction']
-	swipeActionWidth?: SwipeableProps['actionWidth']
-	showName?: boolean
-	avatar?: string
-	avatarImageProps?: ChatProps['avatarImageProps']
-	avatarSize?: ChatProps['avatarSize']
-	renderAvatar?: ChatProps['renderAvatar']
-	showAvatar?: boolean
-	initialsBackgroundColor?: string
-	initialsTextColor?: string
-	renderInitials?: ChatProps['renderInitials']
-	tintColor?: string
-	nameStyle?: ChatProps['nameStyle']
-	bubbleBackgroundColor?: BubbleBackgroundColor
-	bubbleTextColor?: BubbleProps['textColor']
-	userId?: MessageModel['user']['id']
-	userName?: MessageModel['user']['name']
-	AvatarImageComponent?: ChatProps['AvatarImageComponent']
-	/**
-	 * boolean to indicate whether or not this message creates a new "bunch", meaning the person sending it is different from the person who sent the previous message.
-	 * This is useful for adding extra margin between messages sent by different people.
-	 */
-	createsNewBunch?: boolean
-	createdAt: Date
-}
-
-export interface ChatRef<
-	MessageModel extends NewMessageModel = NewMessageModel
-> extends Partial<FlatList<MessageModel>> {
-	focusInput: () => void
-	blurInput: () => void
-}
-
-export interface BubbleProps {
-	renderText?: ChatProps['renderMessageText']
-	style?: StyleProp<ViewStyle>
-	textStyle?: StyleProp<ViewStyle>
-	isMe?: boolean
-	text?: string
-	bubbleRef?: MutableRefObject<View>
-	backgroundColor?: string[]
-	textColor?: string
-	mediaHeight?: MessageProps['mediaHeight']
-	mediaWidth?: MessageProps['mediaWidth']
-	mediaUrl?: MessageProps['mediaUrl']
-	mediaUri?: MessageProps['mediaUri']
-	mediaContentType?: MessageProps['mediaContentType']
-	renderMedia?: MessageProps['renderMedia']
-}
-
-type BubbleBackgroundColor<
-	MessageModel extends NewMessageModel = NewMessageModel
-> = string | string[] | ((message: MessageModel) => string | string[])
-// | ((message: {
-// 		user: MessageModel['user']
-// 		id: MessageModel['id']
-//   }) => string | string[])
-
-export interface SystemMessageProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	textStyle?: StyleProp<TextStyle>
-	dateStyle?: StyleProp<TextStyle>
-	containerStyle?: StyleProp<ViewStyle>
-	text: MessageModel['text']
-	createdAt: MessageModel['createdAt']
-	dateToStringFunc?: (date: Date) => string
-}
-
-export interface ComposerProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	renderTextInput?: (props: InputProps) => ReactNode
-	renderSendButton?: (props: SendButtonProps) => ReactNode
-	sendButtonContainerStyle?: SendButtonProps['containerStyle']
-	textInputProps?: InputProps<MessageModel>['inputProps']
-	text?: InputProps<MessageModel>['text']
-	onInputTextChanged?: (text: string) => void
-	placeholderText?: InputProps<MessageModel>['placeholderText']
-	placeholderColor?: InputProps<MessageModel>['placeholderColor']
-	initialText?: string
-	media?: MessageMedia[]
-	user: ChatProps<MessageModel>['user']
-	onChangeMedia?: ChatProps<MessageModel>['onChangeMedia']
-	onSend: ChatProps<MessageModel>['onSend']
-	sendButtonMode?: ChatProps['sendButtonMode']
-	tintColor?: string
-	containerStyle?: ChatProps['composerContainerStyle']
-	inputContainerStyle?: ChatProps['inputContainerStyle']
-	inputStyle?: ChatProps['inputStyle']
-	inputRef?: MutableRefObject<TextInput>
-	/**
-	 * Allow send when you press enter.
-	 */
-	sendOnKeyboardReturn?: boolean
-}
-
-export interface InputProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	text: string
-	onChangeText: ChatProps<MessageModel>['onInputTextChanged']
-	inputProps?: TextInputProps
-	placeholderText?: string
-	placeholderColor?: string
-	tintColor?: string
-	containerStyle?: ChatProps['inputContainerStyle']
-	style?: ChatProps['inputStyle']
-	inputRef?: MutableRefObject<TextInput>
-	/**
-	 * Allow send when you press enter.
-	 */
-	sendOnKeyboardReturn?: boolean
-	onSubmitEditing?: TextInputProps['onSubmitEditing']
-}
-
-export interface ComposerFooterProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	text: ComposerProps<MessageModel>['text']
-}
-
-export interface SendButtonProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	text?: string
-	onSend: () => void
-	media?: MessageMedia[]
-	user?: MessageModel['user']
-	mode: SendButtonMode
-	containerStyle?: ViewStyle
-	tintColor?: string
-}
-
-export type SwipeAction = 'reply' | 'edit' | 'delete' | 'react'
-export type SendButtonMode = 'icon' | 'text' | 'hidden'
-
-// TODO add a function validator that confirms that there's a keyof one of these values
-export type UserOptions<OptionType> = (info: { isMe: boolean }) => OptionType
-
-// export interface InputOptions<Option, EmtpyOption = null> {
-// 	withText: EmtpyOption | Option
-// 	empty: Option
-// }
-export type InputOptions<Option> = (info: { hasText: boolean }) => Option
-export type PartialInputOptions<Option> = InputOptions<Option>
-
-// export type PartialInputOptions<Option> = Partial<InputOptions<Option>>
-
-// export type PartialUserOptions<OptionType> = Partial<UserOptions<OptionType>>
-export type PartialUserOptions<OptionType> = UserOptions<OptionType>
-
-export interface SwipeableProps {
-	disableSwipeActions?: boolean
-	swipeActions?: { right?: SwipeAction[]; left?: SwipeAction[] }
-	renderSwipeAction?: (action: SwipeActionProps) => ReactNode
-	actionWidth?: SwipeActionProps['width']
-}
-
-export interface SwipeActionProps {
-	progress?: Animated.Value | Animated.AnimatedInterpolation
-	drag?: Animated.AnimatedInterpolation
-	action: SwipeAction
-	width?: number
-}
-
-export interface TypingFooterProps extends TypingIndicatorProps, TypingProps {
-	containerStyle?: ViewStyle
-	typingText?: string
-}
-
-export interface TypingProps {
-	// usersAreTyping: boolean
-	numberOfUsersTyping?: number
-}
-
-export interface TouchableProps {
-	id: string
-	onPress?: (id: string) => void
-	onLongPress?: (id: string) => void
-	onDoubleTap?: (id: string) => void
-	longPressDelay?: ChatProps['messageLongPressDelay']
-	doubleTapDelay?: ChatProps['messageDoubleTapDelay']
-}