One

https://onestack.dev/docs/
Admin
One is a Vite plugin for building websites and apps with React and React Native using typed...
Tokens:105,585
Snippets:1,113
Trust Score:7.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### setupFile configuration

Source: https://onestack.dev/docs/configuration

Configuration example for the 'setupFile' option in the One plugin, showing single-file, per-environment, and platform-specific setups.

```javascript
export default {
  plugins: [
    one({
      // Single file for all environments
      setupFile: './setup.ts',


      // Or different files per environment
      setupFile: {
        client: './setup.client.ts',
        server: './setup.server.ts',
        native: './setup.native.ts',
      },


      // Or with platform-specific native files
      setupFile: {
        client: './setup.client.ts',
        server: './setup.server.ts',
        ios: './setup.ios.ts',
        android: './setup.android.ts',
      },
    }),
  ],
}

```

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

### Run with Bun

Source: https://onestack.dev/docs/installation

Install dependencies and start the development server using Bun.

```bash
bun install && bun run dev
```

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

### Install One Stack

Source: https://onestack.dev

Use this command to quickly start a new project with One Stack. It initializes a new project with the framework's default configuration.

```bash
npx one
```

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

### Basic GET Endpoint

Source: https://onestack.dev/docs/routing-api-routes

This example demonstrates how to create a basic GET endpoint at `/api/hello` that returns a JSON message.

```APIDOC
## GET /api/hello

### Description
Creates a simple endpoint that responds to GET requests with a 'Hello!' message.

### Method
GET

### Endpoint
/api/hello

### Response
#### Success Response (200)
- **message** (string) - A greeting message.

### Request Example
```json
{
  "example": "request body"
}
```

### Response Example
```json
{
  "message": "Hello!"
}
```
```

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

### Install and initialize hot-updater

Source: https://onestack.dev/docs/guides-ota-updates

Install hot-updater packages and run the init command.

```bash
bun add @hot-updater/react-native react-native-mmkv
bun add -D hot-updater @hot-updater/bare @hot-updater/supabase
npx hot-updater init

```

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

### Install One

Source: https://onestack.dev/docs/installation

Install the One package using npm, yarn, or pnpm with exact version pinning.

```bash
npm install one@latest --save-exact
```

```bash
yarn add one@latest --exact
```

```bash
pnpm add one@latest --exact
```

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

### Install Sharp for Image Processing

Source: https://onestack.dev/docs/guides-images

Install the `sharp` package to enable image processing capabilities. If not installed, image dimensions will be zero and blur placeholders empty, with a build-time warning.

```bash
npm install sharp
```

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

### Install Vercel CLI globally

Source: https://onestack.dev/docs/guides-deployment

Optional installation for manual deploys using the Vercel CLI.

```bash
npm install -g vercel

```

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

### Start Development Server

Source: https://onestack.dev/docs/cli

Use `one dev` to start the development server for web and native apps. It supports options for cache clearing, host, port, and debugging.

```bash
one dev [options]

--clean    # clear all caches before running
--host     # set the hostname to bind to
--port     # set the port to bind to
--debug    # turns on vite debugging
```

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

### Install Tamagui dependencies

Source: https://onestack.dev/docs/guides-tamagui

Install the required Tamagui and color-scheme packages.

```bash
npm add tamagui @tamagui/config @tamagui/vite-plugin @vxrn/color-scheme
```

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

### Light and Dark Mode with Tamagui

Source: https://onestack.dev/docs/guides-dark-mode

Code examples for implementing light/dark mode with Tamagui and @vxrn/color-scheme, including layout setup and a theme toggle button.

```tsx
import { Slot } from 'one'
import { TamaguiProvider, Theme } from '@tamagui/core'
import { config } from '@tamagui/config/v3'
import { MetaTheme, SchemeProvider, useUserScheme } from '@vxrn/color-scheme'


export default function Layout() {
  return (
    <SchemeProvider>
      <MetaTheme
        darkColor={config.themes.dark.color1.val}
        lightColor={config.themes.light.color1.val}
      />
      <TamaguiRoot>
        <Theme name="yellow">
          <Slot />
        </Theme>
      </TamaguiRoot>
    </SchemeProvider>
  )
}


const TamaguiRoot = ({ children }) => {
  const userScheme = useUserScheme()
  return (
    <TamaguiProvider disableInjectCSS config={config} defaultTheme={userScheme.value}>
      {children}
    </TamaguiProvider>
  )
}
```

