Why native features differentiate mobile apps in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the module that allows access to native device features in React Native.

React Native

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

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

ADeviceInfo

BReactNative

CNativeModules

DNativeFeatures

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent module name like 'NativeFeatures'.

Confusing 'ReactNative' with the module for native features.

The NativeModules object in React Native provides access to native device features.

2fill in blank

medium

Complete the code to call a native method named 'getBatteryLevel' from NativeModules.

React Native

NativeModules.[1].getBatteryLevel();

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

ABatteryManager

BBatteryLevel

CBatteryInfo

DBatteryStatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'BatteryLevel' as a module name instead of a method.

Confusing 'BatteryStatus' with the correct module name.

The native module is usually named BatteryManager to manage battery-related features.

3fill in blank

hard

Fix the error in the code to correctly use a native feature to vibrate the device.

React Native

import { Vibration } from 'react-native';

Vibration.[1](1000);

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

Avibrate

BstartVibration

CvibrateDevice

Dvibration

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'vibrateDevice' or 'startVibration'.

Using property names instead of method names.

The correct method to vibrate the device is vibrate.

4fill in blank

hard

Fill both blanks to create a native event listener for app state changes.

React Native

import { AppState } from 'react-native';

AppState.[1]('change', [2] => {
  console.log('App state is', [2]);
});

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

AaddEventListener

BremoveEventListener

Cstate

DnextState

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'removeEventListener' instead of 'addEventListener'.

Using generic parameter names like 'state' instead of 'nextState'.

Use addEventListener to listen for changes, and the callback parameter is commonly named nextState.

5fill in blank

hard

Fill all three blanks to create a native module call that returns device info asynchronously.

React Native

import { NativeModules } from 'react-native';

async function getDeviceInfo() {
  const info = await NativeModules.[1].[2]();
  console.log(info.[3]);
}

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

ADeviceInfo

BfetchInfo

Cmodel

DgetInfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetchInfo' instead of 'getInfo' as the method name.

Accessing a wrong property like 'device' instead of 'model'.

The native module is DeviceInfo, the method to call is getInfo, and the device model is accessed via the model property.