### Install @callstack/liquid-glass

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/callstack-liquid-glass.md

Install the library. For vanilla React Native projects use npm install; for Expo projects prefer npx expo install.

```bash
npm install @callstack/liquid-glass
```

```bash
npx expo install @callstack/liquid-glass
```

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

### Install agent skills with npx

Source: https://github.com/devanshudesai/agent-skills/blob/main/README.md

Use this command to install the agent-skills package. After installation, skills are automatically available to the agent.

```bash
npx skills add devanshuDesai/agent-skills
```

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

### Example prompts for using skills

Source: https://github.com/devanshudesai/agent-skills/blob/main/README.md

These example prompts show how to invoke the skills. They are provided as plain text examples, not executable code.

```text
Add a floating glass toolbar to the home screen
```

```text
Audit the design of my app
```

```text
Make the checkout screen look better
```

```text
Set up native Liquid Glass tab bars with expo-router
```

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

### Install @expo/ui

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Install the @expo/ui package using npx expo install. Requires SDK 54+ and a development build.

```bash
npx expo install @expo/ui
```

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

### SDK 54 to 55 Migration Example

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

This example shows the migration from SDK 54 to SDK 55 for trigger subcomponents. The SDK 54 code uses 'Icon' and 'Label', while SDK 55 uses 'TabBarIcon' and 'TabBarLabel'. The 'Icon' alias still works in SDK 55 for compatibility.

```tsx
// SDK 54
<NativeTabs.Trigger.Icon sf="house.fill" md="home" />
<NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>

// SDK 55
<NativeTabs.Trigger.TabBarIcon
  ios={{ default: 'house', selected: 'house.fill' }}
  androidIconName="home"
/>
<NativeTabs.Trigger.TabBarLabel>Home</NativeTabs.Trigger.TabBarLabel>
```

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

### Install expo-router@next for native tabs

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Install the unstable native tabs API using the current unstable channel. Requires Expo Router v6.

```bash
# current unstable channel
npx expo install expo-router@next
```

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

### SwiftUI Layout with Host and HStack

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Use Host with HStack and VStack for layout instead of flexbox. The example shows a toolbar with left and right text separated by a Spacer, using padding and glassEffect modifiers.

```tsx
import { Host, HStack, VStack, Text, Spacer } from '@expo/ui/swift-ui';
import { padding, glassEffect } from '@expo/ui/swift-ui/modifiers';

function GlassToolbar() {
  return (
    <Host style={{ width: '100%', height: 60 }}>
      <HStack modifiers={[padding({ horizontal: 16 }), glassEffect({ glass: { variant: 'regular' } })]}>
        <Text>Left</Text>
        <Spacer />
        <Text>Right</Text>
      </HStack>
    </Host>
  );
}
```

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

### Mixing React Native and SwiftUI Components

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Nest React Native components as JSX children within Host. The example shows a VStack with a SwiftUI Text and a comment indicating RN View usage.

```tsx
<Host style={{ flex: 1 }}>
  <VStack>
    <Text>SwiftUI Text</Text>
    {/* RN View as child - use with care */}
  </VStack>
</Host>
```

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

### Guarded Adaptive Glass Wrapper (Pattern A)

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/SKILL.md

Use this component to render glass effects adaptively: expo-glass-effect when available, iOS blur as fallback, and a semi-transparent View otherwise. It requires expo-blur and expo-glass-effect installed.

```tsx
import { Platform, View } from 'react-native';
import { BlurView } from 'expo-blur';
import { GlassView, isGlassEffectAPIAvailable } from 'expo-glass-effect';

export function AdaptiveGlass({ style, children }) {
  if (isGlassEffectAPIAvailable()) {
    return (
      <GlassView style={style} glassEffectStyle="regular" tintColor="#FFFFFF10">
        {children}
      </GlassView>
    );
  }

  if (Platform.OS === 'ios') {
    return (
      <BlurView style={style} intensity={40} tint="dark">
        {children}
      </BlurView>
    );
  }

  return <View style={[style, { backgroundColor: 'rgba(60,60,67,0.30)' }]}>{children}</View>;
}
```

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

### Coordinated Glass Transitions

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Uses Namespace and glassEffectID to coordinate glass identity across transitions. The example shows a Text component with glassEffect and glassEffectID modifiers inside a Host, enabling shared element transitions.

```tsx
import { Host, Namespace, Text } from '@expo/ui/swift-ui';
import { glassEffect, glassEffectID } from '@expo/ui/swift-ui/modifiers';

const glassNamespace = new Namespace('main');

<Host style={{ width: 220, height: 56 }}>
  <Text
    modifiers={[
      glassEffect({ glass: { variant: 'regular' } }),
      glassEffectID({ id: 'search-chip', in: glassNamespace }),
    ]}
  >
    Search
  </Text>
</Host>;
```

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

### Conditional Glass Effect with isGlassEffectAPIAvailable

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Conditionally apply glassEffect based on API availability. The example builds a modifiers array and conditionally pushes glassEffect if isGlassEffectAPIAvailable() returns true.

```tsx
import { isGlassEffectAPIAvailable } from 'expo-glass-effect';

function AdaptiveCard() {
  const mods = [padding({ all: 16 })];
  if (isGlassEffectAPIAvailable()) {
    mods.push(glassEffect({ glass: { variant: 'regular' } }));
  }

  return (
    <Host style={{ width: 200, height: 100 }}>
      <VStack modifiers={mods}>
        <Text>Content</Text>
      </VStack>
    </Host>
  );
}
```

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

### Glass + Mesh Gradient (Liquid Glass Text)

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Combines expo-mesh-gradient with glassEffect for liquid glass text. The example shows a GlassTitle component with a MeshGradient background and a Host containing Text with glassEffect and padding modifiers.

```tsx
import { Host, Text } from '@expo/ui/swift-ui';
import { glassEffect, padding } from '@expo/ui/swift-ui/modifiers';
import { MeshGradient } from 'expo-mesh-gradient';

function GlassTitle() {
  return (
    <View style={{ flex: 1 }}>
      <MeshGradient
        style={StyleSheet.absoluteFill}
        points={[/* mesh gradient points */]}
        colors={[/* gradient colors */]}
      />
      <Host style={{ position: 'absolute', top: 100, alignSelf: 'center' }}>
        <Text
          modifiers={[
            padding({ all: 16 }),
            glassEffect({ glass: { variant: 'clear' } }),
          ]}
        >
          Liquid Glass Text
        </Text>
      </Host>
    </View>
  );
}
```

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

### Glass Modifier Usage

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Applies the glassEffect modifier to a SwiftUI component. The example shows a GlassCard component using Host, Text, VStack with padding, frame, and glassEffect modifiers to create a liquid glass surface.

```tsx
import { Host, Text, VStack } from '@expo/ui/swift-ui';
import { glassEffect, padding, frame } from '@expo/ui/swift-ui/modifiers';

function GlassCard() {
  return (
    <Host style={{ width: 300, height: 200 }}>
      <VStack
        modifiers={[
          padding({ all: 16 }),
          frame({ maxWidth: 280 }),
          glassEffect({ glass: { variant: 'regular' } }),
        ]}
      >
        <Text>Glass Surface</Text>
      </VStack>
    </Host>
  );
}
```

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

### Before/After comparison template

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/design-audit/references/post-implementation.md

Template for presenting before/after comparisons for each changed screen, including design rationale.

```markdown
### [Screen Name]
**Before:** [description of previous state or screenshot reference]
**After:** [description of new state or screenshot reference]
**Why:** [design rationale — which rule or dimension this addresses]
```

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

### Skill directory structure

Source: https://github.com/devanshudesai/agent-skills/blob/main/README.md

Shows the file layout for the two skills, including SKILL.md, metadata.json, and reference files.

```text
skills/
  expo-liquid-glass/
    SKILL.md                          # Liquid Glass implementation guide
    metadata.json                     # Skill metadata
    references/
      apple-liquid-glass-design.md    # Apple HIG design guidance
      callstack-liquid-glass.md       # @callstack/liquid-glass setup
      expo-ui-swiftui.md              # @expo/ui SwiftUI integration
      native-tabs.md                  # Native tab bar reference
  design-audit/
    SKILL.md                          # Design audit protocol
    metadata.json                     # Skill metadata
    references/
      audit-dimensions.md             # 15 audit dimensions with scoring
      design-rules.md                 # 8 design rules expanded
      scope-discipline.md             # Touch/don't-touch boundaries
      jobs-filter.md                  # Kill-or-elevate checklist
      post-implementation.md          # Post-phase update protocol
```

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

