Why Device info and haptics in React Native? - Purpose & Use Cases

The Big Idea

What if your app could 'feel' the device and respond with a gentle buzz that users love?

The Scenario

Imagine you want your app to feel personal and responsive by knowing what device it runs on and giving gentle vibrations when users tap buttons.

Without special tools, you'd have to guess device details and manually code vibration patterns for each phone model.

The Problem

Manually detecting device info is slow and unreliable because devices vary a lot.

Creating vibration feedback by hand means writing complex code for each device, which is error-prone and takes too much time.

The Solution

Using device info and haptics libraries in React Native lets you easily get accurate device details and trigger smooth vibrations with simple commands.

This saves time and makes your app feel modern and user-friendly.

Before vs After

✗ Before

if (Platform.OS === 'ios') {
  // guess device
}
vibratePattern = [100, 200, 100];
Vibration.vibrate(vibratePattern);

✓ After

const device = await DeviceInfo.getDeviceName();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

What It Enables

You can create apps that adapt to each device and give users satisfying touch feedback effortlessly.

Real Life Example

A fitness app that knows if you have an iPhone or Android and vibrates gently when you complete a workout set, making the experience more rewarding.

Key Takeaways

Manual device detection and vibration coding is slow and unreliable.

Device info and haptics libraries simplify access to device details and vibration features.

This leads to better user experience with less effort.