React-Native's build system

How does React Native, React Native??

React Native is a pretty cool tool, although when learning it I encountered a rather strange difficulty curve:

Yeah, a bit strange :(

While this curve is just my own experience with React Native, I like to think I am not alone in this. Upgrades in particular were listed as the number one pain point for React Native developers in the State of React Native survey, with debugging coming in second. More recent tools in the React Native ecosystem (such as Expo) even seem designed to directly address these sorts of issues.

The truth is that React Native feels kind of magical to use, and that is both a blessing and curse. Writing app logic in React and being able to run it on a mobile device it awesome, but if you stray too far off the beaten path you might start to encounter weird bugs and need to use dark spells like BatchedBridge.spy(), UIManager.dispatchViewManagerCommand(), or even React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; to patch them up. (ok maybe not that last one)

As someone who came from the web dev side of things I was pretty reluctant to touch native code at first, but after working with it for a bit I gotta say it has helped make those earlier pain points a lot less annoying to deal with. Logbox errors seem less esoteric, upgrades seem (just a bit) less scary, and when something breaks it has made it a lot easier to know where to start looking.

Anyway, that’s enough preamble :) The main reason I made this post is because I wanna start sharing some of this weird React Native stuff on this blog, and I reckon a neat infographic would be a good place to start.

Please let me know in the comments below what you think (or if I goofed anything up lol), and if you enjoyed it then check back soon for a follow up where I wanna cover some stuff about the React Native Bridge system :)