BNA UI

https://ui.ahmedbna.com/docs
Admin
BNA UI is a set of accessible React Native components built for Expo and React Native, offering open...
Tokens:115,017
Snippets:690
Trust Score:5.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### BNA UI CLI Installation

Source: https://ui.ahmedbna.com/docs/installation

Installs BNA UI and automates project configuration including dependencies, tsconfig.json, theme system, hooks, and utilities. This is the recommended method for quick setup.

```bash
pnpm dlx bna-ui init
```

--------------------------------

### Install BNA UI Convex Auth Starter via CLI

Source: https://ui.ahmedbna.com/docs/convex/installation

This command initiates the setup of a new Expo project integrated with BNA UI and a Convex backend. It configures multiple authentication methods including Google, Apple, email/password, and OTP, along with pre-built components and necessary configurations.

```bash
pnpm dlx bna-ui convex
```

--------------------------------

### Install Onboarding Component using pnpm

Source: https://ui.ahmedbna.com/docs/components/onboarding

Installs the BNA UI onboarding component using pnpm. This is a one-time setup command to add the necessary package to your project.

```bash
pnpm dlx bna-ui add onboarding
```

--------------------------------

### Manual BNA UI Dependency Installation

Source: https://ui.ahmedbna.com/docs/installation

Manually installs necessary dependencies for BNA UI, including React Navigation and Expo Router. This is part of the manual setup process.

```bash
pnpm dlx expo install @react-navigation/native expo-router
```

--------------------------------

### Deploy Convex Backend and Set Production Environment Variables

Source: https://ui.ahmedbna.com/docs/convex/installation

Commands for deploying the Convex backend to production and setting production-specific environment variables. This ensures that the application connects to the correct backend instance and uses production credentials.

```bash
# Deploy to production
npx convex deploy --prod

# Set production environment variables
npx convex env set AUTH_GOOGLE_ID your-prod-google-id --prod
npx convex env set AUTH_RESEND_KEY your-prod-resend-key --prod
```

--------------------------------

### EAS Build Configuration for Production

Source: https://ui.ahmedbna.com/docs/convex/installation

Configuration for EAS Build, defining environment variables for production builds. This ensures that the production build of the application is correctly configured with the production Convex URL.

```json
{
  "cli": {
    "version": ">= 5.2.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "env": {
        "EXPO_PUBLIC_CONVEX_URL": "https://your-prod-deployment.convex.cloud"
      }
    }
  }
}
```

--------------------------------

### Environment Variables for Authentication and App Configuration

Source: https://ui.ahmedbna.com/docs/convex/installation

Configuration settings required for various authentication providers (Google OAuth, Apple Sign-In, Resend for email OTP) and Convex deployment URL. These variables are crucial for enabling and securing authentication flows within the application.

```env
# Google OAuth
AUTH_GOOGLE_ID=your-google-client-id
AUTH_GOOGLE_SECRET=your-google-client-secret

# Apple Sign-In
AUTH_APPLE_ID=your-apple-service-id
AUTH_APPLE_SECRET=your-apple-private-key

# Email Provider (Resend)
AUTH_RESEND_KEY=your-resend-api-key

# App Configuration
EXPO_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
EXPO_URL=your-app-schema://
```

--------------------------------

### Install Hello Wave Component

Source: https://ui.ahmedbna.com/docs/components/hello-wave

Instructions for installing the Hello Wave component using package managers like pnpm, npm, or yarn.

```bash
pnpm dlx bna-ui add hello-wave
```

--------------------------------

### BNA UI tsconfig.json Configuration

Source: https://ui.ahmedbna.com/docs/installation

Updates the tsconfig.json file with specific settings required for BNA UI, including strict mode and path aliases. This is a crucial step in the manual installation.

```json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "docs/contents/audio-waveform.mdx"
  ]
}
```

--------------------------------

### Install Theme Provider CLI Command

Source: https://ui.ahmedbna.com/docs/theme/theme-provider

