Platform-specific styles in React Native - UI Render Trace

Component - Platform-specific styles

This React Native component shows how to apply different styles depending on the platform (iOS or Android). It uses platform-specific style rules to make the UI look native on each device.

Widget Tree

View
├── Text
└── Pressable

The root View contains two children: a Text component displaying a message, and a Pressable button. The styles of both Text and Pressable change depending on the platform.

Render Trace - 3 Steps

Step 1: View

Step 2: Text

Step 3: Pressable

State Change - Re-render

Trigger:User presses the button

Before

No feedback shown

→

After

Button press feedback triggered (opacity changes briefly)

Re-renders:Pressable component re-renders to show press feedback style

UI Quiz - 3 Questions

Which component changes its style based on the platform?

A Only the View container

B Both Text and Pressable components

C Only the Text component

D None, styles are the same on all platforms

Key Insight

Using platform-specific styles in React Native helps your app feel natural on each device. You can write one component but adjust colors, sizes, and shapes to match iOS or Android design guidelines easily.