Setting up a socket connection in React/native app. put the socket instance in the store and make sure there is only one socket. Then set up your socket listeners and actions to dispatch when events come through

actions.js

import connectSocket from './socketConfig';

export const INITIALIZE_SOCKET = 'INITIALIZE_SOCKET';
export const SOCKET_CONNECTED = 'SOCKET_CONNECTED';
export const SOCKET_DISCONNECTED = 'SOCKET_DISCONNECTED';
export const UPDATE_NETWORK_STATUS = 'UPDATE_NETWORK_STATUS';
export const SIGNED_OUT = 'SIGNED_OUT';


function socketInitialized(socket) {
  return { type: INITIALIZE_SOCKET, socket };
}


exports.initializeSocket = () => {
  return (dispatch, getState) => {
    const { user } = getState();
    const socket = connectSocket(user, dispatch);
    dispatch(socketInitialized(socket));
  };
};


exports.disconnectSocket = () => {
  return (dispatch, getState) => {
    const { socket } = getState();
    if (socket && socket.socket && socket.socket.io) {
      socket.socket.io.disconnect();
    }
  };
};


exports.reconnectSocket = () => {
  return (dispatch, getState) => {
    const { socket } = getState();
    if (socket && socket.socket && socket.socket.io) {
      socket.socket.io.connect();
    }
  };
};


exports.socketConnected = () => {
  return { type: SOCKET_CONNECTED };
};


exports.socketDisconnected = () => {
  return { type: SOCKET_DISCONNECTED };
};


exports.updateNetworkStatus = (networkStatus) => {
  return { type: UPDATE_NETWORK_STATUS, networkStatus };
};

reducer.js

import {
  INITIALIZE_SOCKET,
  SOCKET_CONNECTED,
  SOCKET_DISCONNECTED,
  UPDATE_NETWORK_STATUS,
  SIGNED_OUT,
} from './actions';


const initialState = {
  socket: null,
  connected: false,
  networkAvailable: null,
};


export default function socket(state = initialState, action) {
  switch (action.type) {

    case INITIALIZE_SOCKET:
      return Object.assign({}, state, {
        socket: action.socket,
        connected: false,
      });

    case SOCKET_CONNECTED:
      return Object.assign({}, state, {
        connected: true,
      });

    case SOCKET_DISCONNECTED:
      return Object.assign({}, state, {
        connected: false,
      });

    case UPDATE_NETWORK_STATUS:
      return Object.assign({}, state, {
        networkAvailable: action.networkStatus,
      });

    case SIGNED_OUT:
      return initialState;

    default:
      return state;
  }
}

socketconfig.js

import { socketRoot } from '../Shared/configs/apiConfig';
import { socketConnected, socketDisconnected } from './actions';
import { storeActiveFriends } from '../Friends/actions';

window.navigator.userAgent = 'react-native';
const io = require('socket.io-client/socket.io');

let socket = null;


/**
 * SOCKET LISTENERS
 * @param {Object} socket
 * @param {Object} user
 * @param {Object} actions
 */
function initializeListeners(socket, user, dispatch) {
  socket.on('connect', () => {
    dispatch(socketConnected());
  });

  /* When Socket disconnects */
  socket.on('disconnect', () => {
    dispatch(socketDisconnected());
  });

  /**
   * APP SOCKET LISTENERS ------------------------
   */
  socket.on('activeFriends', (friends) => {
    dispatch(storeActiveFriends(friends));
  });

  socket.on('error', (error) => {
    // Handle case where socket cant connect by retrying or something
  });
}

/**
 *                ****SOCKET.IO****
 * Method designed to return socket as a singleton.
 * Will configure and connect a socket only once.
 *
 * @param {Object} actions
 * @param {Object} user
 *
 */
export default function connectSocket(user, dispatch) {
  if (socket === null) {
    socket = io(socketRoot, {
      jsonp: false,
      query: `token=${user.token}`,
      transports: ['websocket'],
    });
    initializeListeners(socket, user, dispatch);

    socket.connect();
  }

  return socket;
}