Command to install the theme-provider package using pnpm. This is part of the manual installation process for the BNA UI theming feature.

```bash
pnpm dlx bna-ui add theme-provider
```

--------------------------------

### BottomSheet Installation

Source: https://ui.ahmedbna.com/docs/components/bottom-sheet

Instructions for installing the BottomSheet component using pnpm, npm, or yarn.

```APIDOC
## Installation

### CLI

**pnpm**
```bash
pnpm dlx bna-ui add bottom-sheet
```

**npm**
```bash
npm dlx bna-ui add bottom-sheet
```

**yarn**
```bash
yarn dlx bna-ui add bottom-sheet
```

### Manual
(Details for manual installation would go here if provided in the source)
```

--------------------------------

### Install BNA UI Button Component

Source: https://ui.ahmedbna.com/docs/components/button

Instructions for installing the BNA UI Button component using pnpm, yarn, or npm. This command downloads and installs the necessary package.

```bash
pnpm dlx bna-ui add button
```

--------------------------------

### Install Audio Recorder Component (PNPM)

Source: https://ui.ahmedbna.com/docs/components/audio-recorder

This snippet shows how to install the Audio Recorder component using PNPM. It is a command-line instruction.

```bash
pnpm dlx bna-ui add audio-recorder
```

--------------------------------

### Update App Configuration for Scheme and Bundle Identifiers

Source: https://ui.ahmedbna.com/docs/convex/installation

Configuration for Expo applications, specifying the deep linking scheme and platform-specific identifiers for iOS and Android. This is essential for correctly registering the application and handling external links.

```json
{
  "expo": {
    "scheme": "your-app-scheme",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}
```

--------------------------------

### Install BNA UI Combobox

Source: https://ui.ahmedbna.com/docs/components/combobox

Instructions for installing the Combobox component using pnpm. This command uses 'dlx' to execute the package command directly without a prior installation.

```bash
pnpm dlx bna-ui add combobox
```

--------------------------------

### Install AvoidKeyboard Component with PNPM

Source: https://ui.ahmedbna.com/docs/components/avoid-keyboard

Instructions for installing the AvoidKeyboard component using PNPM. This command fetches and installs the necessary package for cross-platform keyboard avoidance.

```bash
pnpm dlx bna-ui add avoid-keyboard
```

--------------------------------

### Install MediaPicker with pnpm

Source: https://ui.ahmedbna.com/docs/components/media-picker

Installs the MediaPicker component using pnpm. This command ensures that the component and its dependencies are correctly added to your project.

```bash
pnpm dlx bna-ui add media-picker
```

--------------------------------

### Install Checkbox Component using pnpm

Source: https://ui.ahmedbna.com/docs/components/checkbox

Provides the command to install the Checkbox component using pnpm. This is a direct installation command for the specific UI component.

```bash
pnpm dlx bna-ui add checkbox
```

--------------------------------

### Implement Theme Provider for React Native Navigation

Source: https://ui.ahmedbna.com/docs/installation

Provides a `ThemeProvider` component for React Native applications that integrates with `@react-navigation/native`. It utilizes a custom hook `useColorScheme` to detect the system's color scheme and applies either a `customLightTheme` or `customDarkTheme`. These custom themes extend the default themes from `@react-navigation/native`, overriding specific color properties like primary, background, card, text, border, and notification using the predefined `Colors` object.