```tsx
import { Moon, Sun, SunMoon } from '@tamagui/lucide-icons-2'
import { useUserScheme } from '@vxrn/color-scheme'
import { View, Paragraph, YStack } from 'tamagui'


const schemeSettings = ['light', 'dark', 'system'] as const


export function ThemeToggleButton() {
  const { onPress, Icon, setting } = useToggleTheme()


  return (
    <View group ai="center" containerType="normal" gap="$1">
      <View
        p="$3"
        br="$10"
        hoverStyle={{
          bg: '$color2',
        }}
        pressStyle={{
          bg: '$color1',
        }}
        pointerEvents="auto"
        cur="pointer"
        onPress={onPress}
      >
        <Icon size={20} />
      </View>


      <YStack>
        <Paragraph
          animation="100ms"
          size="$1"
          mb={-20}
          color="$color10"
          o={0}
          $group-hover={{
            o: 1,
          }}
        >
          {setting[0].toUpperCase()}
          {setting.slice(1)}
        </Paragraph>
      </YStack>
    </View>
  )
}


export function useToggleTheme() {
  const userScheme = useUserScheme()
  const Icon =
    userScheme.setting === 'system' ? SunMoon : userScheme.setting === 'dark' ? Moon : Sun


  return {
    setting: userScheme.setting,
    scheme: userScheme.value,
    Icon,
    onPress: () => {
      const next = schemeSettings[(schemeSettings.indexOf(userScheme.setting) + 1) % 3]
      userScheme.set(next)
    },
  }
}
```

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

### useNavigation Examples

Source: https://onestack.dev/docs/hooks-useNavigation

Examples demonstrating various use cases of the useNavigation hook, including screen focus events, dynamic screen options, before remove event, accessing parent navigators, and navigation state.

```jsx
import { useNavigation } from 'one'
import { useEffect } from 'react'


function ProfileScreen() {
  const navigation = useNavigation()


  useEffect(() => {
    const unsubscribeFocus = navigation.addListener('focus', () => {
      // Refresh data when screen comes into focus
      fetchUserData()
    })


    const unsubscribeBlur = navigation.addListener('blur', () => {
      // Cleanup when leaving screen
      cancelPendingRequests()
    })


    return () => {
      unsubscribeFocus()
      unsubscribeBlur()
    }
  }, [navigation])


  return <View />
}
```

```jsx
import { useNavigation } from 'one'
import { useEffect } from 'react'


function ChatScreen({ chatName }) {
  const navigation = useNavigation()


  useEffect(() => {
    navigation.setOptions({
      title: chatName,
      headerRight: () => <SettingsButton />,
    })
  }, [navigation, chatName])


  return <View />
}
```

```jsx
import { useNavigation } from 'one'
import { useEffect, useState } from 'react'
import { Alert } from 'react-native'


function EditorScreen() {
  const navigation = useNavigation()
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)


  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', (e) => {
      if (!hasUnsavedChanges) return


      // Prevent default behavior of leaving the screen
      e.preventDefault()


      Alert.alert(
        'Discard changes?',
        {
          text: 'Discard',
          style: 'destructive',
          onPress: () => navigation.dispatch(e.data.action),
        },
      )
    })


    return unsubscribe
  }, [navigation, hasUnsavedChanges])


  return <View />
}
```

```jsx
import { useNavigation } from 'one'


function DetailsScreen() {
  // Get the tabs navigator to switch tabs programmatically
  const tabsNavigation = useNavigation('/(tabs)')


  const goToProfile = () => {
    // Jump to the profile tab
    tabsNavigation.navigate('profile')
  }


  return (
    <Button onPress={goToProfile}>
      Go to Profile Tab
    </Button>
  )
}
```

```jsx
import { useNavigation } from 'one'


function DebugComponent() {
  const navigation = useNavigation()
  const state = navigation.getState()


  console.log('Current route index:', state.index)
  console.log('Route history:', state.routes.map(r => r.name))


  return <View />
}
```

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

### SafeAreaView Examples

Source: https://onestack.dev/docs/components-SafeAreaView

Code examples demonstrating SafeAreaView usage, edge configuration, margin mode, and useSafeAreaInsets hook.

```jsx
import { SafeAreaView, Slot } from 'one'


export default function Layout() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Slot />
    </SafeAreaView>
  )
}

```

```jsx
import { SafeAreaView } from 'one'


// Only apply to top (useful for screens with bottom tabs)
<SafeAreaView edges={['top']}>
  {/* Content */}
</SafeAreaView>


// Only apply to top and bottom
<SafeAreaView edges={['top', 'bottom']}>
  {/* Content */}
</SafeAreaView>

```

```jsx
<SafeAreaView mode="margin" style={{ flex: 1 }}>
  {/* Content */}
</SafeAreaView>

```

```jsx
import { useSafeAreaInsets } from 'one'


function MyComponent() {
  const insets = useSafeAreaInsets()


  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {/* Content */}
    </View>
  )
}

```

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

### Web Drawer Layout with useDrawer

Source: https://onestack.dev/docs/components-Drawer

On web, Drawer renders headless. Use useDrawer to get screens, focused, isOpen, and actions. This example shows a custom sidebar and a Layout component that includes Drawer.Screen definitions.

```tsx
import { Drawer } from 'one/drawer'
import { Link, useDrawer } from 'one'


function WebDrawerLayout() {
  const { screens, focused, isOpen, close, toggle } = useDrawer()


  return (
    <>
      <button onClick={toggle}>Menu</button>


      {isOpen && (
        <nav>
          {screens.map((screen) => (
            <Link key={screen.key} href={screen.href} onPress={close}>
              {screen.options.drawerLabel ?? screen.options.title ?? screen.name}
            </Link>
          ))}
        </nav>
      )}


      {focused.element}
    </>
  )
}


export default function Layout() {
  return (
    <Drawer>
      <Drawer.Screen name="index" options={{ drawerLabel: 'Home' }} />
      <Drawer.Screen name="settings" options={{ drawerLabel: 'Settings' }} />
      <WebDrawerLayout />
    </Drawer>
  )
}

```

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

### useSitemap Examples

Source: https://onestack.dev/docs/hooks-useSitemap

Code examples demonstrating the useSitemap hook, its return type, and filtering internal routes.

```jsx
import { useSitemap } from 'one'


export default function Sitemap() {
  const sitemap = useSitemap()
  if (!sitemap) return null


  return <SitemapNode node={sitemap} />
}


function SitemapNode({ node }) {
  return (
    <View>
      <Text>{node.filename} → {node.href}</Text>
      {node.children.map((child) => (
        <SitemapNode key={child.contextKey} node={child} />
      ))}
    </View>
  )
}
```

```typescript
type SitemapType = {
  contextKey: string      // module key for the route file (e.g. './(app)/_layout.tsx')
  filename: string        // human-readable filename (e.g. '(app)/_layout')
  href: string            // route pattern (e.g. '/(app)/thread/[id]')
  isInitial: boolean      // true if this is the initial route of its layout
  isInternal: boolean     // true for One-internal routes
  isGenerated: boolean    // true for in-memory routes (not user files)
  children: SitemapType[] // nested routes
}
```

```javascript
const docsHref = node.href.replace('[...slug]', 'getting-started/install')
```

```typescript
function visibleChildren(node: SitemapType) {
  return node.children.filter((child) => !child.isInternal && !child.isGenerated)
}
```

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

### Run migrated One app with yarn start

Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one

Starts the development server. The app will be available at http://localhost:8081, and the port can be changed with the --port flag.

```bash
yarn start

```

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

### Install @vxrn/mdx and mdx-bundler

Source: https://onestack.dev/docs/guides-mdx

Install the @vxrn/mdx package and mdx-bundler as dependencies for MDX support.

```bash
yarn add @vxrn/mdx mdx-bundler
```

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

### Protected Component Examples

Source: https://onestack.dev/docs/components-Protected

Code examples demonstrating the usage of the Protected component in various navigation contexts.

```jsx
import { Stack, Protected } from 'one'
import { useSession } from '~/features/auth/ctx'


export default function Layout() {
  const { session } = useSession()


  return (
    <Stack>
      <Stack.Screen name="login" options={{ title: 'Login' }} />
    </Stack>
  )
}

```

```jsx
<Stack>
  <Stack.Screen name="login" />
  <Protected guard={session} redirectTo="/login">
    <Stack.Screen name="dashboard" />
    <Stack.Screen name="settings" />
  </Protected>
</Stack>
```

