React Native & Socket.io - cannot establish connection between app and server

I am building a chat app for android using React Native & Socket.io. The issue is that I can't establish a connection between the app and the server. It gives me a connection error saying Websocket Error.

I tried changing the App Socket Io URI to localhost: port (this gives transport error or timeout error), ip: port (this gives Websocket error), set diff options. Then tried using require syntaxes instead of import for the server. Then installed older versions React-native and socket.io & socket.io-client, still no luck! Then found an app repo from github, installed it, and tried running the app. same error. Also changed cleartextTrafficPermitted="true" in Android manifest file.

Node: v12.13.0

Testing on external devices:

• Moto E3(1s gen) -Android 6 Marshmallow.
• Redmi Note 7 Pro -Android 9 Pie

screenshot

SERVER:

    import express, { Application } from 'express';
    import { createServer } from 'http';
    import { listen, Server } from 'socket.io';
    
    // set port number
    const port = 7777;
    
    // set express
    const app: Application = express();
    
    // set express server
    const server = createServer(app);
    
    // listen express server updates on socket.io
    const io: Server = listen(server, {
        transports: ['websocket'],
        serveClient: false,
    });
    
    io.on('connection', (socket) => {
        console.log('connection is made');
        socket.emit('commEvent', { data: 'connectionSuccessful' });
        socket.on('disconnect', () => {
            console.log('connection disconnected');
        });
        socket.on('new-message', (data) => {
            console.log(data.message);
        });
    });
    
    // listen server updates on specified port
    server.listen(port, () => {
        console.log('Message app server listening on port:', port);
    });

SERVER: package.json

{
  "name": "message_app",
  "version": "1.0.0",
  "description": "Message app server.",
  "main": "index.js",
  "scripts": {
    "start": "node build/index.js",
    "watch": "nodemon src/index.ts",
    "test": "none",
    "build": "npm run lint && tsc-p",
    "lint": "eslint --fix --ext .ts ."
  },
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^2.3.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.6",
    "@types/socket.io": "^2.1.8",
    "@typescript-eslint/eslint-plugin": "^3.3.0",
    "@typescript-eslint/parser": "^3.3.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "nodemon": "^2.0.4",
    "prettier": "^2.0.5",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.5"
  }
}

APP:

import React, {useEffect} from 'react';
import {AppScreenStackNavProps} from '../../../Routes/App/AppRouteTypes';
import {View} from 'react-native';
import HomeRoutes from '../../../Routes/Home/HomeRoute';
import io from 'socket.io-client';

export const socket = io('http://192.168.1.38:7777', {
  transports: ['websocket'],
  jsonp: false,
});

socket.on('commEvent', (data: {data: string}) => {
  console.warn(data.data);
});

const HomeScreen = ({navigation}: AppScreenStackNavProps<'Home'>) => {
  navigation.setOptions({
    headerShown: false,
  });

  useEffect(() => {
    socket.connect();
    socket.on('connect', (con: any) => {
      console.debug('SOCKET: connected to socket server', con);
    });
    socket.on('error', (err: any) => {
      console.debug('SOCKET: errors ', err);
    });
    socket.on('connect_error', (err: any) => {
      console.debug('SOCKET: connect_error ---> ', err);
    });
  }, []);

  return (
    <>
      <View style={{flex: 1}}>
        <HomeRoutes />
      </View>
    </>
  );
};
export default HomeScreen;

APP: package.json

{
  "name": "message_app",
  "version": "1.0.0",
  "description": "Message app server.",
  "main": "index.js",
  "scripts": {
    "start": "node build/index.js",
    "watch": "nodemon src/index.ts",
    "test": "none",
    "build": "npm run lint && tsc-p",
    "lint": "eslint --fix --ext .ts ."
  },
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^2.3.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.6",
    "@types/socket.io": "^2.1.8",
    "@typescript-eslint/eslint-plugin": "^3.3.0",
    "@typescript-eslint/parser": "^3.3.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "https-localhost": "^4.6.0",
    "nodemon": "^2.0.4",
    "prettier": "^2.0.5",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.5"
  }
}