title | titleSuffix | description | author | ms.author | ms.date | ms.topic | ms.service | ms.custom |
---|---|---|---|---|---|---|---|---|
Use the Chat SDK with React Native |
An Azure Communication Services quickstart |
Learn how to use the Azure Communication Services Chat SDK with React Native. |
ashwinder |
askaur |
11/30/2021 |
quickstart |
azure-communication-services |
mode-other |
In this quickstart, you set up the packages in the Azure Communication Services Chat JavaScript SDK to support chat in your React Native app. The steps described in the quickstart are supported for Azure Communication Services JavaScript Chat SDK 1.1.1 and later.
Currently, Communication Services chat packages are available as Node packages. Because not all Node modules are compatible with React Native, the modules require a React Native port to work.
After you initialize your React Native project, complete the following steps to make @azure/communication-chat
work with React Native. The steps install the packages that contain React Native ports of the Node Core modules that are required in @azure/communication-chat
.
-
Install
node-libs-react-native
:npm install node-libs-react-native --save-dev
-
Install
stream-browserify
:npm install stream-browserify --save-dev
-
Install
react-native-get-random-values
:npm install react-native-get-random-values --save-dev
-
Install
react-native-url-polyfill
:npm install react-native-url-polyfill --save-dev
-
Update metro.config.js to use React Native-compatible Node Core modules:
module.exports = { // ... resolver: { extraNodeModules: { ...require('stream-browserify'), ...require('node-libs-react-native'), net: require.resolve('node-libs-react-native/mock/net'), tls: require.resolve('node-libs-react-native/mock/tls') } }; }
-
Add the following
import
commands at the top of your entry point file:import 'node-libs-react-native/globals'; import 'react-native-get-random-values'; import 'react-native-url-polyfill/auto';
-
Install Communication Services packages:
npm install @azure/communication-common@1.1.0 --save npm install @azure/communication-signaling@1.0.0-beta.11 --save npm install @azure/communication-chat@1.1.1 --save
In this quickstart, you learned how to set up the required Communication Services packages to add chat to your app in a React Native environment.
Learn how to use the Chat SDK to start a chat.