Image, are native modules. There are also non-component native modules, like the
In this guide we'll briefly cover the steps involved in bridging a component.
Bridging an API is fairly formulaic, but may be difficult if you don't have native development experience.
Bridging a component
- Create a native UIView or Android View subclass
- Create a React ViewManager subclass that manages a pool of the view subclass
- Register the ViewManager subclass with React Native
These steps are essentially the same for iOS and Android.
Tip: be careful with names! The names of the annotations do matter. Replace "My" in the examples with the component name you want.
1. Create a native view subclass
This can be any view - there's nothing specific to React Native yet.
2. Create a ViewManager subclass
A ViewManager manages a pool of our View subclass from the previous step. Native views are reused as much as possible for better performance.
3. Register the ViewManager subclass
We need to let React Native know about our ViewManager by registering it.
4. Load the native module from JS
Once we've registered a ViewManager on the native side, we can instantiate the view as a React component.
Next, we need to pass props from JS to native:
Since React Native projects are in Obj-C & Java:
- Let Android Studio enable Kotlin
- Let Xcode add a bridging header
Want to learn React Native in-depth?