Socket file structure with react native

Question

Hello everyone I am working on socket.io and react native and this is my first application for both. I am looking for a file structure or system design to work.

Now I have a file structure, in which first there is a:

 -splash screen
 -login screen
 -Main screen
 -Network screen: Here the live location will be emitted and a location event 

will be listened to map to the map on this page.

In the splash screen, there is a useState to check the user if it's present in my persistant storage or not. If yes then setUser to that and load the Main screen and if not then useState(null) and load the login.

Now my app has to use socket.io for live location tracking and stuff. I would like to give the example of Uber.

I am not sure how to do that. If I put a socket connection with setState like I did with user then I mean how to arrange the events and files and connection. For now I have made a folder called socket and these are the contents.

 -context: Here I have created a context where I am giving socket, setSocket to all the children screens because I think that's the best way but I it's not working. 
 -storage: Here I have saved the socket object into the persistent storage for future use(I don't know if this step is correct)
 -connection: Here I have specified the connections like socket.on('connect') and other stuff
 -useSocket: This is my custom socket hook which I can call and get the socket and stuff

Now the thing is:

1. Android closes the socket when ideal or you make app sleep. When you will open open it after a sleep, the useEffect will not be called as it's called on the first reload
2. useState(socket) does not make any sense because the socket object is modified and setSocket happens when the app loads first time or user did logout basically when its null. When there is socket it's better to have socket.socket.connect();

I hope I am able to explain my problem.

I want to show connection lost screen on socket lost and when connected, start where we left. Working on the client order and showing and receiving location. But I am not sure if how I think is correct or not?

Here is my code of the mentioned things:

Storage file(inside socket folder)

    import * as SecureStore from 'expo-secure-store';
    
    const key = 'socket';
    
    const storeSocket = async socket => {
        try{
            await SecureStore.setItemAsync(key, socket);
        } catch(error) {
            console.log('Error storing the socket',error);
        }
    }
    
    const getSocket = async () => {
        try{
            return await SecureStore.getItemAsync(key);
        } catch(error) {
            console.log('Error getting the socket',error);
        }
    }
    
    const removeSocket = async() => {
        try{
            await SecureStore.deleteItemAsync(key);
        } catch(error) {
            console.log('Error removing the socket', error);
        }
    }
    
    export default {
        getSocket,
        storeSocket,
        removeSocket,
    };

context file(inside socket folder)

import React from 'react';

const SocketContext = React.createContext();

export default SocketContext;

useSocket() my custom hook(inside socket folder)

import { useContext } from 'react';

import SocketStorage from './storage';
import SocketContext from './context';
import { io } from "socket.io-client";

import { socket_host } from '../config/network';
import AuthStorage from '../auth/storage';

export default useAuth = () => {
    const {socket, setSocket} = useContext(SocketContext);

    const connectSocket = async () => {
        if(socket == null) {
            const token = await AuthStorage.getToken();
            let newSocket = io(socket_host, {auth: {token: token}});
            await SocketStorage.storeSocket(newSocket);
            setSocket(socket);
        } else if(!socket.connected) {
            socket.socket.connect();
        } else {
            //socket is already connected and working. Do nothing.
        }
    };

    const logout = async () => {
        setSocket(null);
        await SocketStorage.removeSocket();
    };

    return { socket, setSocket, connectSocket, logout };
}

connection file(inside my socket folder)

module.exports = (socket) => {
    socket.on('connect', () => {
        console.log("Socket Connected");
    });
    socket.on('disconnect', () => {

    });
};