Course: React Native Training
Topic: Understanding Native Modules and Third-Party Device Libraries
Course Link: React Native Training at JustAcademy
Demo Link: Register for a Course Demo
Website: JustAcademy Official Website
React Native is a framework used to build mobile applications for Android and iOS using JavaScript or TypeScript and React. It provides standard components such as View, Text, Image, ScrollView, and Pressable, along with APIs for common application requirements.
However, modern mobile applications frequently require advanced device capabilities such as Bluetooth communication, biometric authentication, specialized camera controls, location tracking, barcode scanning, native notifications, and integration with manufacturer-provided SDKs. These features may not be available through React Native's built-in APIs alone.
Native modules and third-party device libraries help React Native applications access these capabilities without requiring the entire application to be written in native languages.
A native module is a software component that exposes functionality implemented in native platform code to JavaScript or TypeScript. Native modules allow a React Native application to call Android or iOS functionality through a defined interface.
Android implementations may use Kotlin, Java, or C++, while iOS implementations may use Swift, Objective-C, or C++.
For example, an application may need to interact with a specialized hardware sensor. A native module can expose a JavaScript method that requests information from the sensor through the appropriate native API.
A third-party device library is a reusable package developed by an external developer, organization, or vendor. It provides functionality that can be integrated into an application instead of implementing everything from scratch.
Examples include libraries for camera access, device information, location, Bluetooth, biometric authentication, file management, maps, and notifications.
After studying this topic, learners should be able to:
A React Native application generally contains JavaScript or TypeScript application logic, React components, native platform code, and integration layers that connect the JavaScript runtime with native capabilities.
This layer contains application logic, screens, reusable components, event handlers, state management, and calls to APIs exposed by libraries.
For example, a button handler may call a device library to request a location or connect to an external peripheral.
The native platform layer provides operating-system APIs, device hardware access, native UI components, and external SDK integrations.
The native integration layer exposes native operations to JavaScript through the interface provided by the library or module. Depending on the package and React Native architecture, this may use legacy native-module mechanisms or newer technologies such as JSI and Turbo Native Modules.
React Native Application
|
v
JavaScript / TypeScript
|
v
Native Module or Device Library
|
+----------------------+
| |
v v
Android Native APIs iOS Native APIs
Kotlin / Java / C++ Swift / Objective-C / C++
| |
v v
Android Device iPhone / iPad Device
Hardware and OS Hardware and OSThis diagram illustrates the general concept. The exact architecture depends on the React Native version, the library, and the native integration approach.
| Feature | Native Module | Native Component | Third-Party Library |
|---|---|---|---|
| Purpose | Expose native functionality to JavaScript | Expose native views or UI functionality to React | Provide reusable application functionality |
| User interface | Usually not directly visible | Usually renders or controls a native view | May provide UI, APIs, or both |
| Implementation | Native code and a JavaScript interface | Native view implementation and React integration | JavaScript, native code, or both |
| Example | Native device information service | Specialized map or camera view | Camera, Bluetooth, analytics, or location package |
| Development effort | May require platform-specific coding | May require platform-specific UI development | Often reduced when a suitable package exists |
A third-party library is not necessarily a native module. Some libraries are written entirely in JavaScript, while others wrap native modules, expose native components, or combine JavaScript and native code.
A native module exposes methods that JavaScript can call. The native implementation performs the requested operation and returns a result or reports an error.
For example, a device information module may expose a method that retrieves a device model or an operating-system property.
// Conceptual example of calling a custom module
import NativeDeviceInfo from './NativeDeviceInfo';
async function loadDeviceInformation() {
try {
const information =
await NativeDeviceInfo.getDeviceInformation();
console.log('Device information:', information);
} catch (error) {
console.error(
'Unable to retrieve device information:',
error
);
}
}Note: This is an illustrative example. NativeDeviceInfo and getDeviceInformation() are not built-in React Native APIs. They must be implemented by the project or provided by a real library.
A synchronous operation returns its result immediately. An asynchronous operation completes later and commonly returns a Promise or emits an event.
Device operations such as Bluetooth scanning, location requests, file access, permission requests, and camera workflows often involve asynchronous behavior.
async function connectToDevice(deviceId) {
try {
const result = await DeviceLibrary.connect(deviceId);
console.log('Connection result:', result);
} catch (error) {
console.error('Connection failed:', error);
}
}This example assumes that the selected library provides a Promise-based connect() method. Always use the actual API documented by the package.
React Native has evolved its native integration architecture. Existing libraries may use legacy native modules, while newer libraries can use Turbo Native Modules as part of the New Architecture.
Legacy native modules use earlier React Native mechanisms to expose native methods and data to JavaScript. Many existing packages were originally created using these interfaces.
Some legacy packages continue to work with the New Architecture through compatibility mechanisms, but compatibility depends on the library and React Native version.
Turbo Native Modules are part of React Native's New Architecture. They use a typed JavaScript specification and Codegen to generate native interfaces. The generated interfaces help connect the JavaScript contract with the native implementation.
Potential advantages include stronger interface definitions, integration with JSI, and support for lazy module loading. Actual performance depends on the operation and implementation.
// specs/NativeGreeting.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule {
getGreeting(): string;
}
export default TurboModuleRegistry.getEnforcing<Spec>(
'NativeGreeting'
);This code defines a typed interface for a module named NativeGreeting. It is not a complete working module by itself. A native implementation, Codegen configuration, and platform registration are also required.
The Expo Modules API provides a way to create native modules and views using Swift on iOS and Kotlin on Android. It is designed to reduce boilerplate and provide a consistent development approach across supported platforms.
Inside a compatible Expo project, create a local native module with the following command:
npx create-expo-module@latest --localThe command creates a module structure within the application. Follow the prompts and generated files to implement the desired native behavior.
| Local Module | Standalone Module |
|---|---|
| Designed mainly for a single application | Designed for reuse across multiple applications |
| Lives within the app project | Maintained as a separate package |
| Does not need to be published to npm | Can be distributed through npm or another package workflow |
| Useful for application-specific native functionality | Useful for reusable internal or public libraries |
MyReactNativeApp/
├── modules/
│ └── my-module/
│ ├── android/
│ ├── ios/
│ ├── src/
│ ├── expo-module.config.json
│ └── index.ts
├── app/
├── package.json
└── app.jsonThe exact generated structure depends on the selected options and current Expo tooling.
Third-party device libraries are packages that simplify access to hardware, operating-system services, or external native SDKs. They help developers reuse functionality instead of implementing every platform-specific detail manually.
| Library Category | Typical Uses | Important Considerations |
|---|---|---|
| Camera and media | Photographs, video recording, document scanning | Permissions, camera availability, media storage |
| Location | Maps, nearby services, route tracking | Permission level, accuracy, battery use |
| Bluetooth | Connecting to compatible peripherals | Bluetooth profiles, OS restrictions, permissions |
| Biometrics | Fingerprint or face-based authentication | Hardware availability, enrollment, fallback |
| Notifications | Local reminders and remote notifications | Permission prompts, tokens, platform configuration |
| Maps | Maps, markers, routes, location visualization | API keys, service configuration, billing |
| File system | Reading and writing application files | Storage locations, URI handling, access rules |
| Audio and video | Audio recording, playback, media processing | Permissions, codecs, lifecycle management |
| Device information | Supported device and app details | Privacy, platform availability, data minimization |
| Analytics and crash reporting | Usage analytics and crash diagnostics | Privacy policies, consent, SDK configuration |
| Haptics | Vibration and tactile feedback | Device support and user preferences |
| Barcode scanning | Reading QR codes and barcodes | Camera permissions, supported formats |
Selecting a library requires evaluating compatibility, reliability, security, documentation, and long-term maintenance. A package that appears suitable may still be incompatible with the application's React Native version or native architecture.
For a library included in the Expo SDK, use the installation command recommended by Expo. For example, to install the camera package:
npx expo install expo-cameraThe Expo installer helps select a version compatible with the installed Expo SDK.
Some community packages use npm for installation. The following command is a generic example:
npm install package-nameReplace package-name with the actual library name. Check the package documentation because some packages recommend using npx expo install or require additional native setup.
When a library contains native code, the application may need to be rebuilt after installation or configuration changes. Reloading JavaScript alone does not insert new native code into an already-built application binary.
For a compatible Expo development project, an illustrative workflow is:
# Install a library using its documented command
npx expo install package-name
# Build and run on Android
npx expo run:android
# Build and run on iOS
npx expo run:iosThese commands are illustrative and the placeholder must be replaced with a real dependency when installing. A local iOS build generally requires macOS and Xcode.
Autolinking helps React Native discover supported native dependencies and connect them to the Android and iOS application projects. It reduces the manual linking that was required by many older packages.
No. A library may still require permissions, API keys, native configuration, a config plugin, a minimum deployment target, or manual steps. Always follow the instructions for the exact package version.
| Environment | Description | Library Considerations |
|---|---|---|
| Expo Go | A prebuilt application for running compatible Expo projects | Supports native libraries included in the Expo Go binary and JavaScript-only packages, but cannot add arbitrary custom native code to that binary. |
| Expo development build | A custom development application containing the native code needed by the project | Can support compatible custom native libraries after configuration and rebuilding. |
| Bare React Native | A project with direct management of native Android and iOS projects | Provides direct control over native dependencies and platform configuration. |
Important: Installing a native library does not automatically make it available inside Expo Go. If the library requires native code not included in Expo Go, use a compatible development build or another supported native build workflow.
A camera library can provide camera preview, photo capture, video recording, and other supported camera capabilities. The exact API depends on the selected package.
npx expo install expo-cameraimport React from 'react';
import { Button, Text, View } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';
export default function CameraExample() {
const [permission, requestPermission] = useCameraPermissions();
if (!permission) {
return <Text>Checking camera permission...</Text>;
}
if (!permission.granted) {
return (
<View>
<Text>Camera access is required for this feature.</Text>
<Button
title="Grant Camera Permission"
onPress={requestPermission}
/>
</View>
);
}
return (
<View style={{ flex: 1 }}>
<CameraView style={{ flex: 1 }} facing="back" />
</View>
);
}This example demonstrates permission handling and displaying a camera preview. It does not capture or save an image. Add the capture workflow using the current expo-camera API documentation.
Device information packages can expose supported information such as device model, operating-system version, application version, or device name. Exact functionality varies by library and platform.
A project may use a community package such as react-native-device-info. Verify its current installation instructions and compatibility before adding it.
npm install react-native-device-infoimport DeviceInfo from 'react-native-device-info';
async function logDeviceName() {
try {
const name = await DeviceInfo.getDeviceName();
console.log('Device name:', name);
} catch (error) {
console.error('Unable to retrieve device name:', error);
}
}This example illustrates the usage pattern. Check the selected package's current API documentation for exact method names, return types, platform restrictions, and native setup requirements.
Location libraries allow an application to access supported device location services. Location features may require permissions, device settings, and additional configuration for background tracking.
Bluetooth libraries allow applications to discover and connect to compatible peripherals. They are useful for IoT devices, fitness accessories, industrial hardware, and other connected products.
Android and iOS differ in Bluetooth permissions, scanning behavior, supported profiles, and background execution. Android permission requirements may also vary by operating-system version.
Always verify which Bluetooth profiles and devices are supported by the selected library. Test on physical devices because emulators and simulators may not reproduce actual hardware behavior.
Device libraries may require permission to use the camera, microphone, location, media library, Bluetooth, notifications, or other protected features.
async function startDeviceFeature() {
try {
const permission = await requestRequiredPermission();
if (!permission.granted) {
console.log('Permission was not granted.');
return;
}
await startNativeFeature();
} catch (error) {
console.error('Unable to start device feature:', error);
}
}requestRequiredPermission() and startNativeFeature() are placeholders, not built-in React Native methods. Replace them with the actual APIs from the selected library.
Native integrations can fail because a device does not support a feature, permission has been denied, a native dependency is missing, or configuration differs between platforms.
| Problem | Possible Cause | Recommended Solution |
|---|---|---|
| Native module is unavailable | Native dependency missing from the app binary or linking incomplete | Check installation, autolinking, configuration, and rebuild the application. |
| Works on Android but not iOS | Platform API differences or missing iOS configuration | Review iOS documentation and test on a physical device. |
| Permission request fails | Missing declaration, denied access, or incorrect setup | Verify platform settings and current permission state. |
| Build fails after installing a package | Version conflict or native dependency issue | Review build logs and verify package compatibility. |
| API returns no result | Unsupported hardware or unavailable information | Check the API contract and handle missing values. |
| Works in development but fails in release | Build configuration or missing release settings | Verify release configuration and test the release build. |
| External device disconnects | Connection instability or lifecycle changes | Handle disconnection events and reconnect safely when appropriate. |
| Native changes are not visible | Only JavaScript was reloaded | Rebuild the native application. |
Native modules and device libraries may access sensitive device capabilities and information. Developers should carefully evaluate package permissions, data collection, and security implications.
Native integrations can affect application responsiveness, memory usage, startup time, and battery consumption. The impact depends on the library and the way it is used.
import { useEffect } from 'react';
export function useDeviceEvents(deviceEvents) {
useEffect(() => {
const subscription = deviceEvents.addListener(event => {
console.log('Device event:', event);
});
return () => {
subscription.remove();
};
}, [deviceEvents]);
}This example illustrates the cleanup pattern. The actual event API and subscription return value depend on the library being used.
When no existing library meets an application's requirements, developers can implement a custom native module. The approach depends on the project's architecture and the native functionality needed.
MyReactNativeApp/
├── src/
│ ├── components/
│ ├── screens/
│ ├── services/
│ └── native/
├── specs/
│ └── NativeFeature.ts
├── android/
├── ios/
├── package.json
└── app.jsonThis is an illustrative structure. Follow the generated directory structure for the selected module system rather than forcing every native module into the same layout.
Project Objective: Build a React Native application that demonstrates the integration of device libraries through a simple interface.
src/
├── components/
│ ├── FeatureCard.tsx
│ └── PermissionStatus.tsx
├── screens/
│ ├── HomeScreen.tsx
│ ├── CameraScreen.tsx
│ ├── LocationScreen.tsx
│ └── DeviceInfoScreen.tsx
├── services/
│ ├── cameraService.ts
│ ├── locationService.ts
│ └── deviceInfoService.ts
└── types/
└── device.tsBy completing this project, learners will understand how device libraries expose native functionality, why native configuration may be required, how permissions affect device features, and how to structure maintainable native integrations.
Answer: A native module exposes functionality implemented in native platform code to JavaScript or TypeScript, allowing an application to access APIs or capabilities not directly available through its existing interfaces.
Answer: They are useful when an application needs operating-system APIs, specialized hardware access, external native SDKs, or custom features that existing React Native APIs and libraries do not provide.
Answer: It is a reusable package created by an external developer or organization that provides features such as camera access, Bluetooth, location, biometrics, or device information.
Answer: No. Some packages contain only JavaScript, while others wrap native modules, expose native UI components, or combine JavaScript with native code.
Answer: Autolinking helps React Native discover supported native dependencies and connect them to Android and iOS application builds, reducing manual linking work.
Answer: Turbo Native Modules are part of React Native's New Architecture. They use typed specifications and Codegen to generate native interfaces and support integration through JSI.
Answer: It is an API for creating native modules and views using Kotlin and Swift, with integration into Expo and React Native applications.
Answer: No. Expo Go contains a predefined set of native modules. A library requiring additional custom native code generally needs a compatible development build.
Answer: Native code must be compiled and included in the application binary. Reloading JavaScript alone cannot add missing native code to an existing binary.
Answer: Permissions control access to protected features such as the camera, microphone, location, and Bluetooth. Applications must request and handle the appropriate authorization before using these APIs.
Answer: Catch exceptions and rejected Promises, validate inputs, check permissions and platform support, display helpful messages, and log only appropriate diagnostic information.
Answer: Evaluate maintenance, compatibility, documentation, security, supported platforms, licensing, performance, and native configuration requirements.
Answer: A local module lives within one application, while a standalone module is maintained as a separate package for reuse across applications or distribution.
Answer: Hardware availability, sensors, Bluetooth, cameras, background execution, and permissions can behave differently from simulators or emulators.
Answer: They should verify compatibility, permissions, privacy disclosures, native configuration, release-build behavior, dependency health, error handling, and testing on supported devices.
Native modules and third-party device libraries enable React Native applications to access functionality beyond the standard JavaScript interface. They make it possible to integrate device hardware, operating-system APIs, and external native SDKs while keeping much of the application logic in JavaScript or TypeScript.
Successful integration requires choosing compatible libraries, following their setup instructions, configuring permissions, understanding the project's native architecture, rebuilding when native code changes, and testing on supported devices. When an existing package does not meet the requirements, developers can create custom modules using Turbo Native Modules or the Expo Modules API.
By mastering these concepts, React Native developers can build mobile applications that are more capable, secure, maintainable, and compatible with Android and iOS devices.
