Note: The Channel component provides access to the values stored in ChannelContext, MessagesContext, and ThreadContext and exposes their hooks or the withChannelContext, withMessagesContext, and withThreadContext higher order components.
The example below shows how to write a component that consumes a context and uses hooks.
import React from 'react'; import { Text, View } from 'react-native'; import { Channel } from './Channel'; import { Chat } from '../Chat/Chat'; import { chat, channel as dataChannel, } from '../docs/data'; import { MessageInput } from '../MessageInput/MessageInput'; import { MessageList } from '../MessageList/MessageList'; import { useChannelContext } from '../../contexts/channelContext/ChannelContext'; const CustomChannelHeader = () => { const { channel, loading } = useChannelContext(); return loading ? ( <View> <Text>Channel is loading...</Text> </View> ) : ( <View> <Text>Channel ID: {channel.cid}</Text> <Text> There are currently {channel.state.watcher_count} people online </Text> </View> ); }; <View> <Chat client={chat}> <Channel channel={dataChannel}> <CustomChannelHeader /> <MessageList /> <MessageInput /> </Channel> </Chat> </View>;