Building Twitter Bottom Sheet with React Native | Tutorial Expo

That draggable sheet in Twitter with three resting heights? You can rebuild it with @gorhom/bottom-sheet, Reanimated, and Gesture Handler in one sitting. The tricky part is not the sheet, it's the Expo setup: the Babel plugin, the import order, and the install sequence that avoids version conflicts.

I cover all of it in the video, plus the styling details that make it feel like Twitter's.

What's inside

• Install the three packages in the right order (bottom sheet last)
• Configure the Reanimated Babel plugin and gesture handler import
• Define snap points like ['25%', '48%', '75%'] and drag between them
• Open the sheet from a button with useRef and present()
• Round the top corners with backgroundStyle to match Twitter
• Drop interactive content inside, like a dark mode switch

Resources

CourseReact Native course

Sheets, swipes, and springs live in Animations & Gestures: 62 minutes of Reanimated and gesture patterns.