TalkJS React Native SDK
Official TalkJS SDK for React Native
@talkjs/react-native module contains native code, and hence does not support Expo managed workflows. To build with Expo's managed workflow, you can use @talkjs/expo, which does not contain native code and excludes features that depend on native code. Alternatively, if you would like to use
@talkjs/react-native in combination with Expo, you can either create an Expo Development build, or use the Expo Prebuild system to add native code to your Expo project. In both cases you can make use of the hosted Expo Application Services (EAS) Build service for building app binaries.
What is TalkJS?
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.
Note: React Native CLI does not autolink libraries with native modules when those libraries are transitive dependencies. So you have to explicitly install the SDK's peer dependencies as shown below for the native modules to be loaded correctly
npm install @talkjs/react-native @notifee/react-native @react-native-community/push-notification-ios @react-native-firebase/app @react-native-firebase/messaging react-native-webview
yarn add @talkjs/react-native @notifee/react-native @react-native-community/push-notification-ios @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/react-native';
const TalkjsRn = require('@talkjs/react-native');
Then follow our React Native guide to start using TalkJS in your project.
TalkJS is fully forward compatible
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.
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.
- Update dependencies.
- Changed behaviour when
onSelectConversationprop 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
- Fix a bug with notifications not sent by TalkJS being displayed twice.
onCustomConversationActionprops. These are intended to replace the methods with the same names. The methods have been deprecated. This change was made to ensure that this SDK's interface matched the
- Deprecated the
offmethod in both
- (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
Viewwill be used in the empty areas around the TalkJS UI.
- Add support for passing data to themes in both
- Upgraded dependencies.
- Changes the type of the
NotificationPressedEventto indicate if the user pressed the notification while the app was in the foreground or background. NOTE: In iOS this property is always true since, if the app was in the background, iOS will open the app first before calling the foreground event handler. The background event handler is never called in iOS in this case.
- 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 when trying to display notifications on Android when the app has previously been killed.
- Fix bug in Android with the app not opening when a notification is clicked.
- Fix bug in Android that caused the errors:
Attempted to assign to readonly propertywhen using React Native version 0.70 and below.
Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()in Android when attempting to use the SDK without enabling push notifications. With this fix, you no longer need to setup Firebase plugins in gradle if you don't intend to use push notifications
(BREAKING CHANGE): Added
@react-native-async-storage/async-storageas a peer dependency. If you don't already depend on the package be sure install it by running:
npm install @react-native-async-storage/async-storageor
yarn add @react-native-async-storage/async-storagedepending on your package manager
- Added support for Custom Message Actions.
- A loading component can now be passed as a prop to
ConversationListand 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
sendMessagewhere a message would get sent multiple times in certain scenarios.
- Fix bug with
- 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
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
For iOS, add the following to your
<string>Messages shown to your user when the microphone is accessed for the first time</string>
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.
- Fix Notifee display notification error.
With this release, we have updated the SDK'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 upgrading the TalkJS SDK should also upgrade the peer dependencies accordingly. For yarn users, you may have to update the packages individually as shown:
yarn upgrade @notifee/react-native@^5.3.0 @react-native-community/push-notification-ios@^1.10.1 @react-native-firebase/app@^14.11.0 @react-native-firebase/messaging@^14.11.0 react-native-webview@^11.21.2
These libraries are defined as peer dependencies rather than dependencies since they contain native code and currently, React Native does not auto link transitive dependencies.
The new version of the notifee library also eliminates the need to add the local maven repository manually to your project. You can remove the section below. (Your app will still build and run if you don't remove it)
- Fix "Chat not found" error when joining as Guest.
- Fix regression in the support of devices with iOS 14 and lower.
- Fix Invariant Violation error due to transitive dependencies not being loaded.
To ensure the SDK's peer dependencies' native modules are loaded correctly, you have to explicitly install them as direct dependencies for your app/project. This is to ensure React Native CLI can autolink them. Below is how you'd accomplish that:
npm install @notifee/react-native @react-native-community/push-notification-ios @react-native-firebase/app @react-native-firebase/messaging react-native-webview
yarn add @notifee/react-native @react-native-community/push-notification-ios @react-native-firebase/app @react-native-firebase/messaging react-native-webview
- Fix "Chat not found" bug when creating a new conversation.
When upgrading to this version, you'll need to update your
android/build.gradle file by adding the
following block to the repositories section of allprojects:
// ... you may have other items before the "repositories" section.
// ... you will already have some local repositories defined ...
// ADD THIS BLOCK
- Improved Android Notifications. They are now shown as Conversations and grouped accordingly. Images sent will also appear in the notifications.
- Added more configuration options on Android Channels (Reference).
- Improved Error Reporting.
- Add support for Guest Access through the addition of
asGuestprop in Chatbox.
- Enable capturing of keyup events in Chatbox through the
- Added the methods:
oneOnOneIdto also accept
registerPushNotificationHandlersto add support for iOS Permissions.
- Fix bug when user and/or conversation synchronization were disabled.
- The following props in ConversationList:
- The following props in Chatbox:
- 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