Complete ChatScreen example

1// src/screens/ChatScreen.tsx2import React from 'react';3import {Pressable, Text} from 'react-native';4import {5  ChatNavigator,6  ChatProvider,7  configureCalling,8  type ConfigureChatOptions,9  type RenderConversationItem,10} from '@realtimexsco/live-chat-react-native';11import {chatConfig} from '../configs/chat.config';12 13configureCalling({enabled: true}); // default; false hides calling everywhere14 15const config: ConfigureChatOptions = {16  ...chatConfig,17  fonts: {Regular: 'Inter-Regular', SemiBold: 'Inter-SemiBold', Bold: 'Inter-Bold'},18  theme: {colorMode: 'light', accent: '#124232', avatarShape: 'rounded', messageStyle: 'rounded'},19  queryParams: {branchId: '12'},20  ui: {21    conversationList: {title: 'Messages', fabBottomInset: 64, showMentions: true},22    chatRoom: {23      header: {showVoiceCall: true, showVideoCall: true},24      view: {showSenderAvatarsInGroups: true},25      composer: {placeholder: 'Type a message', richText: true, attachments: {audio: false}},26      messageActions: {forward: false},27      roomOptions: {report: false},28    },29    styles: {30      message: {31        sender: {bubble: {borderRadius: 14}},32        receiver: {bubble: {borderRadius: 14}},33      },34    },35  },36};37 38const renderConversationItem: RenderConversationItem = ({39  conversation,40  peer,41  unreadCount,42  isTyping,43  onPress,44}) => (45  <Pressable onPress={onPress} style={{padding: 16, flexDirection: 'row'}}>46    <Text style={{flex: 1, fontWeight: unreadCount ? '700' : '400'}}>47      {conversation.isGroup ? conversation.groupName || conversation.name : peer?.name}48      {isTyping ? ' · typing…' : ''}49    </Text>50    {unreadCount > 0 ? <Text>{unreadCount}</Text> : null}51  </Pressable>52);53 54export default function ChatScreen() {55  return (56    <ChatProvider57      config={config}58      withSafeArea={false}59      withGestureRoot={false}60      withToast={false}61      renderConversationItem={renderConversationItem}>62      <ChatNavigator withContainer={false} />63    </ChatProvider>64  );65}