Zeego Documentation

Zeego provides beautiful, native menus for React Native and Web applications, drawing inspiration from Radix UI. It offers a unified API that works across platforms, ensuring a consistent developer experience whether you are building for iOS, Android, or the Web.

Key features include:

• Cross-platform API: Use the same API for Web, iOS, and Android.
• Native Elements: Utilizes native elements on iOS and Android where possible.
• Framework Compatibility: Works with Solito, Next.js, Expo (using custom dev clients), and vanilla React Native.
• Unstyled Components: 100% unstyled, giving you full control over the visual design.

Zeego is a library for creating beautiful, native menus for React Native and Web applications. It is inspired by Radix UI and provides a unified API that works across different platforms:

• iOS/Android: Uses native elements for a truly native experience.
• Web: Uses Radix UI to provide high-quality web menus.
• Styling: All components are 100% unstyled, allowing you to apply your own designs without fighting default styles.
• Compatibility: Works with Solito, Next.js, Expo (via custom dev clients), and vanilla React Native.

All Zeego primitives are unstyled by default.

• Web: Styles applied to your primitives will be visible.
• iOS/Android: Your apps will use native menu components. Aside from the Trigger component (which you style manually), the rest of the menu elements use native system styling.

Best Practice: Apply styles within your primitive definition file (the file where you use create()) to maintain a consistent design system throughout your application.

Zeego's DropdownMenu adapts its implementation based on the target platform:

• Web: Uses Radix UI's unstyled Dropdown Menu component.
• iOS & Android: Uses each platform's built-in native menu component.

This ensures that while you use a unified API, the user experience remains native on mobile devices (including features like SF Symbols on iOS and system icons on Android) and follows standard web patterns on the web.

Do not attempt to wrap Zeego elements in standard React components without using the create() utility. Doing so will cause the components to fail on iOS and Android.

Incorrect Pattern:

const Content = () => {
  return (
    <DropdownMenu.Content>
      <DropdownMenu.Item />
    </DropdownMenu.Content>
  )
}

Correct Pattern (Inline):

export default function Menu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Content>
        <DropdownMenu.Item />
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

Correct Pattern (Custom Component): Use DropdownMenu.create() to define a custom component if you need to abstract the UI.

Zeego follows several core principles to ensure a high-quality developer and user experience:

1. Platform-Specific Optimization: Create the best experience for each specific platform (native on mobile, Radix on web).
2. Composable API: Uses a clean, composable API instead of requiring a single items array for configuration.
3. Style Independence: Does not attempt to share styles across platforms; instead, it focuses on functional parity.
4. Native Reliance: Relies on built-in native menus for iOS and Android to ensure accessibility and performance.
5. Unstyled Components: Everything ships unstyled to give developers full control over the UI.

While DropdownMenu.ItemTitle commonly accepts a string, it can also accept a React element (like a custom <Text> component).

Requirement: If you pass a React element as a child to ItemTitle, you must provide a textValue prop to the parent DropdownMenu.Item.

• On Web: textValue is used for typeahead functionality but does not affect rendering.
• On iOS/Android: textValue is used as the actual title for the native menu item.

<DropdownMenu.Item
  // this is required when ItemTitle has a React element child
  textValue="Cars"
  key="cars"
>
  <DropdownMenu.ItemTitle>
    <Text>
      Cars
    </Text>
  </DropdownMenu.ItemTitle>
</DropdownMenu.Item>

For detailed setup instructions and API references, visit the official Zeego website:

• Documentation: https://zeego.dev
• Installation Guide: https://zeego.dev/start

To start using Zeego, install the core package using your preferred package manager.

Note for monorepo users: Install Zeego and its peer dependencies in the directory of your native app, not in the root of the monorepo.

yarn add zeego

Zeego uses native code and will not work with Expo Go. You must use a custom development client.

1. Install Zeego and its peer dependencies.
2. Rebuild your custom development client:

   expo run:ios -d

3. Run your app in dev mode:

   npx expo start --dev-client

4. For App Store deployments, use EAS to build and submit:

   eas build --platform ios --autosubmit