> ## Documentation Index
> Fetch the complete documentation index at: https://www.vibecodeapp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Native iOS UI Components

> Easy-to-copy prompts for implementing native iOS UI patterns in your Vibecode apps

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

## Large Header Titles

<CodeGroup>
  ```text Prompt theme={null}
  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"`.
  ```
</CodeGroup>

## Context Menu

<CodeGroup>
  ```text Prompt theme={null}
  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
  ```
</CodeGroup>

## Liquid Glass Bottom Tabs

<CodeGroup>
  ```text Prompt theme={null}
  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
  ```
</CodeGroup>

## Modals and Bottom Sheets

<CodeGroup>
  ```text Prompt theme={null}
  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.
  ```
</CodeGroup>

## iOS-Style Switch

<CodeGroup>
  ```text Prompt theme={null}
  Use the native iOS style switch component. You can import this from "react-native"
  ```
</CodeGroup>

## Date and Time Pickers

<CodeGroup>
  ```text Prompt theme={null}
  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.
  ```
</CodeGroup>

## Haptics

Use Vibecode app's built-in [Haptics feature](/features/haptics) to add tactile feedback.

***

## Bonus Components

### iOS-Style Segmented Control

<CodeGroup>
  ```text Prompt theme={null}
  Use @react-native-segmented-control/segmented-control; control via selectedIndex + onChange to switch views.
  ```
</CodeGroup>

### Swipe to Delete

<CodeGroup>
  ```text Prompt theme={null}
  Build list rows with RNGH Swipeable/Reanimated; render renderRightActions with a Delete action and commit on full swipe.
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Web to Mobile" icon="arrows-rotate" href="/getting-started/web-to-mobile">
    Convert a web app to mobile
  </Card>

  <Card title="Haptics" icon="hand-pointer" href="/features/haptics">
    Add tactile feedback to your components
  </Card>
</CardGroup>