Connection failed – trying to connect to the mosquitto broker using React native

I tried to bind MQTT with the react native. When trying to connect to the broker, when I run my code, After a few minutes I get the following error:

here is the error Object { “errorCode”: 7, “errorMessage”: “AMQJS0007E Socket error:undefined.”, “invocationContext”: undefined, }

import init from 'react_native_mqtt'
import AsyncStorage from '@react-native-async-storage/async-storage'

 init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  reconnect: true,
  sync : {
  }
});
 
   constructor(){
    super();
    this.onConnect = this.onConnect.bind(this)
    const client = new Paho.MQTT.Client('52.11.11.11', 1883, "clientId-" + parseInt(Math.random() * 100, 10));
    client.connect({ 
      onSuccess: this.onConnect,
      userName: "user",
      password: "pass",
      onFailure: (e) => {console.log("here is the error" , e); }

    });

    this.state = {
      message: [''],
      client,
      messageToSend:'',
      isConnected: false,
    };

  }

  onConnect = () => {
    const { client } = this.state;
    console.log("Connected!!!!");
    this.setState({isConnected: true, error: ''})
  };

Answer

We solved this by edit the mosquitto config file to either add a new listener port 8883 and to use the websocket protocol for that port https://stackoverflow.com/a/32309525/12166187