Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native SocketProtocol Error and TimeoutError

I can't seem to figure this out at all. When ever I open my React Native application I get these errors. The best I have found is that it's something to do with how the applications is being bundled. Any help would be much appreciated and upvoted! Thanks!

Error example

Errors from xCode

2016-06-16 17:21:50.160 [warn][tid:com.facebook.react.JavaScript] [TimeoutError: Event response for 'login' timed out]
2016-06-16 17:21:51.580 [warn][tid:com.facebook.react.JavaScript] [SocketProtocolError: Socket hung

Versions

   "react": "^15.1.0",  
   "react-native": "^0.27.2"  
   ... along with about 30 others

ios - AppDelegate.m

 jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

  /**
   * OPTION 2
   * Load from pre-bundled file on disk. The static bundle is automatically
   * generated by the "Bundle React Native code and images" build step when
   * running the project on an actual device or running the project on the
   * simulator in the "Release" build configuration.
   */

  // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];


  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"MyApp"
                                                  initialProperties:nil
                                                  launchOptions:launchOptions];
like image 691
im_benton Avatar asked Nov 09 '22 13:11

im_benton


1 Answers

After a long time, I realized it was actually my React Dev Tools and HMR. I had to update my Store Configure to the following:

OLD ----- (BELOW)

    import Immutable from 'immutable';
    import { Platform } from 'react-native';
    import { createStore, applyMiddleware, compose } from 'redux';
    import thunk from 'redux-thunk';
    import reducer from '../reducers';

    const middlewares = [thunk]; 

let enhancer;
if (__DEV__) {
  const installDevTools = require('immutable-devtools');
  installDevTools(Immutable);

  const devTools = require('remote-redux-devtools');
  enhancer = compose(
    applyMiddleware(...middlewares),
    devTools({
      name: Platform.OS,
      hostname: 'localhost',
      port: 5678
    })
  );
} else {
  enhancer = applyMiddleware(...middlewares);
}

NEW----- (BELOW)

import Immutable from 'immutable';
import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../reducers';

const middlewares = [thunk];

let enhancer = applyMiddleware(...middlewares);

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, enhancer);
  if (module.hot) {
    module.hot.accept(() => {
      store.replaceReducer(require('../reducers').default);
    });
  }
  return store;
}
like image 154
im_benton Avatar answered Nov 14 '22 21:11

im_benton