Device info and haptics in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the DeviceInfo module from 'react-native-device-info'.

React Native

import [1] from 'react-native-device-info';

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

ADeviceInfo

BDevice

CInfo

DdeviceInfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or partial names like 'deviceInfo' or 'Device'.

Forgetting to import from 'react-native-device-info'.

The correct import is DeviceInfo from the package react-native-device-info.

2fill in blank

medium

Complete the code to get the device's unique ID using DeviceInfo.

React Native

const uniqueId = DeviceInfo.[1]();

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

AgetDeviceName

BgetSystemName

CgetUniqueId

DgetModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods like getDeviceName or getModel which return other info.

Forgetting the parentheses to call the function.

The method getUniqueId() returns the unique device ID.

3fill in blank

hard

Fix the error in the code to trigger a light haptic feedback using React Native's Haptics API.

React Native

import { Haptics } from 'react-native';

Haptics.[1]();

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

AimpactLight

BimpactLightAsync

Cimpact

DimpactLightFeedback

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method without 'Async' suffix which does not exist.

Incorrect import or method name casing.

The correct method is impactLightAsync() to trigger light haptic feedback asynchronously.

4fill in blank

hard

Fill both blanks to create a function that vibrates the device for 500 milliseconds using React Native's Vibration API.

React Native

import { Vibration } from 'react-native';

function vibrateDevice() {
  Vibration.[1]([2]);
}

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

Avibrate

BvibrateAsync

C500

D[500]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'vibrateAsync' which does not exist in React Native core.

Passing duration as an array instead of a number.

The vibrate method is used with a number argument for milliseconds. So Vibration.vibrate(500) vibrates for 500 ms.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps device info keys to their values only if the value is a non-empty string.

React Native

const deviceInfo = {
  [1]: DeviceInfo.[2](),
  [3]: DeviceInfo.getSystemVersion()
};

const filteredInfo = Object.fromEntries(
  Object.entries(deviceInfo).filter(([key, value]) => value [3] '')
);

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

AdeviceName

BgetDeviceName

C!==

Dmodel

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keys or method names.

Using '=' instead of '!=='.

Repeating keys or methods incorrectly.

We map deviceName to getDeviceName() and filter entries where value is not equal to empty string using !==.