Device info and haptics in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Detecting Device Orientation Change

What will be the output behavior when the device orientation changes in this React Native component?

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Dimensions } from 'react-native';

export default function Orientation() {
  const [orientation, setOrientation] = useState('portrait');

  useEffect(() => {
    const updateOrientation = () => {
      const { width, height } = Dimensions.get('window');
      setOrientation(width > height ? 'landscape' : 'portrait');
    };
    Dimensions.addEventListener('change', updateOrientation);
    updateOrientation();
    return () => Dimensions.removeEventListener('change', updateOrientation);
  }, []);

  return <View><Text>{`Orientation: ${orientation}`}</Text></View>;
}

A The text updates to 'Orientation: landscape' or 'Orientation: portrait' when device rotates.

B The app crashes with a runtime error on orientation change.

C The text never updates and always shows 'Orientation: portrait'.

D The text updates but shows incorrect orientation values like 'landscape' when in portrait.

💡 Hint

Check how Dimensions event listeners update state on orientation change.

The component listens to dimension changes and updates the orientation state accordingly, so the text reflects the current orientation.

❓ ui_behavior

intermediate

Triggering Haptic Feedback on Button Press

Which option correctly triggers a light haptic feedback when the button is pressed in React Native?

React Native

import React from 'react';
import { Button } from 'react-native';
import * as Haptics from 'expo-haptics';

export default function HapticButton() {
  return <Button title="Press me" onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)} />;
}

A onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}

B onPress={() => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)}

C onPress={() => Haptics.selectionAsync()}

D onPress={() => Haptics.impactAsync('heavy')}

💡 Hint

Look for the method that triggers impact feedback with a light style.

Haptics.impactAsync with ImpactFeedbackStyle.Light triggers a light vibration effect on supported devices.

❓ lifecycle

advanced

Cleaning Up Device Orientation Listener

What is the problem with this React Native code regarding device orientation listener cleanup?

React Native

import React, { useEffect, useState } from 'react';
import { Dimensions, Text, View } from 'react-native';

export default function Orientation() {
  const [orientation, setOrientation] = useState('portrait');

  useEffect(() => {
    const handler = () => {
      const { width, height } = Dimensions.get('window');
      setOrientation(width > height ? 'landscape' : 'portrait');
    };
    Dimensions.addEventListener('change', handler);
    return () => {
      Dimensions.removeEventListener('change', handler);
    };
  }, []);

  return <View><Text>{orientation}</Text></View>;
}

A The code causes a memory leak because the listener is removed twice.

B The cleanup function removes a different function than the one added, so listener is not removed.

C The event listener is removed correctly, no problem exists.

D The handler function is not defined inside useEffect, causing a reference error.

💡 Hint

Check how the removeEventListener function is called with the handler argument.

The cleanup uses an anonymous arrow function wrapping handler, which is a different function reference than the one added, so the listener is not removed properly.

📝 Syntax

advanced

Correct Syntax for Using Haptics in React Native

Which code snippet correctly imports and uses Expo Haptics to trigger a medium impact feedback?

A import * as Haptics from 'expo-haptics';\nHaptics.impactAsync(Haptics.ImpactFeedbackStyle.medium);

B import Haptics from 'expo-haptics';\nHaptics.impactAsync('medium');

C import { impactAsync } from 'expo-haptics';\nimpactAsync('Medium');

D import * as Haptics from 'expo-haptics';\nHaptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

💡 Hint

Check the exact casing of ImpactFeedbackStyle constants and import style.

The correct import is using namespace import * as Haptics, and the constant ImpactFeedbackStyle.Medium is capitalized exactly as shown.

🧠 Conceptual

expert

Understanding Device Info API Behavior

What will be the value of the variable 'isTablet' after running this React Native code on a phone device?

React Native

import * as Device from 'expo-device';

const isTablet = Device.isTablet;

A undefined

B true

C false

D null

💡 Hint

Check the meaning of Device.isTablet property in Expo Device API.

Device.isTablet returns a boolean indicating if the device is a tablet. On a phone, it returns false.

Practice

1. Which React Native module provides information about the device's operating system?

easy

A. Platform

B. Dimensions

C. Vibration

D. StatusBar

Solution

1. Step 1: Identify the module for OS info

   The Platform module in React Native gives details about the device OS like 'ios' or 'android'.

2. Step 2: Compare with other modules

   Dimensions gives screen size, Vibration controls haptic feedback, and StatusBar manages the status bar UI, not OS info.

3. Final Answer:

   Platform -> Option A

4. Quick Check:

   OS info = Platform [OK]

