Native modules concept in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of native modules in React Native?

Native modules allow React Native apps to:

A Convert JavaScript code into native machine code automatically

B Replace JavaScript code with HTML for better UI

C Run React Native apps only on web browsers

D Access platform-specific features not available in JavaScript

💡 Hint

Think about what JavaScript alone cannot do on mobile devices.

Native modules let React Native apps use device features like camera or sensors by bridging JavaScript with native code.

❓ ui_behavior

intermediate

Which behavior occurs when a native module method is called from React Native JavaScript?

When JavaScript calls a native module method, what happens next?

A The app reloads the JavaScript bundle to apply native changes

B The call is sent asynchronously to native code, which executes and returns a result

C The native module replaces the entire React Native UI instantly

D The JavaScript code pauses and waits synchronously for native code to finish

💡 Hint

Think about how JavaScript and native code communicate without freezing the app.

Native module calls are asynchronous to keep the app responsive while native code runs.

❓ lifecycle

advanced

What happens if a native module is not properly registered in React Native?

If you forget to register a native module, what is the likely outcome when you try to use it?

A JavaScript throws an error saying the module is undefined or not found

B The native module runs but returns empty data silently

C The app crashes immediately on startup

D The native module works but with degraded performance

💡 Hint

Consider what happens when JavaScript tries to access something that does not exist.

If a native module is not registered, JavaScript cannot find it and throws an error.

❓ navigation

advanced

How can native modules affect navigation behavior in React Native apps?

Which statement best describes native modules' role in navigation?

A Native modules disable React Native navigation libraries when used

B Native modules automatically handle all navigation without JavaScript code

C Native modules can provide custom native navigation components that JavaScript can control

D Native modules only affect UI styling, not navigation

💡 Hint

Think about how native modules can extend app features beyond JavaScript.

Native modules can expose native navigation controls that React Native JavaScript can invoke for smoother or custom navigation.

🔧 Debug

expert

What error will occur if a native module method returns a wrong data type to JavaScript?

If a native module method returns a number but JavaScript expects a string, what happens?

A JavaScript receives the number without error but may behave unexpectedly

B React Native throws a type mismatch error and crashes the app

C The native module automatically converts the number to a string

D The app silently ignores the returned value and continues

💡 Hint

JavaScript is loosely typed but unexpected types can cause logic bugs.

JavaScript does not crash on type mismatches but may produce wrong results if types differ from expectations.

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