### progress.txt entry template

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/design-audit/references/post-implementation.md

Template for adding an entry to progress.txt after completing a design phase. Includes placeholders for changes, affected screens, and modified tokens.

```markdown
## Design Phase [N] Complete — [Date]
- Changes: [summary of what was changed]
- Screens affected: [list]
- Tokens modified: [list any design system changes]
```

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

### File structure for native tabs

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Shows the required file structure for the native tabs layout, including the _layout.tsx file and the (tabs) directory with index, search, and account screens.

```text
app/
  _layout.tsx        # NativeTabs layout
  (tabs)/
    index.tsx        # Home tab
    search.tsx       # Search tab
    account.tsx      # Account tab
```

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

### Bottom Accessory for Mini Player

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use the bottomAccessory prop to render a floating view above the tab bar for persistent controls like a mini player.

```tsx
<NativeTabs
  bottomAccessory={
    <View style={{ height: 60, padding: 8 }}>
      <Text>Now Playing: Song Title</Text>
    </View>
  }
>
  {/* tabs */}
</NativeTabs>
```

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

### LESSONS.md entry template

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/design-audit/references/post-implementation.md

Template for documenting design decisions, patterns, and mistakes in LESSONS.md after a design audit phase.

```markdown
## [Date] — Design Audit Phase [N]
### Decisions Made
- [Decision]: [Why this choice was made]
### Patterns Established
- [New pattern]: [When to use it]
### Mistakes Avoided
- [What was considered but rejected]: [Why]
```

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

### Mitigate White Flash with ThemeProvider

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Wraps NativeTabs with a ThemeProvider using DarkTheme to prevent white flashes during stack transitions. Requires transparentBackground prop on NativeTabs.

```tsx
import { DarkTheme, ThemeProvider } from '@react-navigation/native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function Layout() {
  return (
    <ThemeProvider value={DarkTheme}>
      <NativeTabs transparentBackground />
    </ThemeProvider>
  );
}
```

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

### Per-Tab Stack Navigator with Header Configuration

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Defines a Stack layout for a tab, setting screen options like large title, blur effect, and transparency. Use this to customize headers per screen within a tab.

```tsx
// app/(tabs)/home/_layout.tsx
import { Stack } from 'expo-router';

export default function HomeLayout() {
  return (
    <Stack
      screenOptions={{
        headerLargeTitle: true,
        headerBlurEffect: 'systemChromeMaterialDark',
        headerTransparent: true,
      }}
    >
      <Stack.Screen name="index" options={{ title: 'Home' }} />
    </Stack>
  );
}
```

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

### isLiquidGlassAvailable platform detection

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/callstack-liquid-glass.md

Platform detection helper. Returns true when Liquid Glass APIs are available; otherwise falls back to normal View rendering.

```tsx
import { isLiquidGlassAvailable } from '@callstack/liquid-glass';

if (isLiquidGlassAvailable()) {
  // Use LiquidGlassView
} else {
  // Fallback to BlurView or semi-transparent View
}
```

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

### Native Tabs SDK 55+ Compound API (Pattern C)

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/SKILL.md

Use this SDK 55+ syntax for native tabs with compound components. It uses TabBarIcon with platform-specific icons and TabBarLabel for the label.

```tsx
<NativeTabs.Trigger name="index">
  <NativeTabs.Trigger.TabBarIcon
    ios={{ default: 'house', selected: 'house.fill' }}
    androidIconName="home"
  />
  <NativeTabs.Trigger.TabBarLabel>Home</NativeTabs.Trigger.TabBarLabel>
</NativeTabs.Trigger>
```

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

### DynamicColorIOS for Liquid Glass Colors

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use DynamicColorIOS to adapt colors for light and dark backgrounds in NativeTabs. Set labelStyle and tintColor with dark and light color values.

```tsx
import { DynamicColorIOS } from 'react-native';

<NativeTabs
  labelStyle={{
    color: DynamicColorIOS({
      dark: 'white',
      light: 'black',
    }),
  }}
  tintColor={DynamicColorIOS({
    dark: 'white',
    light: 'black',
  })}
>
```

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

