Native iOS UI Components - Vibecode Docs

Large Header Titles

Prompt

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

Prompt

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

Prompt

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

Prompt

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

Prompt

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

Date and Time Pickers

Prompt

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

Prompt

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

Swipe to Delete

Prompt

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

Next Steps

[**Web to Mobile**

Convert a web app to mobile](/content/docs/getting-started/web-to-mobile/index.html)

[**Haptics**

Add tactile feedback to your components](/content/docs/features/haptics/index.html)