.webp)
Working With Native Modules
The goal of this workshop is to show participants how to write native modules that work well with React Native. We’ll show how to write such a module using Swift and Kotlin. Participants will learn how to bridge not only the APIs but also the native views that are ready to be used in JavaScript.
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.
