Is it possible to combine React Native with socket.io

For those like me stumbling across this question looking how to integrate socket.io with react native.

Since React Native has supported websockets for a short time now, you can now set up web sockets really easily with Socket.io. All you have to do is the following

1. npm install socket.io-client
2. first import react-native
3. assign window.navigator.userAgent = 'react-native';
4. import socket.io-client/socket.io
5. in your constructor assign this.socket = io('localhost:3001', {jsonp: false});

So in all it should look like this after npm installing socket.io-client:

import React from 'react-native';// ... [other imports]import './UserAgent';import io from 'socket.io-client/socket.io';export default class App extends Component {  constructor(props) {    super(props);    this.socket = io('localhost:3001', {jsonp: false});  }  // now you can use sockets with this.socket.io(...)  // or any other functionality within socket.io!  ...}

and then in 'UserAgent.js':

window.navigator.userAgent = 'react-native';

Note: because ES6 module imports are hoisted, we can't make the userAgent assignment in the same file as the react-native and socket.io imports, hence the separate module.

EDIT:

The above solution should work, but in the case it doesn't try create a separate socketConfig.js file. In there import anything that is needed, including const io = require('socket.io-client/socket.io'); and having window.navigator.userAgent = 'react-native'; BEFORE requiring socket.io-client. Then you can connect your socket there and have all listeners in one place. Then actions or functions can be imported into the config file and execute when a listener receives data.

Now, if you want to use socket.io in your RN app, you must use this code:

if (!window.location) {    // App is running in simulator    window.navigator.userAgent = 'ReactNative';}// This must be below your `window.navigator` hack aboveconst io = require('socket.io-client/socket.io');const socket = io('http://chat.feathersjs.com', {  transports: ['websocket'] // you need to explicitly tell it to use websockets});socket.on('connect', () => {  console.log('connected!');});

Big thanks for Eric Kryski.

Short of a polyfill for the WebSocket API, you can create a native module that makes use of web-sockets and send events to Javascript using eventDispatcher.

On the Javascript side, you would subscribe to these events using DeviceEventEmitter.addListener.

For more information on using native modules, see the react-native doc on the topic