Working with native modules

a. Introduction to native modules

In the beginning we’ll explain the concept of a native module. We’ll answer the question of how it is possible to run native code from JavaScript. Also we’ll show that we can bridge the native view components and combine them with React Native easily.

b. How JavaScript and native talk to each other

When we mix native and React Native components, we eventually find the need to communicate between these two worlds. In this section we’ll explain the concept of the bridge, show how it can affect app performance and what kind of data can be passed through it back and forth.

c. Why Swift and Kotlin?

The native code in React Native is mostly written in Objective C and Java. These languages have been available in the market for a very long time, but as time passes, industry standards change. It’s perfectly fine to use new languages for each platform – our goal is to present you with all the pros and cons.

d. Creating a native module in Swift

It’s time to get our hands dirty and write some code. We’ll create our first native module with Swift. Participants will learn how to invoke native functions from JS, export constants and send events from native to JS.

e. Creating a native module in Kotlin

After we finish the iOS part, we'll do the same with the Android platform. At the end we should have a universal module with a unified JavaScript API.

f. Exporting a native iOS view to JavaScript

Bridging native APIs is sometimes not enough. Often in real life you would like to consume some SDK and embed a predefined view in your JavaScript layout. We’ll show participants how to tackle these kinds of tasks.

g. Exporting a native Android view to JavaScript

Pretty much the same as with the module, we’ll copy what we did on iOS with Android. At the end we’ll have a cross-platform component, ready to be used in JavaScript.

h. Combining the RN and native screens

In this section we’ll show how to push a React Native screen to a native navigation stack. We’ll create a simple native layout and push the React Native view to the stack. We’ll also show how to pre-initialize the bridge to match the native navigation user experience.