React Native internals

So far we have toiled away on the JavaScript side of things, but we are now going to go a little deeper into creating custom functionality that interacts with the underlying OS.

But before we start writing code, we need to clarify some concepts - mainly how React Native works under the hood, and how it communicates with native code and modules.

React Native and native UI#

At the start of the course we said that React Native works by translating your React components into native UI components, thereby achieving greater performance than web alternatives.

Although this is true, this is a high-level abstraction, so a more concrete definition is that React works with its own set of native components (usually prefixed with RCT). A brand-new React Native project will work within a RCTRootView, and this view contains your entire app.

However this view is just another iOS/macOS view, and it can be embedded within other native views and existing apps. As a matter of fact, large apps already do this, for example, Instagram embeds React Native views in several parts of their apps (mostly the non-performance critical parts). These type of apps are called brownfield apps.

The React Native bridge#

Now that explains how your React components are translated into the native layer, but there is one more mechanism we need to pay attention to - the React Native bridge.



Start a new discussion. All notification go to the author.