```typescript
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider as RNThemeProvider,
} from '@react-navigation/native';
import 'react-native-reanimated';
 
import { useColorScheme } from '@/hooks/useColorScheme';
import { Colors } from '@/theme/colors';
 
type Props = {
  children: React.ReactNode;
};
 
export const ThemeProvider = ({ children }: Props) => {
  const colorScheme = useColorScheme();
 
  // Create custom themes that use your Colors
  const customLightTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: Colors.light.primary,
      background: Colors.light.background,
      card: Colors.light.card,
      text: Colors.light.text,
      border: Colors.light.border,
      notification: Colors.light.red,
    },
  };
 
  const customDarkTheme = {
    ...DarkTheme,
    colors: {
      ...DarkTheme.colors,
      primary: Colors.dark.primary,
      background: Colors.dark.background,
      card: Colors.dark.card,
      text: Colors.dark.text,
      border: Colors.dark.border,
      notification: Colors.dark.red,
    },
  };
 
  return (
    <RNThemeProvider
      value={colorScheme === 'dark' ? customDarkTheme : customLightTheme}
    >
      {children}
    </RNThemeProvider>
  );
};
```

--------------------------------

### Install Picker Component with pnpm

Source: https://ui.ahmedbna.com/docs/components/picker

This command installs the BNA UI picker component using pnpm. It's a prerequisite for using the Picker component in your project. Ensure you have pnpm installed globally.

```bash
pnpm dlx bna-ui add picker
```

--------------------------------

### Install BNA UI Alert Component

Source: https://ui.ahmedbna.com/docs/components/alert

Installs the BNA UI alert component using pnpm. This command adds the necessary package to your project's dependencies.

```bash
pnpm dlx bna-ui add alert
```

--------------------------------

### Tabs Component Installation and Usage

Source: https://ui.ahmedbna.com/docs/components/tabs

Instructions on how to install the Tabs component using pnpm and how to import and use it in your project.

```APIDOC
## Installation

### CLI

```bash
pnpm dlx bna-ui add tabs
```

## Usage

```javascript
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

// Example usage:
<Tabs defaultValue='tab1'>
  <TabsList>
    <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
    <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
    <TabsTrigger value='tab3'>Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value='tab1'>
    <Text>Content for Tab 1</Text>
  </TabsContent>
  <TabsContent value='tab2'>
    <Text>Content for Tab 2</Text>
  </TabsContent>
  <TabsContent value='tab3'>
    <Text>Content for Tab 3</Text>
  </TabsContent>
</Tabs>
```
```

--------------------------------

### Install Progress Component (pnpm)

Source: https://ui.ahmedbna.com/docs/components/progress

Installs the Progress component using the pnpm package manager. This command is a prerequisite for using the component in your project.

```bash
pnpm dlx bna-ui add progress
```

--------------------------------

### BottomSheet Usage Example

Source: https://ui.ahmedbna.com/docs/components/bottom-sheet

A basic example demonstrating how to import and use the BottomSheet component and useBottomSheet hook.

```APIDOC
## Usage

### Import
```javascript
import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
```

### Example Component
```javascript
function MyComponent() {
  const { isVisible, open, close } = useBottomSheet();
 
  return (
    <>
      <Button onPress={open}>Open Bottom Sheet</Button>

      <BottomSheet
        isVisible={isVisible}
        onClose={close}
        title='Settings'
        snapPoints={[0.3, 0.6, 0.9]}
      >
        <Text>Your content here</Text>
      </BottomSheet>
    </>
  );
}
```
```

--------------------------------

### Install Audio Player with pnpm

Source: https://ui.ahmedbna.com/docs/components/audio-player

This command installs the audio-player component from the bna-ui package using pnpm. It's a direct way to add the component to your project.

```bash
pnpm dlx bna-ui add audio-player
```

--------------------------------

### Install Mode Toggle Component with pnpm

Source: https://ui.ahmedbna.com/docs/components/mode-toggle

Installs the 'mode-toggle' component using pnpm. This command should be run in your project's root directory.

```bash
pnpm dlx bna-ui add mode-toggle
```

--------------------------------

### Install BNA UI Switch

Source: https://ui.ahmedbna.com/docs/components/switch

