Contexts Overview

Stream Chat for React Native uses a number of contexts to distribute data, functions, and components throughout the SDK. You can make use of these contexts when creating custom components to construct reusable components that can replace those provided out of the box.

Providers

The majority of the contexts within the SDK are established in the higher level components. OverlayProvider, Chat, and Channel all contain a number of context providers that can be accessed via hooks or Higher Order Components.

• ChannelList
  • ChannelsContext
• Channel
  • ChannelContext
  • ChannelStateContext
  • KeyboardContext
  • MessageInputContext
  • MessagesContext
  • PaginatedMessageListContext
  • SuggestionsContext
  • ThreadContext
  • TypingContext
  • OwnCapabilitiesContext
• Chat
  • ChatContext
  • ThemeContext
  • TranslationContext
• OverlayProvider
  • AttachmentPickerContext
  • ImageGalleryContext
  • MessageOverlayContext
  • OverlayContext
  • ThemeContext
  • TranslationContext
• MessageSimple
  • MessageContext
• For Debugging using Flipper Plugin
  • DebugContext

These contexts are the source of the majority of the components, functions, and data used in the SDK. When creating a custom component these contexts are where one should first look to draw data and sub-components from to create a custom component.

Most components when rendered by the SDK receive few or no props, it is up to you as the developer to pull the appropriate data from these contexts that you need for your customizations.

Hooks

To access information from these contexts we suggest using the hooks that are provided by the library.

Context	Hook
AttachmentPickerContext	useAttachmentPickerContext
ChannelContext	useChannelContext
ChannelsContext	useChannelsContext
ChannelStateContext	useChannelState
ChatContext	useChatContext
DebugContext	useDebugContext
ImageGalleryContext	useImageGalleryContext
KeyboardContext	useKeyboardContext
MessageContext	useMessageContext
MessageInputContext	useMessageInputContext
MessageOverlayContext	useMessageOverlayContext
MessagesContext	useMessagesContext
OverlayContext	useOverlayContext
OwnCapabilitiesContext	useOwnCapabilitiesContext
PaginatedMessageListContext	usePaginatedMessageListContext
SuggestionsContext	useSuggestionsContext
ThreadContext	useThreadContext
ThemeContext	useTheme
TranslationContext	useTranslationContext
TypingContext	useTypingContext

note

If you are using TypeScript you will need to pass your custom data types to hooks you are taking advantage of.

If needed Higher Order Components are also exported to pass contexts into class-based components.

Usage

Most customizations to the UI are provided through the Channel component. To give some insight into how customizations work internally with contexts we will walk through the path a single custom component takes when it is provided as a prop to the Channel component. We will also look at how this structure can be utilized to build custom components that consume context.

const CustomMessageStatus = () => {
  const { message } = useMessageContext();
  return <Text>{message.readBy}</Text>;
};
...
<Channel MessageStatus={CustomMessageStatus}>

A simple custom MessageStatus component that pulls message data from the useMessageContext context and return the readBy key as text.