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

Context

Copy link

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.


How to use context

Copy link

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>;
};