Not able to connect using Sockjs-client and stompjs in ReactNative 0.76.6

[imrranbadshah]

Hi, I have followed https://stomp-js.github.io/faqs/2019/05/20/faqs.html before reporting and followed fixes from the closed issue , but nothing works,

am using RN 0.76.6

Below is my dependencies :

  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.6",
    "@stomp/stompjs": "^7.0.0",
    "sockjs-client": "^1.6.1",
    "text-encoding": "^0.7.0"
  },
 "devDependencies": {
   "@types/sockjs-client": "^1.5.4",
   "@types/text-encoding": "^0.0.40",
 }

Am trying to connect to a end point with https://<URL>, but nothing works, am not able to connect to the springboot end points

Below is my Code to connect

1. I installed and then textencoder in my index.js, also tried with app.tsx

import * as encoding from 'text-encoding';

global.TextEncoder = encoding;

2. in my app.tsx

import { Client, Stomp } from '@stomp/stompjs';
import SockJS from 'sockjs-client';

function App(): React.JSX.Element {
  const [stompClient, setStompClient]: any = useState(null);
  const [isSocketConnected, setIsSocketConnected] = useState(false);
  
useEffect(() => {
    initSocket()
    return () => {
      if (stompClient) {
        stompClient.deactivate(); // Clean up the connection on component unmount
      }
    };
  }, []);

 const initSocket = async () => {
    try {
       const endpoint = "https://endpoint_url:443"

      // const socket = new SockJS(`${endpoint}`, null, {
      //   // transports: ['websocket', 'xhr-streaming', 'xhr-polling'],
      //   // server: "https://endpoint_url",
      // });

      const socket = new SockJS(`${endpoint}`);
      console.log({ socket }, Stomp);

      const sClient = new Client({
        webSocketFactory: () => socket, // Use SockJS
        reconnectDelay: 5000, // Reconnect after 5 seconds
        heartbeatIncoming: 4000, // Heartbeat for incoming messages
        heartbeatOutgoing: 4000, // Heartbeat for outgoing messages
        forceBinaryWSFrames: true,
        appendMissingNULLonIncoming: true,
        logRawCommunication: true,
        connectHeaders: {},
        onChangeState: (state: any) => {
          console.log("%c onChangeState", "background: #ff000045;", state);
        }
      });

      sClient.debug = async (resp: any) => {
        console.log('STOMP Debug:', resp);
      };
      console.log("sClient", sClient)

      sClient.onConnect = async (frame: any) => {
        console.log('%c STOMP connected', 'background: #4caf50; color: white;', frame);
        setIsSocketConnected(true);
      };

      sClient.onDisconnect = (frame: any) => {
        console.log('%c STOMP disconnected', 'background: red; color: white;', frame);
        setIsSocketConnected(false);
        retryConnection();
      };

      sClient.onStompError = (frame: any) => {
        console.error('STOMP Error:', frame);
        setIsSocketConnected(false);
      };

      // Activate the connection
        sClient.activate();
        
      setStompClient(sClient);
    } catch (error) {
      console.error('Error initializing socket:', error);
    }
  };

also added clearText in manifest, but nothing either http or https both not connecting but the endpoint_url is working fine with other technologies.

Please help me with this anyone !.