Mobile | Sun Jun 30 20247,969 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 GitHub

Go back to Projects

Support Our Community

Take your skills to the next level by enrolling in our courses!

React Native CourseMaster React with TypeScriptMaster Git & GitHubLiveStore Course

Your support helps us continue creating valuable resources for everyone. ❤️