In this lesson, you will learn how to design layouts that gracefully adapt when a user shares your app’s space with another application on a tablet or foldable device.
The Concept of Shared Viewport
When a user enables split-screen mode, your app is no longer granted the full width or height of the physical display. From your app's perspective, the "screen" effectively shrinks. If your layout relies on hard-coded widths or assumes a full-screen aspect ratio, your components will overlap, cut off, or look visually broken.
Because we have already mastered Flexbox and Responsive Design Strategies, the key to handling split-screen is to stop thinking in terms of absolute dimensions and start thinking in proportional constraints.
Fluid Layouts over Fixed Widths
To create a robust interface, you must avoid fixed pixel widths. Instead of setting width: 400, use flex: 1 or percentage-based dimensions. When the OS triggers a resize, React Native recalculates your layout based on the new, smaller viewport.
Consider this layout snippet:
<View style={{ flex: 1, flexDirection: 'row' }}>
{/* The Sidebar will shrink gracefully as the app window narrows */}
<View style={{ flex: 1, backgroundColor: 'blue' }} />
{/* The Content area will maintain its flexible proportion */}
<View style={{ flex: 2, backgroundColor: 'white' }} />
</View>
In this example, because we used flex, the blue and white boxes will always maintain their 1:2 ratio, regardless of whether the app is occupying the full screen or just a 30% slice of it.
The Role of Flex Wrapping
As your viewport becomes very narrow during multitasking, a horizontal row might become too cramped for your text or buttons. Using flexWrap: 'wrap' (which we covered in our Flow Layouts lesson) is your best friend here. It allows your UI to automatically push elements to a new line when the horizontal space falls below a certain threshold, ensuring that your touch targets remain accessible and your layout doesn't trigger an overflow error.
By combining flexible distribution with intelligent wrapping, your app remains functional and readable in any multitasking configuration.
Key Takeaway: Design your interfaces using flexible proportions (flex) and wrap-enabled containers to ensure your layout automatically reflows as the host OS shrinks or expands your app’s available viewport.