UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native
/
Key functions

Context

Contexts provide a way to deliver data from Chat SDK to the module and its components that build the UI of the screen. Each fragment has more than one context and each context serves a different purpose to allow access to a specific type of data.

Note: In order to use a context, the module component getting access to the data must be a component directly rendered in the corresponding module. For example, the GroupChannelListContext.Fragment context cannot be used for a user list component because the component doesn't exist in the GroupChannelListFragment.

List of contexts

Key functionContexts

GroupChannelList

GroupChannelListContext.Fragment

GroupChannelListContext.TypeSelector

GroupChannel

GroupChannelContext.Fragment

GroupChannelContext.TypingIndicator

GroupChannelCreate

UserListContext.Fragment

UserListContext.List

GroupChannelSettings

GroupChannelSettingsContext.Fragment

GroupChannelInvite

UserListContext.Fragment

UserListContext.List

GroupChannelMembers

UserListContext.Fragment

UserListContext.List


How to use context

You can use the context in a module component by calling the useContext hook.

import React, { useContext } from 'react';
import { Text } from 'react-native';
import { GroupChannelContexts } from '@sendbird/uikit-react-native';

const CustomTypingUsersComponent = () => {
    const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
    if (typingUsers.length === 0) return null;
    return <Text>{`several people are typing (${typingUsers.length})`}</Text>;
};