Skip to main content
Copy and paste these prompts directly into Vibecode to implement native iOS components.

​
Large Header Titles

We want a large header title on the screen. 

Using a React Navigation Native Stack navigator, set `headerLargeTitle: true` and `headerTransparent: true` in screen options. 

In the screen component, use a `ScrollView` as the outermost component with `style={{ flex: 1 }}` and `contentInsetAdjustmentBehavior="automatic"`.

​
Context Menu

Use Zeego ContextMenu; open on long-press; map items/submenus with native look (no custom styling). 

Here are the docs: https://zeego.dev/components/context-menu

​
Liquid Glass Bottom Tabs

Use react-native-bottom-tabs and @bottom-tabs/react-navigation package to implement Native bottom tabs. 

Here are the docs: https://incubator.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-react-navigation

​
Modals and Bottom Sheets

Use the @gorhom/bottom-sheet; define snap points, backdrop, and enablePanDownToClose for iOS feel. 

Make multiple snap points including a full screen version of the bottom sheet.

​
iOS-Style Switch

Use the native iOS style switch component. You can import this from "react-native"

​
Date and Time Pickers

Use @react-native-community/datetimepicker; present mode="date" / "time" and handle onChange inline/modal on iOS. 

Make sure to make the text color black or some other color based on the background. Most backgrounds are white.

​
Haptics

Use Vibecode app’s built-in Haptics feature to add tactile feedback.

​
Bonus Components

​
iOS-Style Segmented Control

Use @react-native-segmented-control/segmented-control; control via selectedIndex + onChange to switch views.

​
Swipe to Delete

Build list rows with RNGH Swipeable/Reanimated; render renderRightActions with a Delete action and commit on full swipe.