Tutorial React Native Form Sheet with React Navigation v7

Learn how to use React Navigation v7's form sheet presentation to display forms or information in a bottom sheet style on React Native apps. You'll learn configuring the native stack navigator to present screens as form sheets with draggable detents and smooth animations.

You'll learn how to customize the form sheet's height stops (detents), corner radius, background dimming, and keyboard behavior. This is ideal for apps that want a polished modal experience that adapts when the keyboard appears and allows users to drag the sheet up or down.

The tutorial uses a real app example from the React Native course, demonstrating practical setup and customization tips for native stack screens with form sheet presentation.

What's inside

Introduction to form sheets vs modals in React Navigation
Checking and using React Navigation v7 native stack
Changing screen presentation to form sheet
Customizing detents for draggable sheet heights
Handling keyboard interaction and input focus
Background dimming and interaction outside the sheet
Adjusting corner radius for visual style
Enabling the grabber handle for user drag gestures

I start by showing the difference between a modal and a form sheet in React Navigation. A modal typically covers the full screen, while a form sheet appears as a bottom sheet that can be dragged and resized.

Form sheets are great for forms or small tasks because they let users see part of the underlying screen and dismiss the sheet by swiping down or tapping outside. The example app uses a plus button to open a new post screen as a form sheet instead of a full modal.

This approach improves user experience by preventing the keyboard from covering inputs and providing smooth animations for expanding and collapsing the sheet.

To use form sheets, you need React Navigation version 7 or later, specifically the native stack navigator. I show how to verify your package.json to ensure you have react-navigation/native-stack version 7 or above.

Since v7 was in release candidate at the time, you might need to install it with the tag. The native stack is required because form sheet presentation relies on native platform APIs available in this navigator.

If you want to learn more about React Navigation v7 installation and features, I recommend watching his related video on the topic.

Changing screen presentation to form sheet

The key step is to set the screen's option to in the native stack navigator. By default, this looks similar to a modal, occupying full height.

To enable the form sheet behavior, you also configure the option, which controls the heights where the sheet can rest. Without detents, the sheet defaults to full screen.

This change allows the sheet to be draggable between defined heights and to expand when inputs are focused.

Customizing detents for draggable sheet heights

Detents define the resting heights of the form sheet. I show how to set to an array like or to allow dragging between 50% and 100% of the screen height.

You can also use or individually to restrict the sheet to one height. Allowing multiple detents gives users freedom to drag the sheet up or down.

The option controls when the background dims. For example, setting it to disables dimming at medium height, allowing interaction with the background screen.

Handling keyboard interaction and input focus

When the form sheet contains text inputs, focusing an input automatically expands the sheet to full height so the keyboard does not cover the inputs.

This behavior is built-in and improves usability for forms inside the sheet. I demonstrate typing inside the form sheet and how the sheet smoothly expands and shrinks as the keyboard appears and disappears.

Background dimming and interaction outside the sheet

By default, the background behind the form sheet is dimmed to focus user attention. Tapping outside the sheet closes it.

You can customize this behavior with to control when the dimming applies. For example, if you want to show tools or settings without dimming the background, you can set this detent accordingly.

This flexibility lets you create different UX patterns depending on your app's needs.

Adjusting corner radius for visual style

The form sheet supports a option to round the top corners of the sheet. I show setting it to 30 for a nice rounded look.

You can increase this value up to 50 or 100, but very large values might break your layout or overlap UI elements like header buttons.

Adjusting corner radius helps match your app's design style and improves the sheet's visual appeal.

Enabling the grabber handle for user drag gestures

The grabber is a small visible handle at the top of the sheet that indicates it can be dragged. It is disabled by default.

Setting to shows this handle and improves discoverability of the drag gesture.

I demonstrate how the grabber animates and lets users drag the sheet between detents smoothly.

Resources

CourseReact Native course

Learn React Native fundamentals and build real apps including the Only Chats project used in this video.

Premium resourcePro Membership

Get access to exclusive tutorials, projects, and source code including advanced React Native navigation patterns.

Let's connect!