I have a taxi app which connect through socket.io in order to receive events from driver side like location and responses.

The issue I face is that if I put the client app in background it will get disconnected after a while and I get the following messages in terminal

 ID context fcRzOWmBSQb3RWlUAAXQ
 LOG  DISCONNECTED ping timeout
 LOG  Is disconnected ping timeout
 LOG  DISCONNECTED ping timeout
 LOG  DISCONNECTED ping timeout
 LOG  Is disconnected ping timeout
 LOG  DISCONNECTED ping timeout
 LOG  Is disconnected ping timeout
 LOG  DISCONNECTED ping timeout
 LOG  Is disconnected ping timeout
 LOG  ID context reconnected undefined
 LOG  ID context reconnected undefined
 LOG  ID context reconnected BhjFYCZXf7BE8vEhAAXw
 LOG  ID context reconnected BhjFYCZXf7BE8vEhAAXw
 LOG  ID context BhjFYCZXf7BE8vEhAAXw
 LOG  ID context BhjFYCZXf7BE8vEhAAXw
 LOG  ID context BhjFYCZXf7BE8vEhAAXw
 LOG  ID context reconnected BhjFYCZXf7BE8vEhAAXw
 LOG  ID context BhjFYCZXf7BE8vEhAAXw

here is my SocketClient.js

export default class socketAPI {
  socket;

  connect(user, listener) {
    this.socket = io(BASE_URL, {
      query: `type=client&id=${user}`,
      reconnection: true,
      transports: ['websocket', 'polling'],
    });

    this.socket.on('connect', () => {
      listener(true);
    });

    this.socket.on('disconnect', reason => {
      console.log('DISCONNECTED', reason);
    });
  }

  disconnect(listener) {
    this.socket.disconnect(reason => {
      this.socket = null;
      listener(false);
    });
  }

  emit(event, data, listener) {
    if (!this.socket) {
      console.log('No socket connection. Emit event');
      return null;
    }

    this.socket.emit(event, data, listener);
  }

  on(event, listener) {
    if (!this.socket) {
      console.log('No socket connection. On event');
      return null;
    }

    this.socket.on(event, listener);
  }

  off(event, listener) {
    if (!this.socket) {
      console.log('No socket connection. On event');
      return null;
    }

    this.socket.off(event, listener);
  }
}

And this is the part from SocketContext.js where I make the connection

  useEffect(() => {
    socketClient.connect(client.id, () => {
      console.log('ID context', socketClient.socket.id);
      dispatch(updateSocketStatus(socketClient.socket.id));
    });
    socketClient.on('disconnect', isDisconnected => {
      console.log('Is disconnected', isDisconnected);
      dispatch(updateSocketStatus(null));
      if (isDisconnected) {
        socketClient.connect(client.id, () => {
          console.log('ID context reconnected', socketClient.socket.id);
          dispatch(updateSocketStatus(socketClient.socket.id));
        });
      }
    });
  }, [client]);