```jsx
import { Tabs, Protected } from 'one'


export default function TabLayout() {
  const { isAdmin } = useUser()


  return (
    <Tabs>
      <Tabs.Screen name="home" />
      <Protected guard={isAdmin}>
        <Tabs.Screen name="admin" />
      </Protected>
    </Tabs>
  )
}

```

```jsx
<Stack>
  <Stack.Screen name="public" />
  <Protected guard={isLoggedIn}>
    <Stack.Screen name="dashboard" />
    <Protected guard={isPremium}>
      <Stack.Screen name="premium-features" />
    </Protected>
  </Protected>
</Stack>
```

```jsx
export default function AppLayout() {
  const { session, isLoading } = useSession()


  if (isLoading) return null
  if (!session) return <Redirect href="/login" />


  return (
    <Stack>
      <Stack.Screen name="index" />
      <Protected guard={session.role === 'admin'}>
        <Stack.Screen name="admin" />
      </Protected>
    </Stack>
  )
}

```

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

### Install @vercel/og

Source: https://onestack.dev/docs/guides-open-graph

Install the @vercel/og package to enable dynamic OpenGraph image generation.

```bash
npm install @vercel/og
```

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

### Nested Layouts Example

Source: https://onestack.dev/docs/routing-layouts

Code examples for nested layouts using One's file system routing.

```tsx
import { Bell, Home, User } from '@tamagui/lucide-icons-2'


export function RootLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="(feed)"
        options={{
          title: 'Feed',
          tabBarIcon: ({ color }) => <Home size={20} color={color} />,
        }}
      />


      <Tabs.Screen
        name="notifications"
        options={{
          title: 'Notifications',
          tabBarIcon: ({ color }) => <Bell size={20} color={color} />,
        }}
      />

      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <User size={20} color={color} />,
        }}
      />
    </Tabs>
  )
}
```

```tsx
import { Slot, Stack } from 'one'


export default function FeedLayout() {
  return (
    <>
      {typeof window !== 'undefined' ? (
        <Slot />
      ) : (
        <Stack>
          <Stack.Screen name="index" options={{ title: 'Feed' }} />
          <Stack.Screen name="post-[id]" options={{ title: 'Post' }} />
        </Stack>
      )}
    </>
  )
}
```

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

### GET /api/hello

Source: https://onestack.dev/docs/routing-api-routes

A simple GET endpoint that returns a JSON response with 'hello: world'.

```APIDOC
## GET /api/hello

### Description
A simple GET endpoint that returns a JSON response with 'hello: world'.

### Method
GET

### Endpoint
/api/hello

### Response
#### Success Response (200)
- **hello** (string) - A greeting message.

### Response Example
{
  "hello": "world"
}
```

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

### Install One dependency with yarn

Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one

Adds the One package to the project. Run this in the project root to install One and its dependencies.

```bash
yarn add one

```

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

### useRouter Example

Source: https://onestack.dev/docs/components-ScrollBehavior

Use useRouter for programmatic navigation with scroll options.

```jsx
import { useRouter } from 'one'


function MyComponent() {
  const router = useRouter()


  const handleClick = () => {
    // ...
  }
}

```

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

### Dev Tools Code Examples

Source: https://onestack.dev/docs/dev-tools

Code examples from the Dev Tools documentation: a sample input recording log and a Vite configuration disabling devtools.

```plaintext
# https://localhost:3000/dashboard
# components: Button < Card < Dashboard
# selector: [data-testid="submit-btn"]
# window: 1920x1080 scroll:0,0
# duration: 3200ms events: 28


0 click 450,320 btn:0 [#submit] @Button.tsx:15 "Submit"
85 keydown Tab
142 focus [input.email]
200 input val:"test@" [input.email]


# final hover: [.sidebar > nav]
# final source: Nav.tsx:42:5
```

```javascript
import { one } from 'one/vite'


export default {
  plugins: [
    one({
      devtools: false
    })
  ]
}
```

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

### Install One skills for AI agents

Source: https://onestack.dev/docs/installation

Installs the official One skills so AI agents like Claude Code, Cursor, and Codex know how to build with One. Full list and per-agent instructions are at github.com/onestack/skills.

```bash
npx skills add onestack/skills
```

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

### Import @vxrn/native in native setup

Source: https://onestack.dev/docs/components-Stack

Import @vxrn/native in your native setup file to register the native toolbar implementation before the app renders. Without this import, Stack.Toolbar remains a no-op on native.

```javascript
import '@vxrn/native'
```

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

### Bootstrap One with npx one

Source: https://onestack.dev/docs/installation

Run this command to start the CLI and choose a starter template. Recommended for first-time users.

```bash
npx one
```

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

### URLSearchParams Methods Example

Source: https://onestack.dev/docs/hooks-useSearchParams

Illustrates common URLSearchParams methods such as get, has, getAll, iteration, and toString. These methods are available on the object returned by useSearchParams.

```javascript
const searchParams = useSearchParams()


// Get a single value
searchParams.get('key')        // string | null


// Check if param exists
searchParams.has('key')        // boolean


// Get all values for a key (for repeated params)
searchParams.getAll('tag')     // string[]


// Iterate over all entries
for (const [key, value] of searchParams) {
  console.log(key, value)
}


// Convert to string
searchParams.toString()        // 'key=value&other=123'
```

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

### Build and serve production with npx one

Source: https://onestack.dev/docs/guides-deployment

Commands to build for production and start the production server. The build output is placed in the dist directory with client, server, and api subdirectories.

```bash
# Build for production
npx one build


# Start the production server
npx one serve

```

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

### API Route Example

Source: https://onestack.dev/docs/render-modes

Defines a simple GET endpoint for an API route. API routes use standard Web Request and Response objects and are intended to be called from other routes or services.

```typescript
export function GET(request: Request) {
  return Response.json({ message: 'Hello!' })
}
```

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

### useLoaderState with loader

Source: https://onestack.dev/docs/hooks-useLoaderState

Pass a loader function to useLoaderState to get data, refetch, and state. The state is 'loading' during fetch, and refetch triggers a manual reload. The example shows a search page with a refresh button.

```jsx
import { useLoaderState } from 'one'


export function loader({ path }) {
  const url = new URL(path, 'http://localhost')
  const query = url.searchParams.get('q') || ''


  return fetch(`/api/search?q=${query}`).then(r => r.json())
}


export default function SearchPage() {
  const { data, refetch, state } = useLoaderState(loader)


  return (
    <div>
      <h1>Search Results</h1>
      {state === 'loading' ? (
        <Spinner />
      ) : (
        <Results data={data} />
      )}
      <button onClick={refetch} disabled={state === 'loading'}>
        Refresh Results
      </button>
    </div>
  )
}
```

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

### Deploy One app to Vercel production

Source: https://onestack.dev/docs/guides-deployment

Use the --prod flag to deploy to production with the prebuilt output.

```bash
vercel deploy --prebuilt --prod

```

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

### TypeScript typing for useSegments

Source: https://onestack.dev/docs/hooks-useSegments

Defines a strict type for segments based on the file structure and uses useSegments<AppSegments>() to get type safety. The example shows a RouteHandler that conditionally renders based on the segments.

```typescript
// Given file structure:
//   settings.tsx
//   [user]/
//     index.tsx
//     followers.tsx


type AppSegments =
  | ['settings']
  | ['[user]']
  | ['[user]', 'followers']


function RouteHandler() {
  const segments = useSegments<AppSegments>()


  if (segments[0] === 'settings') {
    return <SettingsPage />
  }


  if (segments[0] === '[user]') {
    if (segments[1] === 'followers') {
      return <FollowersPage />
    }
    return <UserPage />
  }
}
```

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

### Enable react-native-screens gamma mode in Podfile

Source: https://onestack.dev/docs/native-features

Required setup for SplitView: add this line to the top of your Podfile to enable gamma mode, then run pod install. Currently blocked on an upstream react-native-screens issue with Fabric.

```ruby
ENV['RNS_GAMMA_ENABLED'] ||= '1'
```

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

### Deploy One app preview to Vercel

Source: https://onestack.dev/docs/guides-deployment

Deploy a preview (not production) using the Vercel CLI with the --prebuilt flag. This is the most reliable way to test before promoting to production.

```bash
# Deploy a preview (not production)
vercel deploy --prebuilt

```

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

### Toolbar Implementation with ToolbarHost and ToolbarItem

Source: https://onestack.dev/docs/native-features

Native iOS UIToolbar rendered at the bottom of the screen. Supports SF Symbols, badges, and Liquid Glass on iOS 26. Requires installing @vxrn/native directly in the app and adding import '@vxrn/native' to its native setup file.

```tsx
import { ToolbarHost, ToolbarItem, Color } from '@vxrn/native'


function MyScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Text>Content</Text>


      <ToolbarHost>
        <ToolbarItem
          identifier="add"
          title="Add"
          systemImageName="plus"
          tintColor={Color.ios.systemBlue}
          onSelected={() => console.log('add tapped')}
        />
        <ToolbarItem identifier="spacer" type="fluidSpacer" />
        <ToolbarItem
          identifier="share"
          title="Share"
          systemImageName="square.and.arrow.up"
          barButtonItemStyle="prominent"
          onSelected={() => console.log('share tapped')}
        />
        <ToolbarItem
          identifier="settings"
          systemImageName="gearshape"
          badgeConfiguration={{ value: '3' }}
          onSelected={() => console.log('settings tapped')}
        />
      </ToolbarHost>
    </View>
  )
}
```

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

### one serve Command Line Arguments

Source: https://onestack.dev/docs/one-serve

Configure the server's hostname, port, compression, environment variable loading, and cluster mode via command-line arguments.

```bash
--host          # string, set the hostname to bind to
--port          # string, set the port to bind to
--compress      # boolean, enable gzip compression, defaults to true
--loadEnv       # boolean, whether to load .env files before running
--cluster       # enable cluster mode using all CPU cores
--cluster=N     # enable cluster mode with N workers
```

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

### Custom Web Tab Bar with useTabs

Source: https://onestack.dev/docs/components-Tabs

On web, Tabs renders headless. This example shows a custom WebTabBar component that uses useTabs to get the tab list and focused tab, rendering navigation links. The WebTabBar is placed as a child of Tabs and is ignored on native.

```tsx
import { Link, Tabs, useTabs } from 'one'


function WebTabBar() {
  const { screens, focused } = useTabs()


  return (
    <>
      <nav>
        {screens.map((tab) => (
          <Link
            key={tab.name}
            href={tab.href}
            className={tab.isFocused ? 'active' : undefined}
          >
            {tab.options.title}
          </Link>
        ))}
      </nav>
      {focused.element}
    </>
  )
}


export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name="explore" options={{ title: 'Explore', href: '/explore' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile', href: '/profile' }} />
      <WebTabBar />
    </Tabs>
  )
}

```

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

### Install expo-updates

Source: https://onestack.dev/docs/guides-ota-updates

Installs the expo-updates package for OTA updates managed by EAS. This is the standard install step for the expo-updates integration.

```bash
npm install expo-updates
```

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

### Programmatic Serve Function

Source: https://onestack.dev/docs/one-serve

Import and use the `serve` function programmatically to start the production server. It accepts an options object for configuration.

```typescript
import { serve } from 'one/serve'


await serve()
```

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

### Install Drawer Dependencies

Source: https://onestack.dev/docs/components-Drawer

Install the optional peer dependencies required by the Drawer: @react-navigation/drawer, react-native-gesture-handler, and react-native-reanimated. These are not installed automatically to keep bundle sizes smaller.

```bash
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

```

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

### Presentations Code Examples

Source: https://onestack.dev/docs/components-Presentations

Code examples from the Presentations documentation page.

```tsx
import { Presentations, Slot } from 'one'
import { Modal } from '~/interface/Modal'
import { Sheet } from '~/interface/Sheet'


export default function Layout() {
  return (
    <Presentations web={{ sheet: Sheet, modal: Modal }}>
      <Slot />
    </Presentations>
  )
}

```

```tsx
<Stack>
  <Stack.Screen
    name="compose"
    options={{ presentation: 'sheet', sheetAllowedDetents: [0.6, 1] }}
  />
</Stack>

```

```tsx
import type { SheetPresentationProps } from 'one'


export function Sheet({ open, onOpenChange, options, children }: SheetPresentationProps) {
  const theme = useTheme()


  return (
    <div />
  )
}

```

```tsx
<Presentations web={{ sheet: Sheet }}>
  <Slot />
  <Presentations web={{ sheet: SpecialSheet }}>
    {/* screens rendered under here use SpecialSheet instead */}
  </Presentations>
</Presentations>

```

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

### Middleware Execution Flow Example

Source: https://onestack.dev/docs/routing-middlewares

Illustrates the sequential execution of middlewares from the root to a specific route handler, followed by response bubbling.

