Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native - reload do nothing

I just started with React Native. I have my smartphone connected and after react-native run-android I can see "Hello World" on the screen. But when I change "Hello World" to something else, save the file, and then tap on the reload command on my device (after shaking phone), I can't see any changes. I need to react-native run-android again to see new things. I am working on Windows 10. Also build takes a lot of time. I have read similar things, but didn't find any reasonable solution. Can anyone help?

Also: Sometimes when I tap Reload then I need to press enter in packager server terminal, to reload view, but changes don't appear.

like image 689
krzyhub Avatar asked Oct 26 '16 23:10

krzyhub


1 Answers

I had the same issue and found several solutions. The following is working for me:

To enable life reloading with the >0.29 react-native-versions

  1. go to file: yourProjectFolder//node_modules/react-native/local-cli/server/server.js
    • Commend the line (62): process.exit(11) -> //process.exit(11)

About Point 2: I am not sure since when the solution of 2.1. is needed but i think ~ react-native v.33. Please correct this if someone knows exactly. For you just look if you find the index.js at the 2. or 2.1. path.

  • 2.1 (Older Path of React-Native FileWatcher index.js) Go to file: yourProjectFolder//node_modules/react-native/node_modules\node-haste\lib\FileWatcher\index.js"

  • 2.2 (Newer Path of React-Native FileWatcher index.js) Go to file: yourProjectFolder\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index.js

STEP 1 for 2.1 + 2.2:

  • Increase at the top of the index.js file: MAX_WAIT_TIME=120000 > MAX_WAIT_TIME=360000
  • Change function (_createWatcher) to:

STEP 2 for 2.1 (Older Path of index.js)

key: '_createWatcher',
    value: function _createWatcher(rootConfig) {
        var watcher = new WatcherClass(rootConfig.dir, {
            glob: rootConfig.globs,
            dot: false
        });

        return new Promise(function (resolve, reject) {

        const rejectTimeout = setTimeout(function() {
            reject(new Error([
                'Watcher took too long to load',
                'Try running `watchman version` from your terminal',
                'https://facebook.github.io/watchman/docs/troubleshooting.html',
                ].join('\n')));
        }, MAX_WAIT_TIME);

        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
    });
}

STEP 2 for 2.2 (Newer Path of index.js)

_createWatcher(rootConfig) {
    var watcher = new WatcherClass(rootConfig.dir, {
        glob: rootConfig.globs,
        dot: false
      });

    return new Promise(function (resolve, reject) {

        const rejectTimeout = setTimeout(function() {
          reject(new Error([
            'Watcher took too long to load',
            'Try running `watchman version` from your terminal',
            'https://facebook.github.io/watchman/docs/troubleshooting.html',
          ].join('\n')));
        }, MAX_WAIT_TIME);

        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
    });
}

This solution worked for me. Hope I could help you and correct me if I am wrong.

like image 116
Jonathan Stellwag Avatar answered Oct 13 '22 00:10

Jonathan Stellwag