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 https://gorhom.github.io/react-native-bottom-sheet

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) {
  api.cache(true);
  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

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

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! 🎉

Links

Go back to Projects