```text
Request to /blog/post/123
         ↓
1. app/_middleware.ts (runs first)
         ↓
2. app/blog/_middleware.ts (runs second)
         ↓
3. app/blog/post/_middleware.ts (runs third)
         ↓
4. Route handler executes
         ↓
   Responses bubble back up through each middleware
```

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

### Build static export

Source: https://onestack.dev/docs/guides-deployment

Builds the app for static hosting. Upload the dist/client directory to any static host.

```bash
npx one build
# Upload dist/client to your static host

```

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

### Build and deploy One app to Vercel manually

Source: https://onestack.dev/docs/guides-deployment

Build the app for Vercel and deploy using the Vercel CLI with the --prebuilt flag to use the pre-generated output.

```bash
# Build for Vercel
npx one build


# Deploy using Vercel CLI
vercel deploy --prebuilt

```

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

### Install NativeTabs dependencies

Source: https://onestack.dev/docs/components-NativeTabs

Install required packages for NativeTabs: @bottom-tabs/react-navigation and react-native-bottom-tabs.

```bash
npx expo install @bottom-tabs/react-navigation react-native-bottom-tabs
```

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

### GET Headers

Source: https://onestack.dev/docs/routing-api-routes

Handles GET requests and retrieves the 'Authorization' header from the request.

```APIDOC
## GET /

### Description
Handles GET requests and retrieves the 'Authorization' header from the request.

### Method
GET

### Endpoint
/

### Parameters
#### Headers
- **Authorization** (string) - Required - The authorization token.

### Response
#### Success Response (200)
- **authenticated** (boolean) - Indicates if an Authorization header was present.

### Request Example
```json
{
  "example": "request body"
}
```

### Response Example
```json
{
  "authenticated": true
}
```
```

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

### Test production build locally with One

Source: https://onestack.dev/docs/guides-deployment

Build the app and serve the production build locally. Note: this runs the Hono server from dist/, not actual Vercel serverless functions.

```bash
# Build the app
npx one build


# Serve the production build
npx one serve

```

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

### alias configuration

Source: https://onestack.dev/docs/configuration

Configuration example for the 'alias' option in the One plugin, showing per-environment aliases for web, native, and ssr.

```javascript
export default {
  plugins: [
    one({
      alias: {
        // applies to client + ssr environments
        web: {
          'react-native-web': '@tamagui/react-native-web-lite',
        },


        // applies to ios + android environments
        native: {
          'some-package': 'some-package-native',
        },


        // overrides web for ssr only
        ssr: {
          'some-package': 'some-package-ssr',
        },
      },
    }),
  ],
}

```

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

### Enable React Compiler with one() plugin

Source: https://onestack.dev/docs/configuration

Configuration example for enabling the React Compiler in a One.js project, showing various options: boolean, string, RegExp, function, and per-platform object.

```javascript
export default {
  plugins: [
    one({
      react: {
        compiler: true, // enable for all platforms
        // or
        compiler: 'web', // enable only for web
        // or
        compiler: 'native', // enable only for native
        // or
        compiler: /\/app\//, // enable for files matching regex
        // or
        compiler: (id, env) => {
          // env is 'ios' | 'android' | 'client' | 'ssr'
          return id.includes('/components/')
        },
        // or configure per-platform
        compiler: {
          web: true,
          native: /\/components\//,
        },
      },
    }),
  ],
}
```

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

### Set ONE_SERVER_URL for production

Source: https://onestack.dev/docs/one-build

Ensure your `.env` file has `ONE_SERVER_URL` set to your production URL before building for web.

```bash
ONE_SERVER_URL=https://onestack.dev

```

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

### Programmatic Server Implementation

Source: https://onestack.dev/docs/cli

Programmatically serve your production application using the `serve` function from 'one/serve'. It accepts various options for customization.

```javascript
import { serve } from 'one/serve'


await serve()
```

```javascript
type ServeOptions = {
  // you can pass in your own Hono server
  app?: Hono


  host?: string
  port?: number
  compress?: boolean


  /**
    * Whether to run the Vite logic to load .env files before running the server
    * @default false
    */
  loadEnv?: boolean
}
```

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

### Serve Production Web App

Source: https://onestack.dev/docs/cli

Use `one serve` to serve your built web application for production. It is powered by Hono and supports options for host, port, compression, and clustering.