Hint: Platform module always gives OS info in React Native [OK]

Common Mistakes:

• Confusing Dimensions with OS info
• Thinking Vibration provides device info
• Assuming StatusBar relates to OS details

2. Which of the following is the correct syntax to get the screen width using React Native's Dimensions module?

easy

A. Dimensions.screen.width()

B. Dimensions.width()

C. Dimensions.get('screen').width

D. Dimensions.getWidth('screen')

Solution

1. Step 1: Recall Dimensions API usage

   The correct method to get screen size is Dimensions.get('screen'), which returns an object with width and height.

2. Step 2: Access width property correctly

   Access the width by .width property, so Dimensions.get('screen').width is correct syntax.

3. Final Answer:

   Dimensions.get('screen').width -> Option C

4. Quick Check:

   Screen width = Dimensions.get('screen').width [OK]

Hint: Use Dimensions.get('screen').width to get screen width [OK]

Common Mistakes:

• Calling width as a function instead of property
• Using wrong method names like getWidth
• Accessing screen as a property instead of argument

3. What will be the result of this React Native code snippet?

import { Vibration } from 'react-native';

Vibration.vibrate(1000);

Choose the correct behavior.

medium

A. The device vibrates for 1 second

B. The device vibrates indefinitely until stopped

C. The device vibrates for 100 milliseconds

D. No vibration occurs because vibrate needs a pattern array

Solution

1. Step 1: Understand Vibration.vibrate parameter

   Passing a number like 1000 to Vibration.vibrate() makes the device vibrate for that many milliseconds (1000 ms = 1 second).

2. Step 2: Check other options

   Indefinite vibration requires a pattern with repeat, 100 ms is too short, and vibrate accepts a number directly, so no pattern array is needed.

3. Final Answer:

   The device vibrates for 1 second -> Option A

4. Quick Check:

   Vibration.vibrate(1000) = 1 second vibration [OK]

Hint: Number argument in vibrate() is vibration duration in ms [OK]

Common Mistakes:

• Thinking vibrate needs a pattern array always
• Confusing milliseconds with seconds
• Assuming vibrate runs indefinitely by default

4. Identify the error in this React Native code snippet that tries to vibrate the device:

import { Vibration } from 'react-native';

Vibration.vibrate([500, 1000]);

medium

A. The vibrate method requires a second argument for repeat

B. The array pattern is correct but missing a repeat flag

C. The array should be passed as a second argument, not the first

D. The vibrate method does not accept an array as argument

Solution

1. Step 1: Check Vibration.vibrate pattern usage

   Vibration.vibrate accepts an array pattern as first argument to define vibration and pause durations.

2. Step 2: Understand repeat flag necessity

   To repeat the pattern, a second boolean argument true is needed. Without it, the pattern runs once, so no error but possibly unintended behavior.

3. Final Answer:

   The array pattern is correct but missing a repeat flag -> Option B

4. Quick Check:

   Pattern array needs repeat flag to loop [OK]

Hint: Add second argument true to repeat vibration pattern [OK]

Common Mistakes:

• Thinking array is invalid argument
• Forgetting second argument for repeat
• Passing array as second argument instead of first

5. You want to create a React Native function that vibrates the device for 500ms, then pauses for 300ms, and repeats this pattern twice. Which code snippet correctly implements this behavior?

hard

A. Vibration.vibrate(500); Vibration.vibrate(300); Vibration.vibrate(500);

B. Vibration.vibrate([500, 300, 500, 300], true); setTimeout(() => Vibration.cancel(), 2600);

C. Vibration.vibrate([500, 300], true); setTimeout(() => Vibration.cancel(), 2600);

D. Vibration.vibrate([500, 300, 500, 300], false);

Solution

1. Step 1: Understand the required pattern

   The pattern is vibrate 500ms, pause 300ms, repeated twice: [500, 300, 500, 300].

2. Step 2: Use repeat false to play exactly twice

   Vibration.vibrate([500, 300, 500, 300], false) executes the sequence once without looping further.

3. Step 3: Eliminate other options

   Using true causes indefinite looping (cancel timing imprecise); shorter pattern loops incorrectly; separate calls lack pauses.

4. Final Answer:

   Vibration.vibrate([500, 300, 500, 300], false); -> Option D

5. Quick Check:

   Two pattern repeats = [500, 300, 500, 300], false [OK]

Hint: Unroll pattern twice with repeat false for exact repeats [OK]

Common Mistakes:

• Using repeat true without precise cancel
• Using false for repeat flag
• Calling vibrate multiple times instead of pattern