useContext with socket-io in React Native - react-native

Question

I want to create only one socket in my React native app, I use useContext to create an global socket. But when I update socket in child component, socket Provider context updated, but child isn't.
SocketContext.js
import React from 'react';
const SocketContext = React.createContext();
export const SocketProvider = SocketContext.Provider;
export const SocketConsumer = SocketContext.Consumer;
export default SocketContext;
App.js
const setSocket = newSocket => {
socket = newSocket;
// console.log('Set new socket: ', socket);
};
return (
<>
{completed && (
<SocketProvider value={{socket, setSocket}}>
<MainContainer />
</SocketProvider>
)}
</>
);
In Child component
const {socket, setSocket} = useContext(SocketContext);
console.log('Socket: ', socket); //Here socket always null
const initSocket = () => {
setSocket(io(props.url, {timeout: 10000, reconnection: false}));
// Update socket provider in here but socket in child not update
};
useEffect(() => {
console.log(socket);
if (!socket) {
initSocket();
}
}, []);
And I want to update socket in child component and all child component updated.
Thank you.

Answer 1

if you want to use one socket instance through out the app you can use this
and import socket whenever you want to use. check in useEffect if socket is disconnected the use setSocketToken method to reconnect
import { io } from "socket.io-client";
export const socket = io('socket_url', {
path: '/socket.io',
transports: ['websocket'],
upgrade: false,
auth: {
token: `Bearer null`
}
});
export const setSocketToken = async (token) => {
socket.auth.token = `Bearer ${token}`;
socket.disconnect().connect() //reconnect
}