React-Native on WSL, Crunching Cruncher failed on valid *.png file.

[ThaJay]

I want to develop with React-Native on WSL.

After installing all the dependencies
https://facebook.github.io/react-native/docs/getting-started.html (select linux)

Everything is in place, I even have android studio running through VcXsrv (although it does have memory errors; #1479, #1403, #922, #851, these issues make me think a fix is inbound. Not needed to build react-native apps anyway.)

PS> bash
$ react-native init test
$ cd test
$ react-native run-android

results in:

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugResources'.
> Crunching Cruncher abc_btn_rating_star_on_mtrl_alpha.png failed, see logs

I don't know why Crunching Cruncher errors on perfectly valid files. They are put in place by react-native init itself. Will provide the logs I'm asked for.

Additional Information

• React Native -v tells me I'm not inside a React Native directory. after I let it init and cd in there.
• tried on react-native 0.39.2 and 0.36.0
  Crunching Cruncher failed on WSL facebook/react-native#11483

I don't have my work laptop at hand atm but I can check the windows build later. It's the latest slow ring build from 5 days ago.

[stehufntdev]

Thanks for reporting the issue. Can you please take a strace of the failing command so we have more information for triage? The contributing directions have the steps under 7 and 8 - https://github.com/Microsoft/BashOnWindows/blob/master/CONTRIBUTING.md.

[peterlau]

This is not a direct solution to your problem, but I've found a reasonably smooth workflow for working with react-native on WSL. Realistically, you'll want to install the native Windows Android Studio/SDK to use the Intellij IDE and the emulator anyway. The trick is to separate out the Gradle based Android compile.

Workflow:

1. All project setup and package management performed in WSL with npm/yarn. react-native-cli installed globally in WSL. No need for a duplicate windows binary node/npm stack.

2. Don't use react-native run-android, instead compile and deploy from cmd using gradlew.bat debugInstall, or with the Creator's Update, you can do this from inside your bash shell /mnt/c/Windows/System32/cmd.exe /C gradlew.bat installDebug. The gradle wrapper can be found in the /android directory inside the project. Don't use the unix gradlew script.

3. Once the APK has been assembled and uploaded to your device or emulator, run the debug server from within WSL using the command react-native start.

I've tested this out with some fairly complex projects using multiple native Android components. Hope this helps.

[PhilT]

@peterlau thanks for sharing this. I managed to get up and running with this setup. One thing that got me being new to Android and gradle was that you have to be in the android folder to run gradlew with the installDebug task.

[peterlau]

No problem! One thing I forgot to mention (for anyone wanting to replicate this workflow) is of course you'll need to have your react-native/android project set up on your windows file system (/mnt/c) where it is visible to native windows programs - I have it symlinked from my ~/workspace for convenience

[dlimx]

@peterlau, how would you do debugging?

edit: I figured out Reactotron. adb reverse tcp:8081 tcp:8081 works as the default.

[elhe26]

Hi @peterlau. I did all that and it's still not working yet. When I run "react-native start" from wsl on vs code, the server starts but doesn't pass from the following message:

"Metro Bundler ready.

Loading dependency graph, done."

[peterlau]

Sounds like your bundler is ready but not getting any requests from the app. Have you enabled your tcp tunnel as @dlimx has suggested?

[williscool]

All have react native running consistently on WSL

Check out my notes on it here

facebook/react-native#16798 (comment)

Would love to help get

react-native run-android

across the finish line on WSL,

[therealkenc]

This one is sitting in the same spot it was in January 2017. Needs (1) CLI repro steps from clean install (2) the failure mode and (3) a threaded strace log in a gist. From the looks of your react-native link it probably deserves a new issue tracker. The OP on this one was some kind of build fail that never got attention for lack.