Modal and bottom sheet in React Native - UI Render Trace

Component - Modal and bottom sheet

This UI component shows how a modal and a bottom sheet appear on the screen. A modal is a box that pops up in the center and blocks interaction with the rest of the app until closed. A bottom sheet slides up from the bottom and can be dismissed by swiping down or tapping outside.

Widget Tree

View
├─ Button (Open Modal)
├─ Button (Open Bottom Sheet)
├─ Modal
│  └─ View (Modal Content)
└─ View (Bottom Sheet)
   └─ View (Bottom Sheet Content)

The main container is a View holding two Buttons. One button opens the Modal, which contains a View for its content. The other button opens the Bottom Sheet, which is a View sliding up from the bottom with its own content View inside.

Render Trace - 7 Steps

Step 1: View

Step 2: Button (Open Modal)

Step 3: Button (Open Bottom Sheet)

Step 4: Modal

Step 5: View (Bottom Sheet)

Step 6: Modal (after openModalFunction)

Step 7: View (Bottom Sheet) (after openBottomSheetFunction)

State Change - Re-render

Trigger:User taps 'Open Modal' button or 'Open Bottom Sheet' button

Before

Modal visible: false, Bottom Sheet height: 0 (hidden)

→

After

Modal visible: true (if modal button tapped), Bottom Sheet height: 250 (if bottom sheet button tapped)

Re-renders:The Modal component subtree re-renders when modal opens or closes. The Bottom Sheet View subtree re-renders when it slides up or down.

UI Quiz - 3 Questions

What happens to the rest of the screen when the modal is visible?

A The rest of the screen is blocked with a semi-transparent overlay.

B The rest of the screen remains fully interactive.

C The rest of the screen slides down.

D The rest of the screen changes color but remains interactive.

Key Insight

Modals and bottom sheets are common ways to show temporary content without leaving the current screen. Modals block interaction with the background, focusing user attention, while bottom sheets allow partial interaction and can be dismissed by swiping. Proper layering and animation improve user experience.