Push notifications (expo-notifications) in React Native - UI Render Trace

Component - Push notifications (expo-notifications)

This component sets up push notifications using the expo-notifications library in a React Native app. It requests permission, gets a device token, and listens for incoming notifications to show alerts or update UI.

Widget Tree

App
├─ View (container)
│  ├─ Text (title)
│  ├─ Button (Register for Notifications)
│  └─ Text (notification message)

The root App component renders a View container. Inside it, a Text shows the screen title, a Button triggers notification registration, and another Text displays the latest notification message.

Render Trace - 4 Steps

Step 1: App

Step 2: Button

Step 3: Text (notification message)

Step 4: Notification Listener

State Change - Re-render

Trigger:User taps 'Register for Notifications' button

Before

{expoPushToken: '', notification: null}

→

After

{expoPushToken: '<device-token>', notification: null}

Re-renders:Entire App component re-renders to show updated push token if displayed (not shown here), notification message remains empty

UI Quiz - 3 Questions

What happens when the user taps the 'Register for Notifications' button?

A The app requests permission and gets a push token

B The app immediately shows a notification message

C The app closes and restarts

D Nothing happens

Key Insight

Push notifications require permission and a device token. Listening for notifications updates app state, which triggers UI updates to show messages. Keeping UI simple and state clear helps users understand notification status.