React Native
Build chat into your React Native app with TalkJS
Quickly embed a customizable chat experience into your React Native app using the best chat APIs, feature-rich SDKs, and highly customizable components.
import React from 'react';
import * as TalkRn from '@talkjs/react-native';
function ChatComponent(props) {
const me = {
id: '123456789',
name: 'Alice',
email: 'alice@example.com',
photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
welcomeMessage: 'Hey there! How are you? :-)',
};
const other = {
id: '987654321',
name: 'Sebastian',
email: 'Sebastian@example.com',
photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
welcomeMessage: 'Hey, how can I help? https://google.com',
};
const conversationBuilder = TalkRn.getConversationBuilder(
TalkRn.oneOnOneId(me, other)
);
conversationBuilder.setParticipant(me);
conversationBuilder.setParticipant(other);
return (
<TalkRn.Session appId="<APP_ID>" me={me}>
<TalkRn.Chatbox conversationBuilder={conversationBuilder} />
</TalkRn.Session>
);
}
Hey, I'm trying to lift state up from a child component, but I'm getting undefined errors. Any ideas?
8m ago
Are you passing the state and the setState function correctly as props?
10m ago
I think so, yes.
7m ago
Maybe you're not binding the handler in the constructor. That might be the issue.
2m ago
Say something...
4
AI integration strategy
Andrea, Robert, Nikki, Filip
Andrea
10m ago
Hey team, how do you think we can integrate AI into our project?
Robert
8m ago
Maybe we can use AI for data analysis. It can help us find trends faster.
Nikki
7m ago
Good idea @Robert. What about automating customer support? AI chatbots could handle common queries.
Filip
2m ago
00:15
1x
Say something...
React Native SDK
Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with React Native.
Drop-in chat UI
Ship faster by using pre-built components that are highly customizable. Get up and running in just 10 minutes.
Fully-featured
All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.
Working with React Native and TalkJS
Ship faster, simplify your stack, and save on development costs by using the best chat APIs and a feature-rich React Native chat SDK. It's all you need to add a fully-featured chat into your app in minutes, instead of months.
<script>
// Synchronize user data and set up
import React from 'react';
import * as TalkRn from '@talkjs/react-native';
function ChatComponent(props) {
const me = {
id: '123456789',
name: 'Alice',
email: 'alice@example.com',
photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
welcomeMessage: 'Hey there! How are you? :-)',
};
const other = {
id: '987654321',
name: 'Sebastian',
email: 'Sebastian@example.com',
photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
welcomeMessage: 'Hey, how can I help? https://google.com',
};
const conversationBuilder = TalkRn.getConversationBuilder(
TalkRn.oneOnOneId(me, other)
);
conversationBuilder.setParticipant(me);
conversationBuilder.setParticipant(other);
return (
<TalkRn.Session appId='YOUR_APP_ID' me={me}>
<TalkRn.Chatbox conversationBuilder={conversationBuilder} />
</TalkRn.Session>
);
}
</script>
Because implementing TalkJS was as fast and easy as it was, we were able to greenlight and move this project along very quickly. Had we not chosen this path, the feature would have either been delayed, or shelved due to the resources needed to implement it.
Sean Elliot
Engineering Manager, Styleseat
Ready-made chat components you can customize
The React Native SDK comes with UI components that are forward-compatible and will keep working on future devices and new features. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.