Customization examples (Case 1–4)

1// src/screens/ChatScreen.tsx2<ChatProvider3  config={chatConfig}4  renderHeader={({title, subtitle, onBack, onVideoCall, videoCallGate}) => (5    <MyHeader6      title={title}7      subtitle={subtitle}8      onBack={onBack}9      onVideo={videoCallGate?.enabled ? onVideoCall : undefined}10    />11  )}12  renderConversationList={({conversations, renderDefaultItem, onEndReached, onRefresh, refreshing}) => (13    <FlatList14      data={conversations}15      renderItem={({item, index}) => renderDefaultItem({conversation: item, index})}16      onEndReached={onEndReached}17      onRefresh={onRefresh}18      refreshing={refreshing}19    />20  )}>21  <ChatNavigator />22</ChatProvider>

1// src/configs/chat.customization.config.ts2import type {ChatUiComponents} from '@realtimexsco/live-chat-react-native';3import {MyBubble, MyComposer, MyRow} from '../chat/custom';4 5/** Only register slots you want to customize. All others use package defaults. */6export const chatComponents: ChatUiComponents = {7  MessageBubble: MyBubble,8  MessageComposer: MyComposer,9  ConversationListItem: MyRow,10};

1// src/configs/chat.config.ts2import {chatComponents} from './chat.customization.config';3 4export const chatConfig = {5  // …credentials6  ui: {components: chatComponents},7};

1configureChat({2  ui: {3    styles: {4      conversationList: {title: {fontSize: 24, fontWeight: '800'}, fab: {borderRadius: 16}},5      chatRoom: {list: {backgroundColor: '#F7F7F7'}},6      message: {7        sender: {bubble: {backgroundColor: '#DCF8C6'}, text: {color: '#111'}},8        receiver: {bubble: {backgroundColor: '#FFFFFF'}},9      },10      composer: {inputWrap: {borderRadius: 24}},11    },12  },13});

1configureChat({2  ui: {3    conversationList: {title: 'Messages', showNewChatFab: false, showMentions: false},4    chatRoom: {5      header: {showSearch: false},6      composer: {richText: false}, // plain TextInput instead of the rich editor7      messageActions: {forward: false, thread: false},8      roomOptions: {report: false, canvas: false},9    },10    chatInfo: {dmTitle: 'Contact', dangerActions: {report: {show: false}}},11  },12});