Edit

Share via

Quickstart: Use the Chat SDK with React Native

  • Article

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.

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

  1. Install node-libs-react-native:

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

  2. Install stream-browserify:

    Console 
    npm install stream-browserify --save-dev

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

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

  4. Install react-native-url-polyfill:

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

  5. Update metro.config.js to use React Native-compatible Node Core modules:

    JavaScript 
    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:

    JavaScript 
    import 'node-libs-react-native/globals';
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

  7. Install Communication Services packages:

    Console 
    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

Next steps

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.