Why native modules extend capabilities in React Native - Test Your Understanding

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'

ANativeModules

BNativeUI

CNativeBridge

DNativeAPI

Attempts:

3 left

💡 Hint

Common Mistakes

Using NativeUI or NativeBridge which do not exist.

Trying to import from other packages.

The NativeModules object is used to access native modules in React Native.

2fill in blank

medium

Complete the code to call a native method named 'getDeviceName'.

React Native

NativeModules.DeviceInfo.[1]()

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

AfetchName

BgetDeviceName

CdeviceName

DretrieveName

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like fetchName or deviceName.

Trying to access properties instead of calling a method.

The method to get the device name is called getDeviceName in the native module.

3fill in blank

hard

Fix the error in the code to correctly import and use a native module.

React Native

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

NativeModules.DeviceInfo.getDeviceName();

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

ANativeModules

BDeviceInfo

CNativeBridge

DNativeAPI

Attempts:

3 left

💡 Hint

Common Mistakes

Importing DeviceInfo directly which is not exported.

Using wrong import names like NativeBridge.

You must import NativeModules from 'react-native' to access native modules.

4fill in blank

hard

Fill both blanks to create a native module call that returns a promise.

React Native

NativeModules.DeviceInfo.[1]().then([2] => {
  console.log([2]);
});

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

AgetDeviceName

BdeviceName

Cname

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of method names.

Using variable names that do not match the promise result.

The method getDeviceName returns a promise. The result is captured in the result variable.

5fill in blank

hard

Fill all three blanks to define and export a simple native module in JavaScript.

React Native

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

const MyModule = {
  [2]: () => 'Hello from native!'
};

export default [3];

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

ANativeModules

Bgreet

CMyModule

DNativeBridge

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong import names.

Not exporting the module correctly.

We import NativeModules (even if unused here), define a method greet, and export the module as MyModule.