How to actually use Socket.io in React Native

Official websocket support landed in React Native core in October. If you want to use socket.io with React Native you need to hack around socket.io a bit because the client was originally built for the browser, and since the React Native runtime isn’t a browser, it won’t work right out of the box.

Previously you might have run into this guide which outlined a couple of the gotchya’s. However, there are two problem with the method proposed in that guide:

1. You can’t use the debugger. WTF! This turns developing a React Native app from fun to a nightmare really quick.
2. You aren’t actually using websockets! You’re using the ajax long-polling fallback built in to Socket.io.

Here’s how we are actually using socket.io in React Native to communicate over websockets with Feathers.

Edit #1: A PR to engine.io that fixes this was merged a while ago but we’re still waiting on a socket.io release.

Edit #2: Socket.io v1.5.1 has been released and has the fix to engineio-parser, so you don’t need to set window.navigator anymore. You should also be able to import io from 'socket.io-client/socket.io' now.

Now you can actually have speedy real-time React Native apps using socket.io. Happy coding! Big thanks to Cory Smith for helping me figure this out! We both banged our heads against this for a while.

I’m one of the creators of Feathers — a minimalist real-time JavaScript framework. With Feathers we’ve made it easy to build real-time apps in both the browser and React Native. It’s kind of like Meteor but much more flexible and works seamlessly with React Native. If you’re interested in learning more you can check out our Medium publication or the docs.