Instructions for installing the BNA UI Switch component using npm, yarn, or pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx bna-ui add switch
```

--------------------------------

### Install Candlestick Chart using pnpm

Source: https://ui.ahmedbna.com/docs/charts/candlestick-chart

This command installs the candlestick-chart package using pnpm, a performant package manager. It's a one-time setup step before using the component.

```bash
pnpm dlx bna-ui add candlestick-chart
```

--------------------------------

### Install Camera Preview with pnpm

Source: https://ui.ahmedbna.com/docs/components/camera-preview

Installs the camera-preview package using the pnpm package manager. This command uses 'dlx' to run the 'add' command from the bna-ui package.

```bash
pnpm dlx bna-ui add camera-preview
```

--------------------------------

### React Native Color Scheme Hook

Source: https://ui.ahmedbna.com/docs/installation

Provides the color scheme from react-native. For web support, it ensures hydration before returning the scheme to handle static rendering.

```typescript
export { useColorScheme } from 'react-native';
```

```typescript
import { useEffect, useState } from 'react';
import { useColorScheme as useRNColorScheme } from 'react-native';

/**
 * To support static rendering, this value needs to be re-calculated on the client side for web
 */
export function useColorScheme() {
  const [hasHydrated, setHasHydrated] = useState(false);

  useEffect(() => {
    setHasHydrated(true);
  }, []);

  const colorScheme = useRNColorScheme();

  if (hasHydrated) {
    return colorScheme;
  }

  return 'light';
}
```

--------------------------------

### useOnboarding Hook API Reference

Source: https://ui.ahmedbna.com/docs/components/onboarding

Details the return values and functions provided by the `useOnboarding` hook.

```APIDOC
## `useOnboarding` Hook

### Description
The `useOnboarding` hook manages the state and functionality of the onboarding flow.

### Method
`useOnboarding()`

### Returns
- **hasCompletedOnboarding** (`boolean`) - Whether the user has completed onboarding.
- **currentOnboardingStep** (`number`) - Current step index in the onboarding flow.
- **setCurrentOnboardingStep** (`(step: number) => void`) - Function to set the current step.
- **completeOnboarding** (`() => Promise<void>`) - Function to mark onboarding as completed.
- **resetOnboarding** (`() => void`) - Function to reset onboarding state.
- **skipOnboarding** (`() => Promise<void>`) - Function to skip and complete onboarding.

### Features
- **Smooth Animations**: Built with react-native-reanimated for fluid transitions.
- **Gesture Support**: Swipe left/right to navigate between steps.
- **Customizable**: Extensive customization options for styling and behavior.
- **Progress Indicators**: Visual progress dots to show current step.
- **Flexible Content**: Support for images, icons, and custom content.
- **State Management**: Built-in hook for managing onboarding state.
- **Accessibility**: Built with accessibility features in mind.
- **TypeScript**: Full TypeScript support with proper type definitions.

### Accessibility
The Onboarding component is built with accessibility in mind:
- Proper semantic structure for screen readers
- Keyboard navigation support
- High contrast support for progress indicators
- Descriptive labels for navigation buttons
- Support for dynamic text sizing
- Focus management between steps
```

--------------------------------

### Import BNA UI Icon Component

Source: https://ui.ahmedbna.com/docs/components/icon

Example of importing the Icon component and Lucide React Native icons for use in your application. This setup is required before rendering any icon elements.

```typescript
import { Icon } from '@/components/ui/icon';
import { Heart, Star, Home } from 'lucide-react-native';
```

--------------------------------

### Expo Router App Root Layout

Source: https://ui.ahmedbna.com/docs/installation

Sets up the root layout for an Expo Router application, including wrapping the app with a ThemeProvider and configuring navigation stacks and status bar.

```typescript
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { ThemeProvider } from '@/theme/theme-provider';

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack>
        <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
        <Stack.Screen name='+not-found' />
      </Stack>
      <StatusBar style='auto' />
    </ThemeProvider>
  );
}
```

--------------------------------

### Basic Onboarding Component Usage in React

Source: https://ui.ahmedbna.com/docs/components/onboarding

Demonstrates how to use the Onboarding component with a basic set of steps. It imports the necessary components and defines an array of step configurations, then renders the Onboarding component with callback functions for completion and skipping.

```javascript
import { Onboarding, OnboardingStep } from '@/components/ui/onboarding';

