React Native on XCode Beta 8.0: how to fix initial build error
React Native is nowadays one of the most popular choices for creating cross-platform mobile apps combining the power of React and native APIs, and also is a VIP repository on Github (counting more than 37000 stars at the moment), but clearly it is still pretty far from the goal of the 1.0.0 version.
This means that sometimes you developers need to tinker with some parts of the projects generated by the npm package to make it work, but that basically happens with every beta application.
The latest issues I experienced with React Native took me some time to find a decent solution, and given the fact that many questions on StackOverflow are related to this problem, I’ve decided to write the simplest solution I’ve come up with.
Environment
First things first:
- Mac OS version: El Capitan 10.11.6 (you may have problems installing XCode 8.0.0 Beta on a lower version)
- node -v: v6.5.0
- npm -v: v3.10.3
- react-native-cli -v: 1.0.0
- react-native@0.32.0
Now, this issue (related to a RCTWebSocket’s error inside the “ios” folder in the react native project) exists due to the fact that the newest XCode version adds some default flags before the first compilation, and React Native hasn’t kept up with these latest changes yet. Let’s help the developers then, waiting for an official solution from the React Native Team at Facebook!
Project setup
Simply run the same ol’ terminal commands:
$ react-native init YourAwesomeProject
$ cd YourAwesomeProject
$ react-native run-ios
Now, here’s the log I had (not that ugly ** BUILD FAILED ** at the end):
You get the same problem if you try to run your iOS app directly from XCode either.
Enough, what’s the solution?
Here’s how to fix this annoying problem! Start by opening your project on XCode, then:
- head over to the RTCWebSocket project (in the TARGETS section)and double click it;
- in the build settings tab, select both “All” and “Combined” views
- look for “Apple LLVM 8.0 — Custom compiler flags”
- in the “Other C/C++/Warning flags” subsection just double right click and click, select the list entries and delete them tapping on the “minus” icon (please see the video below)
- click the run button (or press ⌘+R)
- you’re done!