Mobile | Wed Sep 21 202213,117 views

Bottom Sheet Modal

Welcome back! 🦜

Nowadays is very common to see small modal views in most of the famous apps, In this porject we learn how to create an easy to use bottom sheet modal to display settings to the user.

Install Bottom Sheet

For this project we will be using @gorhom/bottom-sheet It's a performant interactive bottom sheet with fully configurable options. You can learn more about @gorhom/bottom-sheet here

yarn add @gorhom/bottom-sheet

Dependencies This library needs these dependencies to be installed in your project before you can use it:

npx expo install react-native-reanimated react-native-gesture-handler

If you are using CLI you can install with this command:

yarn add react-native-reanimated react-native-gesture-handler

Because we are using expo we have to edit our babel.config.js like this:

module.exports = function (api) {
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],

Finally add this import to the top of your app entry file, such as App.js and wrap your app with GestureHandlerRootView


React Native Gesture Handler needs extra steps to finalize its installation. Please make sure to wrap your App with GestureHandlerRootView

import "react-native-gesture-handler";
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* content */}

This will ensure that appropriate event handlers are registered with React Native. Now, you can import gesture handlers wherever you need them:

That's all the configuration that we need. Happy coding! 🎉

Want to become a master in React Native? Check the React Native Course

Youtube GitHubDownload

Go back to Projects