by olofd

Use SignalR with React Native

133 Stars 50 Forks Last release: over 3 years ago (v1.0.3) 75 Commits 16 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


Connect to your SignalR-server with a active websocket-connection from react-native. Supports all error-handling and reconnection, including longpolling if needed.

Today the module shims the jQuery-dependency that signalr has. There is however an ongoing task upstream to remove this dependency.

Does NOT pull in the entire jQuery-library. Only shimes the few methods SignalR needs. Tested on iOS and Android. No known issues.


npm i react-native-signalr --save

There is an example server setup at (Also a http version but you must disable App security transport on iOS for that, read in issues) (no webite, only responds to signalr) If it's up and running, you can use it to debug against. You can find the source for that server under examples/server. The code below uses that server to setup a connection and communicate over websockets using signalr.


import React, { Component } from 'react';
import {
} from 'react-native';
import signalr from 'react-native-signalr';

class AwesomeProject extends Component {

componentDidMount() { //This is the server under /example/server published on azure. const connection = signalr.hubConnection(''); connection.logging = true;

const proxy = connection.createHubProxy('chatHub');
//receives broadcast messages from a hub function, called "helloApp"
proxy.on('helloApp', (argOne, argTwo, argThree, argFour) => {
  console.log('message-from-server', argOne, argTwo, argThree, argFour);
  //Here I could response by calling something else on the server...

// atempt connection, and handle errors
connection.start().done(() => {
  console.log('Now connected, connection ID=' +;

  proxy.invoke('helloServer', 'Hello Server, how are you?')
    .done((directResponse) => {
      console.log('direct-response-from-server', directResponse);
    }).fail(() => {
      console.warn('Something went wrong when calling server, it might not be up and running?')

}).fail(() => {

connection.connectionSlow(() => {
  console.log('We are currently experiencing difficulties with the connection.')

connection.error((error) => {
  const errorMessage = error.message;
  let detailedError = '';
  if (error.source && error.source._response) {
    detailedError = error.source._response;
  if (detailedError === 'An SSL error has occurred and a secure connection to the server cannot be made.') {
    console.log('When using react-native-signalr on ios with http remember to enable http in App Transport Security')
  console.debug('SignalR error: ' + errorMessage, detailedError)


render() { return ( Welcome to React Native! To get started, edit index.ios.js Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu ); } }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: {   textAlign: 'center', color: '#333333', marginBottom: 5, }, });

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.