Why native modules extend capabilities in React Native - Publishing Best Practices

Build & Publish - Why native modules extend capabilities

Performance Impact

Using native modules in React Native apps helps keep the app smooth and fast. Native code runs directly on the device's hardware, so it can handle heavy tasks like camera access, sensors, or complex calculations without slowing down the user interface. This helps maintain a steady 60 frames per second (fps) for smooth animations and interactions. It also reduces battery drain because native code is more efficient than JavaScript for certain operations.

💻

How to Optimize

To keep your app running at 60fps, use native modules only for tasks that need direct hardware access or high performance. Avoid doing heavy work in JavaScript when native code can do it faster. Also, minimize the communication between JavaScript and native code because crossing this bridge too often can cause delays. Batch calls and use asynchronous methods to keep the UI thread free.

App Bundle Size and Startup Time

Adding native modules increases your app's binary size because you include extra native code libraries. This can add a few megabytes depending on the module. However, this trade-off is usually worth it for better performance and access to device features. To reduce startup time, load native modules lazily only when needed instead of at app launch.

iOS vs Android Differences

On iOS, native modules are written in Swift or Objective-C and integrate with React Native via Objective-C bridges. On Android, native modules use Java or Kotlin and connect through Java bridges. Both platforms require proper setup and permissions for hardware access. iOS apps need code signing and provisioning profiles for native modules, while Android apps require signing with a keystore. The review process for native code can be stricter on iOS, so test carefully.

Store Review Guidelines

• Ensure native modules do not access private APIs or restricted device features.
• Request only necessary permissions and explain their use clearly to users.
• Follow Apple's Human Interface Guidelines and Google's Material Design for UI consistency.
• Test for crashes and memory leaks caused by native code to avoid rejection.
• Sign your app properly with valid certificates and keys for both platforms.

Self-Check Question

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

• You might be calling native modules synchronously on the main thread, blocking UI rendering.
• Too many bridge calls between JavaScript and native code causing delays.
• Loading large native libraries at startup instead of on demand.

Key Result

Native modules in React Native improve app performance by running critical code directly on the device, enabling smooth 60fps UI and efficient hardware access, but require careful optimization and adherence to platform store guidelines.

Practice

1. Why do React Native apps use native modules?

easy

A. To make the app slower and less efficient

B. To write all app code in JavaScript only

C. To avoid using any native platform code

D. To access device features not available in JavaScript

Solution

1. Step 1: Understand React Native limitations

   JavaScript in React Native cannot access all device hardware or native libraries directly.

2. Step 2: Role of native modules

   Native modules bridge JavaScript with native platform code to access those features.

3. Final Answer:

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

4. Quick Check:

   Native modules = access device features [OK]

Hint: Native modules add device features JavaScript lacks [OK]

Common Mistakes:

• Thinking native modules replace JavaScript code
• Believing native modules slow down the app
• Assuming native modules are optional for all features

2. Which of the following is the correct way to import a native module in React Native?

easy

A. import { NativeModules } from 'react-native';

B. import NativeModules from 'react-native';

C. require('NativeModules');

D. import NativeModules from 'native-modules';

Solution

1. Step 1: Recall React Native import syntax

   NativeModules is a named export from 'react-native', so it must be imported with curly braces.

2. Step 2: Check each option

   import { NativeModules } from 'react-native'; uses correct syntax with curly braces; others are incorrect or invalid module names.

3. Final Answer:

   import { NativeModules } from 'react-native'; -> Option A

4. Quick Check:

   Correct import uses curly braces [OK]

Hint: Use curly braces to import named exports [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using wrong module names
• Using require without assignment

3. What will the following React Native code output if the native module 'DeviceInfo' returns the device name 'Pixel 5'?

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

DeviceInfo.getDeviceName((name) => {
  console.log('Device:', name);
});

medium

A. Device: Pixel 5

B. Device: undefined

C. Error: getDeviceName is not a function

D. Device: null

Solution

1. Step 1: Understand native module callback

   The native module 'DeviceInfo' calls the callback with the device name 'Pixel 5'.

2. Step 2: Check console.log output

   The callback logs 'Device: Pixel 5' to the console.

3. Final Answer:

   Device: Pixel 5 -> Option A

4. Quick Check:

   Callback logs device name correctly [OK]

Hint: Callbacks print native data as expected [OK]

Common Mistakes:

• Assuming synchronous return instead of callback
• Expecting undefined if native module not linked
• Confusing function names or parameters

4. You wrote this code to use a native module but get an error: TypeError: NativeModules.CameraModule.getPicture is not a function. What is the most likely cause?

medium

A. You forgot to import React

B. JavaScript syntax error in your code

C. The native module is not properly linked or registered

D. You used the wrong variable name for NativeModules

Solution

1. Step 1: Analyze the error message

   The error says the function does not exist on the native module object.

2. Step 2: Understand native module linking

   If the native module is not linked or registered correctly, its functions won't be available in JavaScript.

3. Final Answer:

   The native module is not properly linked or registered -> Option C

4. Quick Check:

   Linking issues cause missing native functions [OK]

Hint: Check native module linking if functions missing [OK]

Common Mistakes:

• Assuming import errors cause this
• Ignoring native build steps
• Confusing variable names with linking problems

5. You want to create a React Native app that uses a native module to access the phone's biometric sensor for fingerprint authentication. Which of the following is the best approach?

hard

A. Write all biometric code in JavaScript without native modules

B. Use a native module to connect JavaScript with the platform's biometric API

C. Use only React Native UI components without any native code

D. Use a web API inside a WebView for biometric access

Solution

1. Step 1: Identify biometric sensor access needs

   Biometric sensors require native platform APIs not accessible directly from JavaScript.

2. Step 2: Choose the correct integration method

   Native modules bridge JavaScript with native biometric APIs for secure and efficient access.

3. Step 3: Evaluate other options

   JavaScript alone or WebView cannot access biometric hardware securely or at all.

4. Final Answer:

   Use a native module to connect JavaScript with the platform's biometric API -> Option B

5. Quick Check:

   Native modules enable hardware access [OK]

Hint: Use native modules for hardware features like biometrics [OK]

Common Mistakes:

• Trying to access hardware only with JavaScript
• Ignoring security and platform API requirements
• Using WebView for native hardware access