Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Few Line of Hack Code Make React-Native Run on Windows

#Few Line of Hack Code Make React-Native Run on Windows

While React-Native just add support of Android,yet officeally they just only support on OSX.

After a few hours of debugging, I find a simple way of let React-Native run on Windows.

Make sure all requirements were all setup following this:

Then initilize the project following this:

The react-native run-android should deploy the app into you phone or AVD

While using 'react-native start' to run the dev server you may get some error couse it runs a bash file, goto /node_modules/react-native/local-cli/run-package.js,and change it to

'use strict';

var path = require('path');
var child_process = require('child_process');

module.exports = function(newWindow) {
  if (newWindow) {
    child_process.spawnSync('open', [
      path.resolve(__dirname, '..', 'packager', 'launchPackager.command')
    ]);
  } else {
    child_process.spawn('node', [
        path.resolve(__dirname, '..', 'packager', 'packager.js'),
        '--projectRoots',
        process.cwd(),
      ], {stdio: 'inherit'});
  }
};

Skip the bash and run the nodejs script instead.

Then the problem shows, fix it, already make a pull request https://github.com/facebook/react-native/issues/2787

Finally get A blank Activity,try adb logcat fetch the error log find out that, while the app load js from

ip:8081/index.android.bundle?platform=android Then get moudle load error.

Because some the moudle path be resolve as "path\\path\\package",and while the were define where "path\path\package".

Goto project\node_modules\react-native\packager\react-packager\src\DependencyResolver\index.js

function defineModuleCode({moduleName, code, deps}) {
  deps = deps.replace(/\\\\/g,'\\');
  return [
    `__d(`,
    `'${moduleName}',`,
    `${deps},`,
    'function(global, require, module, exports) {',
    `  ${code}`,
    '\n});',
  ].join('');
}

Since the moudle system were a litte bit complicate, this may not be the best solution, and neet more test before a pull request,but I think it will get you play around.

@mkonicek

This comment has been minimized.

Copy link

@mkonicek mkonicek commented Sep 17, 2015

Awesome, if you send a pull request I can pull in someone working on the packager to review it.

@mqli

This comment has been minimized.

Copy link
Owner Author

@mqli mqli commented Sep 17, 2015

The infinite loop shows here
facebook/react-native#2787
I already send a pull request
facebook/react-native#2789

@BerndWessels

This comment has been minimized.

Copy link

@BerndWessels BerndWessels commented Sep 17, 2015

@mqli: This is awesome - it works.

Thank you so much.

@mkonicek: Please let us know when it will become part of the official React-Native package. I am pretty sure there are thousands of developers bound to develop on a Windows machine who can't wait using React-Native.

This is an exciting day for React-Native, lets become a huge community.

@danhanfry

This comment has been minimized.

Copy link

@danhanfry danhanfry commented Sep 19, 2015

Thank you.

Although there is a problem of red screen.

@luanped

This comment has been minimized.

Copy link

@luanped luanped commented Sep 21, 2015

I get an infinite loop with 'Fetching JS bundle' (on a grey background). Anyone else have this issue..?

@luanped

This comment has been minimized.

Copy link

@luanped luanped commented Sep 21, 2015

This is what I see on the cmd that I run packager.js (initially it detects request, but after building the dependency graph it stops responding)

React packager ready.
[8:36:23 PM] Building Dependency Graph
[8:36:23 PM] Crawling File System
[8:36:28 PM] request:/index.android.bundle?platform=android
[8:36:28 PM] find dependencies
[8:36:35 PM] request:/index.android.bundle?platform=android
[8:36:39 PM] request:/index.android.bundle?platform=android
[8:36:40 PM] Crawling File System (16536ms)
[8:36:40 PM] Building in-memory fs for JavaScript
[8:36:41 PM] Building in-memory fs for JavaScript (989ms)
[8:36:41 PM] Building in-memory fs for Assets
[8:36:42 PM] Building in-memory fs for Assets (937ms)
[8:36:42 PM] Building Haste Map
[8:36:42 PM] Building (deprecated) Asset Map
[8:36:42 PM] Building (deprecated) Asset Map (200ms)
[8:36:42 PM] Building Haste Map (558ms)
[8:36:42 PM] Building Dependency Graph (19022ms)

@yapcheahshen

This comment has been minimized.

Copy link

@yapcheahshen yapcheahshen commented Oct 4, 2015

thank you very much, it works on HTC 801e and Windows 8.1

@flyher

This comment has been minimized.

Copy link

@flyher flyher commented Oct 10, 2015

Thank you very much. but there is a problem of red screen.

@elsassph

This comment has been minimized.

Copy link

@elsassph elsassph commented Oct 20, 2015

I'm using bash on Windows (from msys-git) to run react-native start and it's working.

@L3V147H4N

This comment has been minimized.

Copy link

@L3V147H4N L3V147H4N commented Nov 6, 2015

There is no run-package.js in my project C:\Development\React\native\AwesomeProject\node_modules\react-native\local-cli

@marudy

This comment has been minimized.

Copy link

@marudy marudy commented Oct 22, 2016

Issue still exists and there is no run-package.js in my project .\node_modules\react-native\local-cli either.

Managed to work around it using git bash console, taking the idea from @elsassph

@NishantDesai1306

This comment has been minimized.

Copy link

@NishantDesai1306 NishantDesai1306 commented Oct 23, 2016

I am trying to develop a react-native app in Windows10, I am able to run app in my Android mobile but when the activity starts in my Mobile all I see is just white screen and just as marudy said i too can't find run-package.js in specified path. Version of react-native installed in my PC is 0.35.0

@santosh07401

This comment has been minimized.

Copy link

@santosh07401 santosh07401 commented Nov 26, 2016

Facing the same issue in Mac as NishantDesai mentioned

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment