Bottom Sheet React Native | Expo Tutorial 2022 | Code with Beto

That smooth slide-up sheet you see in the App Store and every polished iOS app? It takes three packages and a bit of config to get it in your own React Native project. I use with Reanimated and Gesture Handler, and I build it from a brand new Expo TypeScript project in the video.

By the end you have a sheet you can drag to close, reopen with a button, and fill with whatever content you want.

What's inside

Install and configure , Reanimated, and Gesture Handler
Lock the sheet height with snap points (40% of the screen in this build)
Enable drag-down-to-close with
Reopen the sheet programmatically with a ref and
Dim the background dynamically based on the sheet's open state
Keep content organized in a reusable component

Resources

CourseReact Native course

Go deeper in Animations & Gestures: 62 minutes on Reanimated, gestures, and swipeable UI.

Let's connect!