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.