EMQ Sponsors Open Source Summit Europe 2024 | Register Now →

How to Use MQTT in The React Native Project

Chuanbiao Ou
Jun 23, 2022
How to Use MQTT in The React Native Project

React Native is Facebook’s open-source cross-platform mobile application development framework, a derivative of React for the native mobile application platform, which supports both iOS and Android platforms. React Native uses Javascript, similar to HTML JSX, and CSS to develop mobile applications, allowing technical staff familiar with web front-end development to start working on mobile application development with a minimal learning curve. React Native also offers performance and experience close to that of native applications.

MQTT is a lightweight IoT messaging protocol based on a publish/subscribe model that enables stable transmission over severely constrained hardware devices and low-bandwidth, high-latency networks. With its easy implementation, QoS support, and small message size, it has been widely used in the IoT industry.

This article focuses on the use of MQTT in React Native projects to connect, subscribe and unsubscribe, and send and receive messages from clients to MQTT brokers.

Learn more: How to use MQTT on Android.

Create a New React Native Project

Here is an example of creating a project named, RNMQTTDemo, in the macOS development environment and iOS application platform. Refer to Setting up the development environment for details.

After the project is created, execute the following commands to install the required dependencies in the project root environment.

npm install @react-native-async-storage/async-storage @rneui/base @rneui/themed

Install the MQTT Client Module

npm install react_native_mqtt

react_native_mqtt is an MQTT client module used for the React Native project, which supports iOS and Android.

How to Use MQTT Client Module

Connecting to an MQTT Server

We use the free public MQTT server provided by EMQ, which is based on the MQTT cloud of EMQX. The server access information is as follows:

  • Broker:
  • TCP Port: 1883
  • Websocket Port: 8083

Open Manufacturing Hub
A Practical Guide to MQTT Broker Selection
Download this practical guide and learn what to consider when choosing an MQTT broker.
Get the eBook →

Create a client instance

  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  sync : {}
const options = {
  host: '',
  port: 8083,
  path: '/testTopic',
  id: 'id_' + parseInt(Math.random()*100000)
client = new Paho.MQTT.Client(, options.port, options.path);

Connect to the MQTT server

  connect = () => {
      { status: 'isFetching' },
      () => {
          onSuccess: this.onConnect,
          useSSL: false,
          timeout: 3,
          onFailure: this.onFailure


  subscribeTopic = () => {
      { subscribedTopic: this.state.topic },
      () => {
        client.subscribe(this.state.subscribedTopic, { qos: 0 });


  sendMessage = () =>{
    var message = new Paho.MQTT.Message( + ':' + this.state.message);
    message.destinationName = this.state.subscribedTopic;


  unSubscribeTopic = () => {
    this.setState({ subscribedTopic: '' });

Running the project

The complete RNMQTTDemo project is located at:

In the project root environment, create two new terminal windows, and execute the following commands:

npx react-native start
npx react-native run-ios

After that you will see the application run in the iOS emulator, where the client ID is displayed at the top, as follows:

MQTT React Native

MQTT Connection Test

We will use the MQTT 5.0 client tool - MQTTX to perform the relevant tests. Create a connection named react-native-demo, use the default values for all configuration items, click the connect button, and add a subscription with the topic name, testTopic, after a successful connection, as follows:



Click the CONNECT button in the APP, and the interface will be displayed as below. After a successful connection, the content of the ClientID line at the top will turn green, indicating that the MQTT server has been successfully connected.

React Native connect MQTT


Enter the topic you want to subscribe to. Here, we take testTopic as an example. Then, click the SUBSCRIBE button. The interface after subscription will be displayed, as follows:

React Native MQTT subscribe


Enter the content of the message to be published, click the PUBLISH button after the input is finished, and the messages received under the present subscribed topic will be listed at the bottom, among which the message with a black background is sent by the present client. The ID of the present client is id_67485, and the interface is shown, as follows:

React Native MQTT publish

At the same time, under the react-native-demo connection of MQTTX, we will also publish some messages to the testTopic topic. The messages published by client ID id_67458 to the topic can also be seen, which is displayed, as follows:



Click the UNSCRIBE button in the APP. Then, proceed to post a message with { "msg": "hello test" } to the testTopic topic on MQTTX with the following display:


After unsubscribing from the testTopic topic, no message will be received from MQTTX for this topic { "msg": "hello test" }.

React Native MQTT unsubscribe


At this point, we have finished building an MQTT app on the iOS platform using React Native, implementing features such as connecting the client to the MQTT server, subscribing to topics, sending and receiving messages, and unsubscribing.

With React Native, developers can use standard iOS platform components and develop apps that perform nearly as well as native apps. The seamless cross-platform allows teams to work faster, while simply saving changes during development, as shown by the actual results in the iOS simulator. Efficient, near-native performance, hot reloading, and broad community support make React Native the best choice for many mobile app developers. Combining React Native with MQTT protocol and MQTT cloud service, users are also able to develop various interesting and innovative apps.

Next, you can check out The Easy-to-understand Guide to MQTT Protocol series of articles provided by EMQ to learn about MQTT protocol features, explore more advanced applications of MQTT, and get started with MQTT application and service development.


Try EMQX Cloud for Free
A fully managed, cloud-native MQTT service
Get Started →

Related Posts

Oct 29, 2020Shifan Yu
How to use MQTT in the Electron project

This article introduces how to use MQTT in the Electron project, and implement the connection, subscription and messaging, etc of MQTT.

Feb 9, 2024Shifan Yu
How to Use MQTT in The React Project

This article introduces how to use MQTT in the React project, and implement the connection, subscription and messaging, etc of MQTT.