Component - Device info and haptics
This React Native component shows basic device information and provides a button to trigger a vibration (haptic feedback) on the device. It helps users feel a physical response when they tap the button.
0
0
Device info and haptics in React Native - UI Render Trace
Widget Tree
View ├─ Text (Device Info) └─ Button (Trigger Vibration)
The root View holds two children stacked vertically: a Text component displaying device info and a Button that triggers vibration when pressed.
Render Trace - 3 Steps
Step 1: View
Step 2: Text
Step 3: Button
State Change - Re-render
Trigger:User taps the 'Vibrate Device' button
Before
No vibration active
→
After
Device vibrates briefly
Re-renders:No UI re-render needed; vibration is a side effect
UI Quiz - 3 Questions
Test your understanding
What happens when the user taps the 'Vibrate Device' button?
Key Insight
In React Native, device info can be displayed using simple Text components, while haptic feedback like vibration is triggered as a side effect without changing the UI. This keeps the interface responsive and simple.