const steps: OnboardingStep[] = [
  {
    id: '1',
    title: 'Welcome',
    description: 'Get started with our amazing app',
    icon: <WelcomeIcon />,
  },
  {
    id: '2',
    title: 'Explore Features',
    description: 'Discover all the powerful features we offer',
    icon: <FeaturesIcon />,
  },
  {
    id: '3',
    title: 'Get Started',
    description: "You are all set! Let's begin your journey",
    icon: <StartIcon />,
  },
];
 
<Onboarding
  steps={steps}
  onComplete={() => console.log('Onboarding completed')}
  onSkip={() => console.log('Onboarding skipped')}
/>;
```

--------------------------------

### React Native Color Utility Hook

Source: https://ui.ahmedbna.com/docs/installation

A hook to dynamically select colors based on the current color scheme (light or dark). It prioritizes colors defined in props and falls back to theme-defined colors.

```typescript
/**
 * Learn more about light and dark modes:
 * https://docs.expo.dev/guides/color-schemes/
 */

import { useColorScheme } from '@/hooks/useColorScheme';
import { Colors } from '@/theme/colors';

export function useColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
) {
  const theme = useColorScheme() ?? 'light';
  const colorFromProps = props[theme];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}
```

--------------------------------

### Install BNA UI Camera Component

Source: https://ui.ahmedbna.com/docs/components/camera

Instructions for installing the camera component using package managers like pnpm, npm, and yarn. This step is crucial before using the component in your project.

```bash
pnpm dlx bna-ui add camera
```

--------------------------------

### React Native Mode Toggle Hook

Source: https://ui.ahmedbna.com/docs/installation

Manages the application's color mode (light, dark, system) and provides functions to toggle and set the mode. It integrates with the useColorScheme hook and React Native's Appearance API.

```typescript
import { useColorScheme } from '@/hooks/useColorScheme';
import { useState } from 'react';
import { Appearance, ColorSchemeName } from 'react-native';

type Mode = 'light' | 'dark' | 'system';

interface UseModeToggleReturn {
  isDark: boolean;
  mode: Mode;
  setMode: (mode: Mode) => void;
  currentMode: ColorSchemeName;
  toggleMode: () => void;
}

export function useModeToggle(): UseModeToggleReturn {
  const [mode, setModeState] = useState<Mode>('system');
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  const toggleMode = () => {
    switch (mode) {
      case 'light':
        setMode('dark');
        break;
      case 'dark':
        setMode('system');
        break;
      case 'system':
        setMode('light');
        break;
    }
  };

  const setMode = (newMode: Mode) => {
    setModeState(newMode);
    if (newMode === 'system') {
      Appearance.setColorScheme(null); // Reset to system default
    } else {
      Appearance.setColorScheme(newMode);
    }
  };

  return {
    isDark,
    mode,
    setMode,
    currentMode: colorScheme,
    toggleMode,
  };
}
```

--------------------------------

### Install BNA UI Input Component

Source: https://ui.ahmedbna.com/docs/components/input

Instructions for installing the BNA UI Input component using pnpm, npm, or yarn. This command adds the necessary package to your project.

```bash
pnpm dlx bna-ui add input
```

--------------------------------

### Basic ThemeProvider Setup in App.tsx

Source: https://ui.ahmedbna.com/docs/theme/theme-provider

Demonstrates how to wrap the entire application with the ThemeProvider at the root level to manage theme state and integrate with React Navigation.

```typescript
import { ThemeProvider } from '@/theme/theme-provider';
import { NavigationContainer } from '@react-navigation/native';
 
