Native modules concept in React Native - Build, Publish & Deploy

Build & Publish - Native modules concept

Performance Impact

Using native modules in React Native lets your app run heavy tasks directly on the device's native code (Java/Kotlin for Android, Swift/Objective-C for iOS). This improves speed and responsiveness because native code runs faster than JavaScript for certain operations.

However, calling native modules too often or passing large data between JavaScript and native code can slow down your app and cause frame drops below 60fps, making animations and interactions feel laggy.

Memory usage can increase if native modules hold onto resources without releasing them properly, which may lead to app crashes on low-memory devices.

💻

How to Optimize for 60fps

• Minimize the number of calls between JavaScript and native code. Batch data or events when possible.
• Use asynchronous native methods to avoid blocking the JavaScript thread.
• Release native resources promptly to avoid memory leaks.
• Profile your app using React Native's performance tools and native profilers (Android Studio Profiler, Xcode Instruments).
• Keep native module code efficient and avoid heavy computations on the main UI thread.

Impact on App Bundle Size and Startup Time

Adding native modules increases your app's binary size because you include extra native code and libraries. This can add a few megabytes depending on the module complexity.

Startup time may increase slightly if native modules initialize during app launch. Lazy loading native modules when needed can reduce this impact.

Keep native modules focused and avoid including unused native dependencies to keep your app size small and startup fast.

iOS vs Android Differences

• iOS: Native modules are written in Swift or Objective-C and integrated via the React Native bridge. iOS requires careful memory management and uses ARC (Automatic Reference Counting).
• Android: Native modules use Java or Kotlin. Android apps use the JNI bridge. Android devices vary widely in performance and memory, so testing on multiple devices is important.
• Debugging native modules differs: Xcode is used for iOS, Android Studio for Android.
• Permissions and lifecycle events may differ, so native modules must handle platform-specific behaviors.

Store Review Guidelines and Requirements

• Apple App Store: Native modules must comply with Apple's Human Interface Guidelines and privacy rules. Avoid private APIs and ensure proper permission usage.
• Google Play Store: Native modules must follow Google Play policies, including proper use of permissions and no background abuse.
• Both stores require apps to be signed with valid certificates for native code.
• Ensure native modules do not cause crashes or excessive battery drain, as this can lead to app rejection.

Self-Check: Your app takes 5 seconds to load this screen. What's likely wrong?

It is likely that native modules are initializing heavy tasks on the main thread during startup, blocking UI rendering. Another cause could be frequent synchronous calls between JavaScript and native code delaying the UI thread.

Check if native modules are loading unnecessary resources at launch or if there are memory leaks causing slowdowns.

Optimizing native module initialization and using asynchronous calls can help reduce load time and improve responsiveness.

Key Result

Native modules speed up React Native apps by running code natively, but require careful optimization to maintain 60fps, manage memory, and keep app size small. Platform differences and store rules must be followed for smooth publishing.

Practice

1. What is the main purpose of native modules in React Native?

easy

A. To access device features not available in JavaScript

B. To style components using CSS

C. To manage app navigation

D. To write UI components in JavaScript

Solution

1. Step 1: Understand React Native limitations

   JavaScript in React Native cannot access all device hardware or OS features directly.

2. Step 2: Role of native modules

   Native modules are written in native code to bridge this gap and provide access to those features.

3. Final Answer:

   To access device features not available in JavaScript -> Option A

4. Quick Check:

   Native modules = access device features [OK]

Hint: Native modules bridge JavaScript to device features [OK]

Common Mistakes:

• Thinking native modules are for styling
• Confusing native modules with navigation libraries
• Believing native modules are UI components

2. Which syntax correctly imports a native module named CameraModule in React Native?

easy

A. import CameraModule from 'react-native';

B. import { NativeModules } from 'react-native'; const { CameraModule } = NativeModules;

C. const CameraModule = require('CameraModule');

D. import CameraModule from 'NativeModules';

Solution

1. Step 1: Recall native module import pattern

   Native modules are accessed via the NativeModules object from 'react-native'.

2. Step 2: Correct destructuring syntax

   We import NativeModules, then extract CameraModule from it using const { CameraModule } = NativeModules.

3. Final Answer:

   import { NativeModules } from 'react-native'; const { CameraModule } = NativeModules; -> Option B

4. Quick Check:

   NativeModules destructuring = correct import [OK]

Hint: Always import NativeModules then destructure [OK]

Common Mistakes:

• Importing native module directly from 'react-native'
• Using require without NativeModules
• Wrong import source string

3. Given this code snippet, what will be logged if the native module method getBatteryLevel returns 85 asynchronously?

import { NativeModules } from 'react-native';
const { BatteryModule } = NativeModules;

BatteryModule.getBatteryLevel().then(level => {
  console.log('Battery level is: ' + level);
});

medium

A. Error: getBatteryLevel is not a function

B. Battery level is: undefined

C. Battery level is: [object Promise]

D. Battery level is: 85

Solution

1. Step 1: Understand asynchronous method call

   getBatteryLevel returns a Promise that resolves to 85.

2. Step 2: Analyze the .then callback

   The callback receives the resolved value 85 and logs 'Battery level is: 85'.

3. Final Answer:

   Battery level is: 85 -> Option D

4. Quick Check:

   Promise resolves to 85, logged correctly [OK]

Hint: Promises log resolved value inside .then [OK]

Common Mistakes:

• Logging the Promise object instead of resolved value
• Assuming synchronous return
• Confusing undefined with error

4. What is wrong with this native module usage code?

import { NativeModules } from 'react-native';
const { LocationModule } = NativeModules;

const location = LocationModule.getCurrentLocation();
console.log(location);

medium

A. getCurrentLocation likely returns a Promise but is used synchronously

B. getCurrentLocation is not imported correctly

C. NativeModules cannot be destructured

D. console.log cannot print location objects

Solution

1. Step 1: Identify asynchronous method usage

   Native module methods like getCurrentLocation usually return Promises.

2. Step 2: Check synchronous usage

   The code assigns the Promise to location and logs it immediately, not waiting for resolution.

3. Final Answer:

   getCurrentLocation likely returns a Promise but is used synchronously -> Option A

4. Quick Check:

   Async method used without await or .then [OK]

Hint: Async native methods need await or .then [OK]

Common Mistakes:

• Ignoring Promise nature of native methods
• Trying to destructure NativeModules incorrectly
• Assuming console.log can't print objects

5. You want to create a native module to access the phone's flashlight. Which steps are necessary to correctly use this native module in your React Native app?

hard

A. Write native code, but no need to register module or import it in JavaScript

B. Write JavaScript code only, import flashlight from 'react-native', call methods synchronously

C. Write native code for flashlight, register module, import NativeModules, call methods asynchronously

D. Use only React Native UI components, no native code needed

Solution

1. Step 1: Develop native code and register module

   You must write native code (Java/Swift/Obj-C) to control flashlight and register it with React Native.

2. Step 2: Import and call from JavaScript

   Import NativeModules, extract your flashlight module, and call its methods asynchronously.

3. Final Answer:

   Write native code for flashlight, register module, import NativeModules, call methods asynchronously -> Option C

4. Quick Check:

   Native code + registration + async calls = correct usage [OK]

Hint: Native module needs native code, registration, async JS calls [OK]

Common Mistakes:

• Skipping native code or registration
• Calling native methods synchronously
• Assuming React Native UI covers hardware access