Designing Fluid Modal Heights

In this lesson, you will learn how to create modal windows that naturally resize based on their internal content while remaining responsive to user-driven drag gestures.

The Problem with Static Heights

In many mobile interfaces, developers set fixed heights for modals. However, when the content inside the modal changes—or when a user wants to expand the modal to see more—fixed dimensions lead to awkward whitespace or clipped text. To create a "fluid" experience, we move away from hardcoded values and toward dynamic layout calculations.

Calculating Dynamic Dimensions

To achieve a fluid height, you must decouple the modal’s frame from a static height property and instead rely on the onLayout callback. By capturing the height of your inner content container, you can update your state to reflect the natural size of the child elements.

Consider this basic structure:

const [modalHeight, setModalHeight] = useState(0);

// Capture the content size dynamically
const handleLayout = (event) => {
  const { height } = event.nativeEvent.layout;
  setModalHeight(height);
};

return (
  <View style={{ height: modalHeight }} onLayout={handleLayout}>
    <Text>Your dynamic content here...</Text>
  </View>
);

Integrating Gestures

When you want the user to be able to drag to expand the modal, you aren't just changing a CSS property; you are manipulating a state variable that controls the container’s height. By combining PanResponder or a gesture library with the modalHeight state, you create a feedback loop.

When the user drags, you calculate the delta of the gesture and update the state. Because you are only updating the height state, the React Native layout engine recalculates the geometry of the modal container. To maintain performance, ensure that you are using the native driver where possible to animate these height transitions. This keeps the UI thread free, preventing the "stuttering" effect that occurs when layout calculations lag behind the user's finger.

Remember, fluid modals shouldn't jump; they should follow the gesture physics, expanding smoothly until the content bounds are met.

Key Takeaway: Use the onLayout event to measure content dynamically and bind those measurements to state to allow your modal container to breathe alongside the user's touch input.