Mobile | Sun Jun 30 20243,014 views

React Navigation Form Sheet

Hi there!

In this video, we learn how to present a form sheet as well as all the properties we can use to achieve any use case.

🧙‍♂️ Want to become a master in React Native? Check the React Native Course

Also, don't forget to explore the React with TypeScript Course, where we master TypeScript, handle payments, and deploy scalable applications. Learn more

Dependencies

This commands are for using the latest version of react navigation. For this to work just make sure you're using React Navigation v7 or later.

npm install @react-navigation/native@next @react-navigation/native-stack@next

Form Sheet Config

<Stack.Screen
  name="NewPost"
  component={NewPost}
  options={{
    presentation: "formSheet",
    sheetAllowedDetents: "all",
    sheetLargestUndimmedDetent: "all",
    sheetGrabberVisible: true,
    sheetCornerRadius: 30,
    sheetExpandsWhenScrolledToEdge: true,
    headerShown: true,
    headerTitle: "New Post",
  }}
/>

Links

Youtube GitHubDownload as Zip

Go back to Projects