export default function App() {
  return (
    <ThemeProvider>
      <NavigationContainer>
        {/* Your navigation components */}
      </NavigationContainer>
    </ThemeProvider>
  );
}
```

--------------------------------

### Define Global UI Constants in TypeScript

Source: https://ui.ahmedbna.com/docs/installation

Defines essential global constants for UI elements in TypeScript, including fixed values for height, font size, border radius, and corner rounding. These constants are intended for consistent application across the project's UI components.

```typescript
export const HEIGHT = 48;
export const FONT_SIZE = 17;
export const BORDER_RADIUS = 26;
export const CORNERS = 999;
```

--------------------------------

### Install BNA UI Gallery

Source: https://ui.ahmedbna.com/docs/components/gallery

Instructions for installing the BNA UI Gallery component using package managers like pnpm, npm, and yarn. It shows the command to add the gallery package to your project.

```bash
pnpm dlx bna-ui add gallery
```

--------------------------------

### Install ParallaxScrollView with pnpm

Source: https://ui.ahmedbna.com/docs/components/parallax-scrollview

Installs the parallax-scrollview component using pnpm. This is a direct command-line installation for the specified package.

```bash
pnpm dlx bna-ui add parallax-scrollview
```

--------------------------------

### Initialize BNA UI Project with CLI

Source: https://ui.ahmedbna.com/docs/cli

Initializes a new React Native or Expo project with BNA UI configuration, dependencies, and component structure. Supports various templates and styling options. This command is essential for setting up a new project before adding components.

```bash
pnpm dlx bna-ui init
```

```bash
pnpm dlx bna-ui init --template expo --typescript
```

--------------------------------

### Progress Component Examples

Source: https://ui.ahmedbna.com/docs/components/progress

Demonstrates various functionalities of the Progress component, including default display, interactivity, custom heights, and use with labels. These examples showcase the component's flexibility in different use cases.

```javascript
// Default Progress
<Progress value={65} />

// Interactive Progress
<Progress value={50} onValueChange={(v) => console.log(v)} interactive={true} />

// Custom Height Progress
<Progress value={75} height={10} />

// Progress with Labels
<Progress value={90} label="Loading..." />

```

--------------------------------

### Install Separator Component with pnpm

Source: https://ui.ahmedbna.com/docs/components/separator

This snippet shows how to install the Separator component using pnpm. It is a command-line installation that adds the necessary package to your project.

```bash
pnpm dlx bna-ui add separator
```

--------------------------------

### Basic App Structure with ThemeProvider and Stack Navigator

Source: https://ui.ahmedbna.com/docs/theme/theme-provider

A complete example of a React Native app structure using ThemeProvider, NavigationContainer, and createStackNavigator to manage navigation and themeing.

```typescript
import { ThemeProvider } from '@/theme/theme-provider';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from '@/screens/HomeScreen';
import { SettingsScreen } from '@/screens/SettingsScreen';
 
const Stack = createStackNavigator();
 
