The Master Detail Layout Pattern

In this lesson, you will learn how to create a responsive, two-pane interface that automatically switches between a single-column list on phones and a side-by-side view on tablets.

Understanding the Pattern

The Master-Detail pattern splits your UI into two functional areas: the Master (a list of items) and the Detail (the content of a selected item). On a small phone screen, displaying both simultaneously feels cramped. On a large tablet, however, forcing the user to navigate back and forth creates unnecessary friction. The goal is to provide a unified experience that adapts to the available horizontal space.

Implementing the Layout

We achieve this using a simple conditional check based on the screen width. By wrapping our Master and Detail components in a parent container with flexDirection: 'row', we can easily control how they distribute space.

const MasterDetailLayout = ({ items, selectedItem, onSelect }) => {
  const { width } = useWindowDimensions();
  const isTablet = width > 768;

  return (
    <View style={styles.container}>
      {/* Master Pane */}
      {(!isTablet && !selectedItem) || isTablet ? (
        <MasterList data={items} onSelect={onSelect} />
      ) : null}

      {/* Detail Pane */}
      {(isTablet || selectedItem) ? (
        <DetailView item={selectedItem} />
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Side-by-side layout
  }
});

Why This Matters

In this setup, the isTablet boolean acts as our layout engine. When true, the parent container renders both children horizontally. When false, the layout logic shifts: the screen displays either the list or the details, mimicking the behavior of a standard stack navigator. By combining this with the flexbox concepts we’ve covered, you ensure your app feels "at home" on any device size without needing to write separate codebases for different platforms.

Key Takeaway: The Master-Detail pattern leverages horizontal space dynamically to transform a linear navigation flow into an efficient, side-by-side workspace.