Why native modules extend capabilities in React Native - UI Rendering Impact

Component - Why native modules extend capabilities

This UI component shows how React Native uses native modules to access device features that JavaScript alone cannot handle. It demonstrates a button that, when pressed, calls a native module to get the device's battery level and displays it on screen.

Widget Tree

View
├── Text (Battery Level Display)
└── Button (Get Battery Level)

The root View holds two children stacked vertically: a Text component that shows the current battery level, and a Button that triggers the native module call to update this level.

Render Trace - 3 Steps

Step 1: View

Step 2: Text

Step 3: Button

State Change - Re-render

Trigger:User presses the 'Get Battery Level' button

Before

Battery level text shows 'Battery Level: Unknown'

→

After

Battery level text updates to 'Battery Level: 85%' (example value)

Re-renders:Text component displaying the battery level re-renders to show updated value

UI Quiz - 3 Questions

What does the Button in this UI do?

A Navigates to another screen

B Changes the screen background color

C Calls a native module to get the battery level

D Closes the app

Key Insight

Native modules let React Native apps use device features like battery info by bridging JavaScript with platform-specific code. This approach keeps the UI responsive while accessing powerful native capabilities.