### Native Tabs SDK 54 Syntax (Pattern C)

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/SKILL.md

Use this SDK 54 syntax for native tabs. It uses Icon and Label sub-components with platform-specific icon names.

```tsx
<NativeTabs.Trigger name="index">
  <NativeTabs.Trigger.Icon sf="house" md="home" />
  <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>
```

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

### LiquidGlassView usage

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/callstack-liquid-glass.md

Drop-in glass panel component. Wrap any content to render it on glass. Supports interactive touch animations and effect options like 'clear' or 'regular'. Falls back to a semi-transparent background when Liquid Glass is unavailable.

```tsx
import { LiquidGlassView, isLiquidGlassAvailable } from '@callstack/liquid-glass';
import { Text, View } from 'react-native';

function GlassCard() {
  return (
    <LiquidGlassView
      style={[
        { width: 200, height: 100, borderRadius: 20 },
        !isLiquidGlassAvailable() && { backgroundColor: 'rgba(255,255,255,0.5)' },
      ]}
      interactive
      effect="clear"
    >
      <Text style={{ fontWeight: '600', color: 'white' }}>Hello</Text>
    </LiquidGlassView>
  );
}
```

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

### Host Component with Button

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Use the Host component to bridge React Native to SwiftUI. Wrap SwiftUI components like Button inside Host. Style the Host container with React Native styles; use SwiftUI layout primitives inside.

```tsx
import { Host, Button } from '@expo/ui/swift-ui';

function Example() {
  return (
    <Host style={{ width: 200, height: 50 }}>
      <Button onPress={() => console.log('tap')}>Action</Button>
    </Host>
  );
}
```

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

### SwiftUI Glass with Namespace (Pattern D)

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/SKILL.md

Use this pattern with @expo/ui for coordinated glass transitions. It creates a namespace and applies glassEffect with a shared ID for matched geometry effects.

```tsx
import { Host, Namespace, Text } from '@expo/ui/swift-ui';
import { glassEffect, glassEffectID, padding } from '@expo/ui/swift-ui/modifiers';

const ns = new Namespace('glass');

<Host style={{ width: 220, height: 56 }}>
  <Text
    modifiers={[
      padding({ all: 16 }),
      glassEffect({ glass: { variant: 'regular' } }),
      glassEffectID({ id: 'primary-chip', in: ns }),
    ]}
  >
    Explore
  </Text>
</Host>;
```

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

### TabBarIcon with Custom Image

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use this variant to display a custom image as the tab bar icon. The 'src' prop expects a require() call pointing to the image asset.

```tsx
// Custom image
<NativeTabs.Trigger.TabBarIcon src={require('./assets/icon.png')} />
```

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

### Web Fallback with Custom Tab Layout

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Provides a web-specific layout using the Tabs component from 'expo-router/ui'. Use this to render a custom tab UI on web platforms.

```tsx
// app/_layout.web.tsx
import { Tabs } from 'expo-router/ui';

export default function WebTabLayout() {
  return <Tabs>{/* custom web tab UI */}</Tabs>;
}
```

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

### Remaining phases reminder template

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/design-audit/references/post-implementation.md

Template for reminding the user which phases are still pending approval.

```markdown
Remaining phases:
- Phase [N]: [brief description] — awaiting approval
```

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

### Basic NativeTabs layout with triggers

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Defines a tab layout using NativeTabs and NativeTabs.Trigger. Each trigger includes a TabBarIcon with iOS and Android icons and a TabBarLabel. On iOS 26, the tab bar automatically uses liquid glass material.

```tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.TabBarIcon
          ios={{ default: 'house', selected: 'house.fill' }}
          androidIconName="home"
        />
        <NativeTabs.Trigger.TabBarLabel>Home</NativeTabs.Trigger.TabBarLabel>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="search">
        <NativeTabs.Trigger.TabBarIcon
          ios={{ default: 'magnifyingglass', selected: 'magnifyingglass' }}
          androidIconName="search"
        />
        <NativeTabs.Trigger.TabBarLabel>Search</NativeTabs.Trigger.TabBarLabel>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="account">
        <NativeTabs.Trigger.TabBarIcon
          ios={{ default: 'person', selected: 'person.fill' }}
          androidIconName="person"
        />
        <NativeTabs.Trigger.TabBarLabel>Account</NativeTabs.Trigger.TabBarLabel>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}
```

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

