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:

    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/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.