Orientation Change Handling

In this lesson, you will learn how to reconstruct your component layout dynamically so your interface feels intentional whether the user is holding their device in portrait or landscape mode.

Why Orientation Matters

When a user rotates their device, the available width and height of the screen flip. Because we rely on the Mobile Box Model and Flexbox for our layouts, a design that looks elegant in portrait mode can easily break in landscape. For example, a vertical stack of buttons might look perfectly fine when holding a phone upright, but once rotated, those buttons might become stretched, squashed, or hidden off-screen because the available main axis has shifted.

Reconstructing the Flow

To handle orientation changes, we observe the device dimensions and adjust our flexDirection. By default, many layouts are set to column. When transitioning to landscape, switching the flexDirection to row allows your content to utilize the new, wider horizontal space effectively.

Consider this layout logic:

const MyComponent = ({ isPortrait }) => {
  return (
    <View style={{
      flex: 1,
      // Switch flow direction based on orientation
      flexDirection: isPortrait ? 'column' : 'row',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <Logo />
      <Content />
    </View>
  );
};

When you update flexDirection based on the orientation, the Layout Engine triggers a recalculation. Because you are using flex, the components will automatically redistribute their space along the new axis. This is the core of dynamic layout reconstruction: you aren't just moving elements; you are changing the "flow" of the box model to match the device's new geometric constraints.

Prototyping the Shift

Always ensure that your items have flexible dimensions (using flex: 1 or percentages) rather than hardcoded pixels. This allows the layout to "breathe" when the orientation flips. By responding to these changes, you ensure that your Main and Cross axis alignments remain visually balanced regardless of the device's rotation.

Key Takeaway: Dynamic orientation handling is the art of flipping your flexDirection and adjusting your space distribution logic to ensure the UI remains ergonomic and fluid across both portrait and landscape geometries.