Use Chat SDK with React Native

This article describes how to set up the packages in the Azure Communication Services Chat JavaScript SDK to support chat in your React Native app. The following steps work for Azure Communication Services JavaScript Chat SDK 1.1.1 and later.

Set up the chat packages to work with React Native

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. Complete the following steps to install the packages that contain React Native ports of the Node Core modules required in @azure/communication-chat.

1. Install node-libs-react-native:

   npm install node-libs-react-native --save-dev
   

2. Install stream-browserify:

   npm install stream-browserify --save-dev
   

3. Install react-native-get-random-values:

   npm install react-native-get-random-values --save-dev
   

4. Install react-native-url-polyfill:

   npm install react-native-url-polyfill --save-dev
   

5. 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')
       }
   };
   }
   

6. 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';
   

7. Install Communication Services packages:

   npm install @azure/[email protected] --save
   
   npm install @azure/[email protected] --save
   
   npm install @azure/[email protected] --save
   

Next steps

This article described 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.