talkjs_react_native_chatbox_session_with_user_conversation.ts

1import React, { useCallback } from 'react';
2import { SafeAreaView, StyleSheet } from 'react-native';
3import * as TalkJS from '@talkjs/react-native';
4
5function App(): React.JSX.Element {
6  const me: TalkJS.User = {
7    id: '1',
8    name: 'Alice',
9    email: 'alice@example.com',
10    photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
11    welcomeMessage: 'Hey there! How can I help?',
12    role: 'default',
13  };
14
15  const other: TalkJS.User = {
16    id: '2',
17    name: 'Sebastian',
18    email: 'sebastian@example.com',
19    photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
20    welcomeMessage: 'Hey, how can I help?',
21    role: 'default',
22  };
23
24  const conversationBuilder = TalkJS.getConversationBuilder(
25    TalkJS.oneOnOneId(me, other)
26  );
27
28  conversationBuilder.setParticipant(me);
29  conversationBuilder.setParticipant(other);
30
31  return (
32    <SafeAreaView style={styles.container}>
33      <TalkJS.Session appId="YOUR_APP_ID" me={me}>
34        <TalkJS.Chatbox conversationBuilder={conversationBuilder} />
35      </TalkJS.Session>
36    </SafeAreaView>
37  );
38}
39
40const styles = StyleSheet.create({
41  container: {
42    flex: 1,
43  },
44});
45
46export default App;