Official TalkJS SDK for React Native (Expo)
Note: This module is NOT compatible with the Expo GO app since it relies on dependencies that have native modules.
TalkJS is a developer friendly chat API with a pre-built UI that is highly customisable. You can build a chat feature in minutes instead of months.
With TalkJS, you can create chat features that boost user engagement, retention, and conversion rate.
Don't hesitate to let us know if you have any questions about TalkJS.
expo install @talkjs/expo @notifee/react-native @react-native-firebase/app @react-native-firebase/messaging react-native-webview
You can import the library in one of the following ways:
ES6 / TypeScript:
import * as TalkjsRn from '@talkjs/expo';
CommonJS:
const TalkjsRn = require('@talkjs/expo');
Then follow our React Native guide to start using TalkJS in your project.
We promise to never break API compatibility. We may at times deprecate methods or fields, but we will never remove them. If something that used to work stops working, then that's a bug. Please report it and we'll fix it asap.
The package is being released in a beta state. The reason for this is that there are things that one can do with the TalkJS JavaScript SDK that aren't possible with the React Native SDK. We will release v1.0.0 of this package once the two SDKs are similar in terms of features. This however does not take away from our commitment to always maintain backward compatibility. So you can be assured that the package is stable for production use.
Note: These are only the changes that have an effect on the React Native package and its interface. TalkJS gets many improvements and fixes all the time. Consider subscribing to our changelog if you want to stay updated.
- Add
scrollToMessage
prop to theChatbox
component. - Add support for Apple Push Notification service (APNs).
- Make Firebase optional. You can opt to use either
expo-notifications
or@react-native-firebase/messaging
for push notifications on both Android and iOS.
- Fix registering of device tokens when a Session is used immediately after the app launches
- Improved error reporting.
- Fix issue that prevented having multiple Sessions active at the same time.
- Add
token
andtokenFetcher
props to Session. These props are part of our efforts at impoving identity verification and authentication.
See the reference documentation for full details on the technical requirements for the JSON Web Token(JWT).
- Due to the above new props, we have deprecated the
signature
prop on the Session component.
- Fix a regression with messages not getting marked as read when loading the Chatbox.
- Add
disableZoom
prop toChatbox
andConversationList
. This allows you to choose whether the user can pinch to zoom in and out of the UI. By default its value isfalse
and the usr can zoom into the UI.
- Upgraded dependencies
- Fix unnecessary warnings in iOS when calling
MessageField
methods.
- Fix bug in Android with push notifications not showing when sender's photo is not defined.
- Fix issue with
getNotificationHandler
being undefined.
- Fix errors not showing up in debug mode.
- The
ConversationList
no longer highlights the first conversation by default.
- Add push notification support. Note: For push notifications to iOS on Expo, we currently only support using Firebase.
- Add
onMessage
andunreadsOnChange
props toSession
component. - Add
hasValidCredentials
,clearPushRegistration
,setPushRegistation
andunsetPushRegistration
methods toSession
component.
- Upgraded dependencies.
- Removed bounce in iOS when the UI reached the edge of the content.
- Fix bug in
Session
when user synchronization is disabled. - Fix bug with
MessageField.setText
andMessageField.typeText
that would cause a crash given certain strings. - Fix bug with
HTMLPanel
not loading.
- Update dependencies.
- Changed behaviour when
onSelectConversation
prop is not given. Previously, in this scenario, clicking on a conversation would result in nothing happening. Now, the conversation will be selected and the TalkJS Inbox Mobile view will be shown.
- Fix a regression with
onSelectConversation
inConversationList
.
- Added
onLeaveConversation
,onCustomMessageAction
andonCustomConversationAction
props. These are intended to replace the methods with the same names. The methods have hence been deprecated. This change was made to ensure that this SDK's interface matched theReact SDK's
.
- Deprecated the
off
method in bothChatbox
andConversationList
.
- (iOS) Fixed a bug with videos in link previews automatically playing in fullscreen mode. The videos will now play inline instead.
- Make the WebView transparent. This means that whatever background colour you have applied to the parent
View
will be used in the empty areas around the TalkJS UI. - Add
getCurrentConversation
,onCustomConversationAction
,onLeaveConversation
andsendLocation
methods toChatbox
. - Add
leave
method toConversationBuilder
. - Add support for passing data to themes in both
Chatbox
andConversationList
.
- Upgraded dependencies.
- Changes the type of the
conversation
property inSelectConversationEvent
fromConversationBuilder
toConversationData
.
- Fix zooming on iOS. A previous workaround to prevent the UI from zooming in when clicking the MessageField on iOS resulted in zooming being disabled entirely. This update removes the workaround. Should you encounter the issue, set the MessageField's font size to 16px to fix it. The default TalkJS theme already uses a font size of 16px.
- Fix bug in Android that caused the errors:
Cannot assign to property '_injectJavaScript' which has only a getter
orAttempted to assign to readonly property
when using React Native version 0.70 and below.
- Added support for Custom Message Actions.
- A loading component can now be passed as a prop to
Chatbox
andConversationList
and it will be shown when the respective components are loading the UI. This is mostly useful on first load. Subsequent loads of the UI components are much faster.
- Upgraded dependencies.
- Fix bug in
sendMessage
where a message would get sent multiple times in certain scenarios. - Fix bug with
captureKeyboardEvents
prop inChatbox
not working. - Fix slow scrolling performance on the UI for Android devices.
- Fix bug when handling active notifications.
This is a minor update ensuring a great user experience when using voice messages, particularly on iOS.
To enable voice messages, you'll need to first enable it per role in the TalkJS dashboard. Then you'll need to specify the necessary permissions for both Android and iOS.
For Android, add the following to your AndroidManifest.xml
file:
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
For iOS, add the following to your Info.plist
file:
<key>NSMicrophoneUsageDescription</key>
<string>Messages shown to your user when the microphone is accessed for the first time</string>
- Improved UX on iOS when using audio messages.
-
Fix mark as read. This release ensures that messages are marked as read reliably as long as the chat is visible. If the app is in the background, or the chat is covered by the System UI (example: when receiving a call) then the messages won't be marked as read.
-
Fix rare crash on Android for SDK 28+ when the @react-navigation/native library is used.
With this release, we have updated the package's dependencies and peer dependencies to keep them up to date and also fix bugs in some of them.
As of npm v7, peer dependencies are installed by default so updating the TalkJS SDK should also update the peer dependencies accordingly. For yarn users, you may have to update the packages individually.
- Fix "Chat not found" error when joining as Guest.
- Fix regression in the support of devices with iOS 14 and lower.
- Fix "Chat not found" bug when creating a new conversation.
- Improved Error Reporting.
- Add support for Guest Access through the addition of
asGuest
prop in Chatbox. - Enable capturing of keyup events in Chatbox through the
captureKeyboardEvents
andonKeyup
props. - Added the methods:
getText
andtypeText
to MessageField.
- Changed
oneOnOneId
to also acceptUser
Objects. - Changed
showFeedHeader
default tofalse
.
- Fix bug when user and/or conversation synchronization were disabled.
- The following props in ConversationList:
feedConversationTitleMode
,thirdParties
,onBlur
andonFocus
. - The following props in Chatbox:
chatSubtitleMode
,chatTitleMode
,thirdParties
,translateConversations
,onBlur
andonFocus
.
- Fix bug in Chatbox when conversation synchronization was disabled.
- Added a ConversationList component.
- Added the messageField property to the Chatbox component
- Fix bug in ConversationBuilder.setAttributes that prevented setting a value to null or undefined after previously having given it a value.
- (iOS): Fix push notification registration token not getting received.
- (iOS): Fix zooming when messageField is clicked.
- Added the following components: Session, Chatbox and HtmlPanel.
- First release