export default function App() {
  return (
    <ThemeProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name='Home' component={HomeScreen} />
          <Stack.Screen name='Settings' component={SettingsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  );
}
```

--------------------------------

### Install BNA UI Video Component

Source: https://ui.ahmedbna.com/docs/components/video

Instructions for installing the BNA UI Video component using package managers like pnpm, npm, or yarn. This command adds the necessary package to your project.

```bash
pnpm dlx bna-ui add video
```

--------------------------------

### Install useColorScheme Hook with pnpm

Source: https://ui.ahmedbna.com/docs/hooks/useColorScheme

This command installs the 'useColorScheme' hook from the 'bna-ui' package using pnpm. It's a one-line installation process for integrating the hook into your project.

```bash
pnpm dlx bna-ui add useColorScheme
```

--------------------------------

### Install SearchBar Component (PNPM)

Source: https://ui.ahmedbna.com/docs/components/searchbar

This snippet shows how to install the SearchBar component using PNPM. It utilizes the `pnpm dlx bna-ui add searchbar` command for installation.

```bash
pnpm dlx bna-ui add searchbar
```

--------------------------------

### Install BNA UI Action Sheet Component

Source: https://ui.ahmedbna.com/docs/components/action-sheet

Provides commands to install the action-sheet component using pnpm, yarn, or npm. This is the initial step before using the component in your project.

```shell
pnpm dlx bna-ui add action-sheet
```

--------------------------------

### Install Tabs Component with pnpm

Source: https://ui.ahmedbna.com/docs/components/tabs

Instructions for installing the Tabs component using pnpm. This command downloads and installs the necessary package for using the Tabs feature.

```bash
pnpm dlx bna-ui add tabs
```

--------------------------------

### Install BNA UI Pie Chart Component

Source: https://ui.ahmedbna.com/docs/charts/pie-chart

Instructions for installing the BNA UI pie-chart component using pnpm. Ensure you have pnpm installed globally.

```bash
pnpm dlx bna-ui add pie-chart
```

--------------------------------

### Install Chart Container Component

Source: https://ui.ahmedbna.com/docs/charts/chart-container

Install the Chart Container component using pnpm, npm, or yarn. This command fetches and installs the necessary package for your project.

```bash
pnpm dlx bna-ui add chart-container
```

--------------------------------

### Install useKeyboardHeight Hook (PNPM)

Source: https://ui.ahmedbna.com/docs/hooks/useKeyboardHeight

Installs the `useKeyboardHeight` hook using PNPM for managing keyboard interactions in React Native applications. This command automates the download and installation process.

```bash
pnpm dlx bna-ui add useKeyboardHeight
```

--------------------------------

### Install BNA UI Radio Component

Source: https://ui.ahmedbna.com/docs/components/radio

Instructions for installing the Radio component using package managers like pnpm, npm, and yarn. It also shows the command to add it specifically using pnpm.

```bash
pnpm install
yarn
npm install
bun install
```

```bash
pnpm dlx bna-ui add radio
```

--------------------------------

### Install useModeToggle Hook with PNPM

Source: https://ui.ahmedbna.com/docs/hooks/useModeToggle

This snippet demonstrates how to install the useModeToggle hook using the PNPM package manager. It utilizes the 'pnpm dlx bna-ui add' command for installation.

```bash
pnpm dlx bna-ui add useModeToggle
```

--------------------------------

### Environment Variables for Convex and Authentication

Source: https://ui.ahmedbna.com/docs/convex

This snippet lists the required environment variables for setting up Convex, Google OAuth, Apple Sign-In, Email Provider (for OTP), and the redirect URL for Expo.

```shell
# Convex
CONVEX_DEPLOYMENT=your-deployment-url

# Google OAuth
AUTH_GOOGLE_ID=your-ios-client-id
AUTH_GOOGLE_SECRET=your-android-secret-id

# Apple Sign-In (iOS only)
AUTH_APPLE_ID=your-apple-service-identifier
AUTH_APPLE_SECRET=your-apple-secret

# Email Provider (for OTP)
AUTH_RESEND_KEY=your-resend-api-key

# Redirect Url
EXPO_URL=your-app-schema://

```

--------------------------------

### Install Text Component using pnpm

Source: https://ui.ahmedbna.com/docs/components/text

Instructions for installing the Text component using pnpm. This command uses pnpm's dlx to execute the add command, ensuring the latest version is installed.

```bash
pnpm dlx bna-ui add text
```

--------------------------------

### Install BNA UI Globals using pnpm

Source: https://ui.ahmedbna.com/docs/theme/globals

This snippet demonstrates how to install the global theme constants for BNA UI using pnpm. It involves a single command to add the necessary package to your project.

```bash
pnpm dlx bna-ui add globals
```

--------------------------------

### Install BNA UI Popover Component

Source: https://ui.ahmedbna.com/docs/components/popover

Instructions for installing the BNA UI Popover component using different package managers (pnpm, npm, yarn, bun). This command installs the popover package and its dependencies.

```bash
pnpm dlx bna-ui add popover
```
Tokens:
Raw