```bash
one serve [options]


--host          # set the hostname to bind to
--port          # set the port to bind to
--compress      # enable gzip compression (default: true)
--loadEnv       # load .env files before running
--cluster       # enable cluster mode using all CPU cores
--cluster=N     # enable cluster mode with N workers
```

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

### GET Query Parameters

Source: https://onestack.dev/docs/routing-api-routes

Handles GET requests and extracts 'page' and 'limit' query parameters from the URL.

```APIDOC
## GET /

### Description
Handles GET requests and extracts 'page' and 'limit' query parameters from the URL.

### Method
GET

### Endpoint
/

### Parameters
#### Query Parameters
- **page** (string) - Optional - The page number for pagination. Defaults to '1'.
- **limit** (string) - Optional - The number of items per page. Defaults to '10'.

### Response
#### Success Response (200)
- **page** (string) - The extracted page number.
- **limit** (string) - The extracted limit per page.

### Request Example
```json
{
  "example": "request body"
}
```

### Response Example
```json
{
  "page": "1",
  "limit": "10"
}
```
```

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

### Create vercel.json for One project

Source: https://onestack.dev/docs/guides-deployment

Place this vercel.json in your project root. Setting framework to null uses the pre-built output, and cleanUrls enables SSG routes without .html extensions.

```json
{
  "framework": null,
  "cleanUrls": true,
  "buildCommand": "npx one build",
  "installCommand": "npm install"
}

```

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

### One Configuration with Native Transform

Source: https://onestack.dev/docs/metro-mode

Example of configuring One to use a custom native transform module.

```javascript
one({
  native: {
    bundler: 'metro',
    bundlerOptions: {
      nativeTransformModules: ['./scripts/my-transform.cjs'],
    },
  },
})

```

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

### Middleware API Reference with Type Definitions

Source: https://onestack.dev/docs/routing-middlewares

This example shows the detailed type definitions for the middleware handler provided by `createMiddleware`. It illustrates the `MiddlewareProps` interface, including `request`, `next`, and `context` properties, and how to use them within your middleware logic.

```typescript
import { createMiddleware, type Middleware } from 'one'


type MiddlewareProps = {
  request: Request // Standard Web API Request
  next: () => Promise<Response | null> // Call the next middleware/route
  context: Record<string, any> // Shared mutable object for data passing
}


export default createMiddleware(async ({ request, next, context }: MiddlewareProps) => {
  // Your middleware logic
})
```

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

### useScrollGroup Usage Examples

Source: https://onestack.dev/docs/hooks-useScrollGroup

Examples of using useScrollGroup in a layout, custom group path, programmatic navigation, and type signature.

```tsx
import { useScrollGroup, Slot } from 'one'


export default function DashboardLayout() {
  // All routes under /dashboard will share scroll position
  useScrollGroup()


  return (
    <div>
      <nav>Dashboard Navigation</nav>
      <Slot />
    </div>
  )
}
```

```tsx
// Create a scroll group for a specific path prefix
useScrollGroup('/products')
```

```tsx
import { useRouter } from 'one'


function MyComponent() {
  const router = useRouter()


  const goToSettings = () => {
    router.navigate('/dashboard/settings', {
      scrollGroup: '/dashboard'
    })
  }


  return <button onClick={goToSettings}>Go to Settings</button>
}
```

```ts
function useScrollGroup(groupPath?: string): void
```

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

### Using ogUrl Helper

Source: https://onestack.dev/docs/guides-open-graph

Example of using the ogUrl helper to generate an Open Graph image URL for a blog post.

```ts
import { ogUrl } from '~/features/og'


const imageUrl = ogUrl({
  title: 'My Blog Post',
  type: 'blog',
  author: 'Jane Doe',
})

```

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

### GET Request with Redirect

Source: https://onestack.dev/docs/routing-api-routes

Handles GET requests and performs a redirect to a different API endpoint based on route parameters.

```typescript
import { redirect } from 'one'


export function GET(request: Request, { params }: { params: { id: string } }) {
  return redirect(`/api/v2/users/${params.id}`)
}
```

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

### Native Bundler Options

Source: https://onestack.dev/docs/configuration

Configuration for native bundler options with plugins (incomplete example).

```javascript
export default {
  plugins: [
    one({
      native: {
        bundlerOptions: {
          plugins: [
        },
      },
    }),
  ],
}
```
Tokens:
Raw