Native Modules
Here are a few of the most common cases:
- Accessing native platform features that React Native doesn’t support out-of-the-box, e.g. payments APIs
- Exposing components and functionality when adding React Native to an existing native app
- Using existing iOS and Android libraries, e.g. authentication libraries for a 3rd party service
- High-performance algorithms like image processing that are usually low-level and multi threaded
- Extremely high-performance views when running into performance issues with React Native views
When to use native modules
Using native modules should be the exception, rather than the norm. It’s generally best to write views, algorithms, and business logic in JavaScript when possible.The JavaScript we write is almost completely cross-platform, and updating to new versions of React Native is usually low effort. Native modules, on the other hand, must be written per platform, and can be time-consuming to update since they depend on both the native platform APIs and React Native’s APIs. Additionally, we can’t use the convenient Expo preview app once we start working with native code– we have to either initialize a new project with react-native init, or we have to eject our existing app using expo eject. In the short term, it’s often faster to bridge existing components than to re-write them in React Native.
When we decide we need a native module, we should first check if there’s an existing open source implementation. We’ll likely find an npm package for common use cases such as taking photos, playing videos, and displaying maps.It’s very important to read the installation instructions, as setup for native modules can vary. Most native modules on npm come with two sets of instructions, one for automatic setup using react-native link, and one for manual setup.
react-native-link
The command react-native link can often integrate native modules automatically.Library authors can configure the various paths and settings used by this command to integrate their native code.However,react-native link only handles the most common cases, so many native modules come with custom setup instructions beyond this. Custom setup instructions usually involve manually modifying iOS and Android native code.
Manual setup
If you’re building a hybrid app, it’s likely your directory structure and code will differ somewhat from the structure expected by react-native link. For this reason,native modules usually include a set of instructions for manually integrating the native code into your app. This generally involves modifying the Xcode and gradle build configurations to compile native libraries that were downloaded by yarn into the node_modules directory.