### Search Bar in Tab Header with Stack

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Wrap tab content in a Stack navigator to add a search bar to the header. Configure headerSearchBarOptions with placeholder and onChangeText handler.

```tsx
// app/(tabs)/search/_layout.tsx
import { Stack } from 'expo-router';

export default function SearchLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerSearchBarOptions: {
            placeholder: 'Search...',
            onChangeText: (e) => { /* handle search */ },
          },
        }}
      />
    </Stack>
  );
}
```

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

### Glass Variants

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/expo-ui-swiftui.md

Shows the different glassEffect variants: regular for standard controls, clear for high transparency, with optional tint color, and interactive for touch animations. Each variant is a separate call to glassEffect.

```tsx
// Regular - medium transparency, standard controls
glassEffect({ glass: { variant: 'regular' } })

// Clear - high transparency, media-rich backgrounds
glassEffect({ glass: { variant: 'clear' } })

// With tint color
glassEffect({ glass: { variant: 'regular', tint: '#007AFF' } })

// Interactive - enables touch animations (scale, bounce, shimmer)
glassEffect({ glass: { variant: 'regular', interactive: true } })
```

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

### Separate Search Tab with NativeTabs.Trigger

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Define a search tab using NativeTabs.Trigger with role="search". Configure the tab bar label and icon for iOS and Android.

```tsx
<NativeTabs.Trigger name="search" role="search">
  <NativeTabs.Trigger.TabBarLabel>Search</NativeTabs.Trigger.TabBarLabel>
  <NativeTabs.Trigger.TabBarIcon
    ios={{ default: 'magnifyingglass', selected: 'magnifyingglass' }}
    androidIconName="search"
  />
</NativeTabs.Trigger>
```

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

### LiquidGlassContainerView usage

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/callstack-liquid-glass.md

Groups glass elements for morphing/merging when close together. The spacing prop controls the distance at which elements begin merging.

```tsx
import { LiquidGlassContainerView, LiquidGlassView } from '@callstack/liquid-glass';

function MergingExample() {
  return (
    <LiquidGlassContainerView spacing={20}>
      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }}>
        <Text>A</Text>
      </LiquidGlassView>
      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }}>
        <Text>B</Text>
      </LiquidGlassView>
    </LiquidGlassContainerView>
  );
}
```

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

### TabBarIcon with SF Symbols and Material Symbols (SDK 55+)

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use this compound component to set the tab bar icon with platform-specific symbols. The 'ios' prop accepts an object with 'default' and 'selected' SF Symbol names, and 'androidIconName' specifies the Material Symbol name.

```tsx
// SF Symbols (iOS) + Material Symbols (Android)
<NativeTabs.Trigger.TabBarIcon
  ios={{ default: 'house', selected: 'house.fill' }}
  androidIconName="home"
/>
```

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

### TabBarIcon State Variants

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use this variant to show different icons for selected and default states. The 'ios' prop object includes 'default' and 'selected' keys for SF Symbols.

```tsx
// State variants (different icons for selected/default)
<NativeTabs.Trigger.TabBarIcon
  ios={{ default: 'house', selected: 'house.fill' }}
  androidIconName="home"
/>
```

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

### Minimize Tab Bar on Scroll

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Set minimizeBehavior="onScrollDown" on NativeTabs to minimize the tab bar when scrolling down.

```tsx
<NativeTabs minimizeBehavior="onScrollDown">
  {/* tabs */}
</NativeTabs>
```

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

### TabBarLabel

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use this component to set the label text for the tab bar item. The label is displayed under the icon.

```tsx
<NativeTabs.Trigger.TabBarLabel>Home</NativeTabs.Trigger.TabBarLabel>
```

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

### TabBarBadge Numeric

Source: https://github.com/devanshudesai/agent-skills/blob/main/skills/expo-liquid-glass/references/native-tabs.md

Use this component to display a numeric badge on the tab bar icon. The number is passed as children.

```tsx
// Numeric badge
<NativeTabs.Trigger.TabBarBadge>3</NativeTabs.Trigger.TabBarBadge>
```