Native modules concept in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the native module in React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

ANativeModuleLoader

BNativeModule

CNativeModuleManager

DNativeModules

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular form NativeModule instead of NativeModules.

Trying to import from other packages.

The correct import to access native modules in React Native is NativeModules from 'react-native'.

2fill in blank

medium

Complete the code to call a native method named 'showToast' from the native module 'ToastExample'.

React Native

NativeModules.ToastExample.[1]('Hello from React Native');

Drag options to blanks, or click blank then click option'

AshowToast

BdisplayToast

CtoastShow

DmakeToast

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like displayToast or makeToast.

Trying to call methods not exposed by the native module.

The native method to call is showToast as defined in the native module ToastExample.

3fill in blank

hard

Fix the error in the code to correctly export a native module in Android Java.

React Native

public class ToastModule extends ReactContextBaseJavaModule {
  public ToastModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String [1]() {
    return "ToastExample";
  }
}

Drag options to blanks, or click blank then click option'

AgetName

BgetModuleName

CmoduleName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using getModuleName or name instead of getName.

Not overriding the method at all.

The method to override to provide the module name is getName().

4fill in blank

hard

Fill both blanks to create a native module method in Java that sends an event to JavaScript.

React Native

private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
  reactContext.getJSModule([1].class).emit([2], params);
}

Drag options to blanks, or click blank then click option'

ADeviceEventManagerModule.RCTDeviceEventEmitter

BeventName

CDeviceEventManagerModule

DRCTEventEmitter

Attempts:

3 left

💡 Hint

Common Mistakes

Using incomplete class names or wrong event emitter interfaces.

Confusing event names with class names.

To send events, use getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) and call emit with the event name.

5fill in blank

hard

Fill all three blanks to define a native module method in Swift that can be called from React Native.

React Native

@objc([1])
class [2]: NSObject {
  @objc func [3]() {
    print("Native method called")
  }
}

Drag options to blanks, or click blank then click option'

AToastModule

CshowToast

DdisplayToast

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the module and class.

Using method names not matching the native module interface.

The @objc attribute names the module ToastModule, the class is ToastModule, and the method is showToast.

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