### Start Example App Packager

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application, allowing you to test library changes.

```sh
yarn example start
```

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

### Run Example App on iOS

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device.

```sh
yarn example ios
```

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

### Run Example App on Android

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
yarn example android
```

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

### Run Pod Install for iOS

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

After installation, navigate to the ios directory and run pod install to generate native Codegen artifacts required for iOS functionality.

```bash
cd ios
pod install
cd ..
```

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

### LiquidGlassView Usage Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

A basic example demonstrating how to use the LiquidGlassView component with specific styles and effects.

```tsx
<LiquidGlassView
  style={{ width: 200, height: 100, borderRadius: 20 }}
  effect="clear"
/>
```

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

### Start Metro Bundler

Source: https://github.com/callstack/liquid-glass/blob/main/example/README.md

Run this command from the root of your React Native project to start the Metro dev server. This is necessary before building and running the app.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

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

### Install Project Dependencies

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all necessary dependencies for the monorepo using Yarn workspaces.

```sh
yarn
```

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

### Install CocoaPods Dependencies

Source: https://github.com/callstack/liquid-glass/blob/main/example/README.md

Before running the iOS app, install CocoaPods dependencies. Run 'bundle install' once to install CocoaPods, then 'bundle exec pod install' after updating native dependencies.

```sh
bundle install

bundle exec pod install
```

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

### LiquidGlassView Usage Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/types.md

Example of how to use the LiquidGlassView component with custom effect and color scheme. Ensure LiquidGlassView and its types are imported.

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

const CustomGlassView: React.FC<LiquidGlassViewProps> = (props) => {
  return (
    <LiquidGlassView
      {...props}
      effect="clear"
      colorScheme="dark"
    />
  );
};
```

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

### Interactive LiquidGlassView Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Demonstrates how to enable interactivity on a LiquidGlassView component by setting the 'interactive' prop to true.

```tsx
<LiquidGlassView
  interactive={true}
  effect="clear"
/>
```

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

### LiquidGlassContainerView Usage Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

An example showing how to use LiquidGlassContainerView to contain multiple LiquidGlassView components, applying spacing between them.

```tsx
<LiquidGlassContainerView spacing={15}>
  <LiquidGlassView style={{ width: 100, height: 100 }} />
  <LiquidGlassView style={{ width: 100, height: 100 }} />
</LiquidGlassContainerView>
```

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

### Install React Native Liquid Glass

Source: https://github.com/callstack/liquid-glass/blob/main/README.md

Install the library using npm or yarn. Ensure your project meets the Xcode and React Native version requirements.

```bash
npm install @callstack/liquid-glass
# or
yarn add @callstack/liquid-glass
```

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

### Simple Glass Background Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Renders a basic Liquid Glass view with specified dimensions and border radius. No special props are required for a simple effect.

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

export function SimpleGlass() {
  return (
    <LiquidGlassView
      style={{ width: 200, height: 100, borderRadius: 20 }}
    />
  );
}
```

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

### isLiquidGlassSupported Usage Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Demonstrates conditional logic based on platform support for liquid glass effects, applying fallback styling when not supported.

```tsx
if (isLiquidGlassSupported) {
  // Use glass effects
} else {
  // Apply fallback styling
}
```

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

### Build and Run iOS App

Source: https://github.com/callstack/liquid-glass/blob/main/example/README.md

After installing CocoaPods dependencies, use this command to build and run the iOS application. Ensure Metro is running.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

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

### LiquidGlassView with 'light' color scheme

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Example of using LiquidGlassView with the 'light' color scheme to force a light appearance.

```tsx
<LiquidGlassView colorScheme="light" />
```

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

### LiquidGlassView with 'regular' effect

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Example of using LiquidGlassView with the default 'regular' effect mode for a standard glass blur.

```tsx
<LiquidGlassView effect="regular" />
```

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

### LiquidGlassContainerView Usage Example

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/types.md

Example of a custom container component using LiquidGlassContainerView. It accepts a spacing prop to define the distance for effect merging.

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

interface CustomContainerProps extends LiquidGlassContainerViewProps {
  label?: string;
}

const CustomGlassContainer: React.FC<CustomContainerProps> = ({ label, ...props }) => {
  return (
    <LiquidGlassContainerView
      {...props}
      spacing={props.spacing ?? 15}
    />
  );
};
```

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

### Spacing Effect Demonstration with LiquidGlassContainerView

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassContainerView.md

This example shows how to use LiquidGlassContainerView to manage the spacing and merging of glass effects for child LiquidGlassView components. Adjust the spacing prop to see how the effects combine or separate.

```tsx
import { LiquidGlassView, LiquidGlassContainerView } from '@callstack/liquid-glass';
import { View, Button } from 'react-native';
import { useState } from 'react';

export function SpacingDemo() {
  const [spacing, setSpacing] = useState(20);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ marginBottom: 20 }}>
        <Button
          title={`Current Spacing: ${spacing}`}
          onPress={() => setSpacing((s) => (s + 10) % 50)}
        />
      </View>

      <LiquidGlassContainerView spacing={spacing}>
        <LiquidGlassView
          style={{
            width: 100,
            height: 100,
            borderRadius: 50,
          }}
        />
        <LiquidGlassView
          style={{
            width: 100,
            height: 100,
            borderRadius: 50,
          }}
        />
      </LiquidGlassContainerView>
    </View>
  );
}
```

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

### Platform Detection Logic

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Illustrates the flow for detecting platform support for Liquid Glass, starting from developer code and descending through TypeScript fallbacks and native module lookups to the native Objective-C/Swift code.

```text
┌─────────────────────────────────────────────────────────┐
│ Developer Code                                          │
│ if (isLiquidGlassSupported) { ... }                     │
└────────────────────┬────────────────────────────────────┘
                     │ Constant reference
                     ▼
┌─────────────────────────────────────────────────────────┐
│ isLiquidGlassSupported.ts (fallback)                    │
│ └─ Returns: false                                       │
│ isLiquidGlassSupported.ios.ts (platform-specific)       │
│ └─ Queries native module                               │
└────────────────────┬────────────────────────────────────┘
                     │ Module registry lookup
                     ▼
┌─────────────────────────────────────────────────────────┐
│ NativeLiquidGlassModule.ts (TurboModule)                │
│ TurboModuleRegistry.getEnforcing('NativeLiquidGlassModule')
└────────────────────┬────────────────────────────────────┘
                     │ Native bridge call
                     ▼
┌─────────────────────────────────────────────────────────┐
│ Native Objective-C/Swift Code                           │
│ - Check iOS version >= 26                               │
│ - Check Xcode version >= 26                             │
│ - Return boolean                                        │
└─────────────────────────────────────────────────────────┘
```

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

### ColorValue Example with LiquidGlassView

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/types.md

Demonstrates applying a tint color to a LiquidGlassView. The tintColor prop accepts various React Native color formats.

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

export function ColoredGlassView() {
  return (
    <LiquidGlassView
      style={{ width: 200, height: 100 }}
      tintColor="rgba(100, 150, 255, 0.3)"
    />
  );
}
```

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

### LiquidGlassView with 'system' color scheme

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Example of using LiquidGlassView with the 'system' color scheme, which follows the device's appearance (light/dark mode). Recommended for most apps.

```tsx
<LiquidGlassView colorScheme="system" />
```

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

### LiquidGlassView with 'clear' effect

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Example of using LiquidGlassView with the 'clear' effect mode for transparent glass with minimal blur, suitable for content overlays.

```tsx
<LiquidGlassView effect="clear" />
```

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

### LiquidGlassView with 'dark' color scheme

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Example of using LiquidGlassView with the 'dark' color scheme to force a dark appearance.

```tsx
<LiquidGlassView colorScheme="dark" />
```

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

### LiquidGlassView with Adaptive Color Text

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassView.md

Shows how to embed content within LiquidGlassView that adapts to the system's color scheme using `PlatformColor`. This example includes text styled with `PlatformColor('labelColor')` to ensure readability against varying backgrounds.

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

export function AdaptiveColorView() {
  return (
    <LiquidGlassView
      style={{
        width: 200,
        height: 100,
        borderRadius: 20,
        padding: 16,
      }}>
      <Text
        style={{
          color: PlatformColor('labelColor'),
        }}>
        Text adapts to background
      </Text>
    </LiquidGlassView>
  );
}
```

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

### LiquidGlassView with 'none' effect

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Example of using LiquidGlassView with the 'none' effect mode to create a transparent view, useful for conditionally disabling effects.

```tsx
<LiquidGlassView effect="none" />
```

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

### Enable React Native Debugging

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Set the DEBUG environment variable to 'react-native:*' when starting your npm server to enable detailed React Native debugging output.

```bash
DEBUG=react-native:* npm start
```

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

### Get Liquid Glass Constants

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/NativeLiquidGlassModule.md

Retrieves platform and build-time constants for the native liquid glass implementation. Use this to check if the liquid glass effect is supported on the current device and iOS version.

```typescript
import NativeLiquidGlassModule from '@callstack/liquid-glass/src/NativeLiquidGlassModule';

const constants = NativeLiquidGlassModule.getConstants();
console.log('Liquid glass supported:', constants.isLiquidGlassSupported);
```

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

### Tint Color Examples

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Apply a tint color overlay to the glass effect using various supported color formats like hex, RGB, RGBA, named colors, and platform colors.

```tsx
// Hex color
<LiquidGlassView tintColor="#FF0000" />
```

```tsx
// RGB
<LiquidGlassView tintColor="rgb(255, 0, 0)" />
```

```tsx
// RGBA (with transparency)
<LiquidGlassView tintColor="rgba(255, 0, 0, 0.3)" />
```

```tsx
// Named colors
<LiquidGlassView tintColor="red" />
```

```tsx
// Platform colors (iOS)
import { PlatformColor } from 'react-native';
<LiquidGlassView tintColor={PlatformColor('systemBlue')} />
```

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

### Correct Interactive Prop Usage

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Demonstrates the correct way to set the 'interactive' prop once on mount. Attempting to change it later will have no effect.

```tsx
// ✓ Correct
const [interactive] = useState(true);
<LiquidGlassView interactive={interactive} />

// ✗ Wrong
const [interactive, setInteractive] = useState(true);
<LiquidGlassView interactive={interactive} />
// Later: setInteractive(false) // Has no effect
```

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

### Basic Import of Liquid Glass Exports

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/module-exports.md

Demonstrates how to import the main components and utility from the @callstack/liquid-glass package.

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

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

### Publish New Versions

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Initiates the publishing process using release-it, which handles version bumping, tagging, and release creation.

```sh
yarn release
```

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

### Get Native Module Enforcing

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/NativeLiquidGlassModule.md

Accesses the NativeLiquidGlassModule using TurboModuleRegistry.getEnforcing. This is an advanced method for direct module access when needed.

```typescript
import { TurboModuleRegistry, type TurboModule } from 'react-native';

interface Spec extends TurboModule {
  getConstants(): { isLiquidGlassSupported: boolean };
}

const module = TurboModuleRegistry.getEnforcing<Spec>('NativeLiquidGlassModule');
const { isLiquidGlassSupported } = module.getConstants();
```

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

### Basic LiquidGlassView Usage

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassView.md

Demonstrates the basic implementation of LiquidGlassView with custom styling and content. Ensure the component is imported from '@callstack/liquid-glass'.

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

export function BasicGlassView() {
  return (
    <LiquidGlassView
      style={{
        width: 200,
        height: 100,
        borderRadius: 20,
        padding: 16,
      }}>
      <Text>Glass Effect Content</Text>
    </LiquidGlassView>
  );
}
```

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

### File Organization Structure

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/INDEX.md

This snippet outlines the directory structure of the liquid-glass project, showing the location of key documentation files and API reference modules.

```bash
/output/
├── INDEX.md                          (this file)
├── README.md                         (overview and navigation)
├── quick-reference.md                (fast API lookup)
├── types.md                          (type definitions)
├── architecture.md                   (system design)
├── integration-guide.md              (usage patterns)
├── module-exports.md                 (export reference)
└── api-reference/
    ├── LiquidGlassView.md           (component docs)
    ├── LiquidGlassContainerView.md   (container docs)
    ├── isLiquidGlassSupported.md    (utility docs)
    └── NativeLiquidGlassModule.md    (native module reference)

```

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

### Import Main Components and Utilities

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Import the main components and utility functions from the @callstack/liquid-glass library.

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

// Utilities
import { isLiquidGlassSupported } from '@callstack/liquid-glass';

// Type definitions
import type {
  LiquidGlassViewProps,
  LiquidGlassContainerViewProps,
} from '@callstack/liquid-glass';
```

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

### Platform-Specific File Extensions

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Demonstrates the use of `.ts` and `.ios.ts` file extensions for creating platform-specific code, allowing bundlers to automatically select the correct file.

```text
isLiquidGlassSupported.ts     → Exports false (fallback)
isLiquidGlassSupported.ios.ts → Queries native module (iOS)
```

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

### Build and Run Android App

Source: https://github.com/callstack/liquid-glass/blob/main/example/README.md

Execute this command in a new terminal window from your project root to build and run the Android application. Ensure Metro is running.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

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

### Native Module Spec for Liquid Glass

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Defines the interface for the native module, including a method to get constants like platform support. This is used for runtime platform detection.

```typescript
interface Spec extends TurboModule {
  getConstants(): {
    isLiquidGlassSupported: boolean;
  };
}
```

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

### Basic Liquid Glass View Implementation

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/README.md

Renders a view with liquid glass effects. Apply fallback background color if Liquid Glass is not supported.

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

export function GlassView() {
  return (
    <LiquidGlassView
      style={[
        { width: 200, height: 100, borderRadius: 20, padding: 16 },
        !isLiquidGlassSupported && { backgroundColor: 'rgba(255, 255, 255, 0.5)' },
      ]}>
      <Text>Content</Text>
    </LiquidGlassView>
  );
}
```

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

### Source File Dependencies Graph

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Visualizes the dependencies between source files in the Liquid Glass project, showing how entry points, platform-specific components, and native modules are interconnected.

```text
index.tsx (entry point)
├── LiquidGlassView.tsx / LiquidGlassView.ios.tsx
│   └── LiquidGlassViewNativeComponent.ts
│       ├── react-native (ViewProps, codegenNativeComponent, ColorValue)
│       └── (native codegen artifacts)
│
├── LiquidGlassContainerView.tsx / LiquidGlassContainerView.ios.tsx
│   └── LiquidGlassViewContainerNativeComponent.ts
│       ├── react-native (ViewProps, codegenNativeComponent)
│       └── (native codegen artifacts)
│
└── isLiquidGlassSupported.ts / isLiquidGlassSupported.ios.ts
    └── NativeLiquidGlassModule.ts
        └── react-native (TurboModuleRegistry)
```

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

### Basic Merging Glass Elements

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassContainerView.md

Demonstrates how to use LiquidGlassContainerView to merge the glass effects of two child LiquidGlassView components with default spacing.

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

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

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

### Fallback Styling for Unsupported Platforms

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Implement fallback styling for `LiquidGlassView` when `isLiquidGlassSupported` is false. This ensures a consistent look and feel across platforms.

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

export function FallbackGlassView() {
  return (
    <LiquidGlassView
      style={[ 
        {
          width: 200,
          height: 100,
          borderRadius: 20,
        },
        !isLiquidGlassSupported && {
          backgroundColor: 'rgba(255, 255, 255, 0.5)',
          borderWidth: 1,
          borderColor: 'rgba(0, 0, 0, 0.1)',
        },
      ]} />
  );
}
```

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

### Check Xcode Version

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

A bash command to verify the currently selected Xcode version. Ensure you are using Xcode 26 or later for Liquid Glass features.

```bash
# Check Xcode version
xcode-select --print-path
```

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

### Conditionally Render LiquidGlassView

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassView.md

Demonstrates how to use `isLiquidGlassSupported` to conditionally apply styles or fallbacks for the LiquidGlassView component. This is useful for ensuring a consistent UI across supported and unsupported platforms.

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

export function ConditionalGlassView() {
  return (
    <LiquidGlassView
      style={[ 
        { width: 200, height: 100, borderRadius: 20 },
        !isLiquidGlassSupported && { backgroundColor: 'rgba(255, 255, 255, 0.5)' },
      ]}
    />
  );
}
```

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

### Check Platform Support

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Import and use the 'isLiquidGlassSupported' function to check if the Liquid Glass feature is available on the current platform. This is useful for debugging and conditional rendering.

```tsx
import { isLiquidGlassSupported } from '@callstack/liquid-glass';
import { useEffect } from 'react';

export function DebugSupport() {
  useEffect(() => {
    console.log('Liquid Glass Supported:', isLiquidGlassSupported);
  }, []);

  return null;
}
```

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

### Basic Support Check

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/isLiquidGlassSupported.md

Conditionally render `LiquidGlassView` or a fallback `View` based on `isLiquidGlassSupported`. This is useful for ensuring a consistent user experience across supported and unsupported environments.

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

export function ConditionalGlassView() {
  if (isLiquidGlassSupported) {
    return (
      <LiquidGlassView
        style={{
          width: 200,
          height: 100,
          borderRadius: 20,
        }}
      />
    );
  }

  return <View style={{ width: 200, height: 100, backgroundColor: 'rgba(200, 200, 200, 0.3)' }} />;
}
```

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

### Render Basic LiquidGlassView

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Render a basic `LiquidGlassView` component. Apply styles directly or conditionally based on platform support using `isLiquidGlassSupported`.

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

export function MyComponent() {
  return (
    <LiquidGlassView
      style={[ 
        { width: 200, height: 100, borderRadius: 20 },
        !isLiquidGlassSupported && { backgroundColor: 'rgba(255, 255, 255, 0.5)' },
      ]}>
      <Text>Content</Text>
    </LiquidGlassView>
  );
}
```

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

### Enable Interactive Mode

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Set the 'interactive' prop to true to enable touch feedback effects like expansion and shimmering on user interaction. This prop must be set on mount and cannot be changed later.

```tsx
<LiquidGlassView interactive={true} />
```

```tsx
// ✓ Correct: Set once on mount
const [interactive] = useState(true);
<LiquidGlassView interactive={interactive} />
```

```tsx
// ✗ Wrong: Changing interactive after mount has no effect
const [interactive, setInteractive] = useState(true);
<LiquidGlassView interactive={interactive} />
// Later: setInteractive(false) // Has no effect
```

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

### Type-Only Imports for Liquid Glass Props

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/module-exports.md

Shows how to import only the type definitions for LiquidGlassViewProps and LiquidGlassContainerViewProps from the package.

```typescript
import type {
  LiquidGlassViewProps,
  LiquidGlassContainerViewProps,
} from '@callstack/liquid-glass';
```

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

### Horizontal Layout with Glass Elements

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassContainerView.md

Illustrates creating a horizontal layout of LiquidGlassView components using LiquidGlassContainerView with custom spacing and styling.

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

export function HorizontalGlassLayout() {
  return (
    <LiquidGlassContainerView
      spacing={10}
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 20,
      }}
    >
      <LiquidGlassView
        style={{
          width: 60,
          height: 60,
          borderRadius: 30,
          marginHorizontal: 5,
        }}
      />
      <LiquidGlassView
        style={{
          width: 60,
          height: 60,
          borderRadius: 30,
          marginHorizontal: 5,
        }}
      />
    </LiquidGlassContainerView>
  );
}
```

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

### Run Unit Tests

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Executes the unit test suite using Jest to ensure code correctness.

```sh
yarn test
```

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

### Interactive LiquidGlassView with Clear Effect

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassView.md

Configures an interactive LiquidGlassView with a 'clear' effect mode. The 'interactive' prop must be set on mount and cannot be changed dynamically. The 'effect' prop controls the transparency of the glass.

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

export function InteractiveGlassView() {
  return (
    <LiquidGlassView
      style={{
        width: 150,
        height: 150,
        borderRadius: 50,
      }}
      interactive
      effect="clear"
    />
  );
}
```

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

### Component Wrapper with Support Detection

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/isLiquidGlassSupported.md

Create a reusable `GlassContainer` component that wraps `LiquidGlassView` and applies fallback styling when the effect is not supported. This promotes code reuse and maintains a consistent API.

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

interface GlassContainerProps extends ViewProps {
  children?: React.ReactNode;
}

export function GlassContainer({ children, ...props }: GlassContainerProps) {
  if (!isLiquidGlassSupported) {
    return (
      <View
        {...props}
        style={[ 
          props.style,
          {
            backgroundColor: 'rgba(255, 255, 255, 0.4)',
            borderRadius: 12,
          },
        ]}
      >
        {children}
      </View>
    );
  }

  return (
    <LiquidGlassView {...props} style={[props.style, { borderRadius: 12 }]}>
      {children}
    </LiquidGlassView>
  );
}
```

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

### Lint Code with ESLint

Source: https://github.com/callstack/liquid-glass/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors according to the project's linting rules.

```sh
yarn lint
```

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

### isLiquidGlassSupported Utility

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/README.md

A utility constant that detects if the current platform supports the liquid glass effect.

```APIDOC
## isLiquidGlassSupported

### Description
Platform support detection constant. Returns a boolean indicating if the liquid glass effect is supported on the current platform.

### Availability
All platforms (returns false if not supported)

### Example
```typescript
import { isLiquidGlassSupported } from '@callstack/liquid-glass';

if (isLiquidGlassSupported) {
  // Render LiquidGlassView
} else {
  // Fallback UI
}
```
```

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

### getConstants()

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/NativeLiquidGlassModule.md

Retrieves platform and build-time constants for the native liquid glass implementation. This method is synchronous and returns pre-computed values.

```APIDOC
## getConstants()

### Description
Returns platform and build-time constants about the native liquid glass implementation.

### Method
Synchronous

### Parameters
None

### Return Type
`LiquidGlassModuleConstants`

### Return Value
- `isLiquidGlassSupported` (boolean) - Indicates whether the current iOS version (iOS 26+) supports the liquid glass effect. Returns `true` only on iOS 26 or later with Xcode 26+. Returns `false` on all other platforms and iOS versions.

### Example
```typescript
import NativeLiquidGlassModule from '@callstack/liquid-glass/src/NativeLiquidGlassModule';

const constants = NativeLiquidGlassModule.getConstants();
console.log('Liquid glass supported:', constants.isLiquidGlassSupported);
```
```

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

### Interactive Touch Handling Flow (iOS)

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Outlines the sequence of events for interactive touch handling on iOS, from the initial user touch to the subsequent animations and touch end events.

```text
User Touch
    ↓
UIView Touch Handler (native iOS)
    ↓
Shimmer Effect Animation
    ↓
View Expansion Animation
    ↓
Touch End
    ↓
Shrink & Fade Animations
```

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

### Complex Nested Layout with Glass Elements

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassContainerView.md

Demonstrates a complex layout using nested LiquidGlassContainerView and LiquidGlassView components, including text content within glass views.

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

export function ComplexGlassLayout() {
  return (
    <View style={{ flex: 1, padding: 20 }}>
      <LiquidGlassContainerView spacing={20}>
        <LiquidGlassView
          style={{
            width: '100%',
            height: 120,
            borderRadius: 20,
            padding: 16,
          }}
        >
          <Text style={{ color: '#000' }}>Header Section</Text>
        </LiquidGlassView>
        <LiquidGlassView
          style={{
            width: '100%',
            height: 120,
            borderRadius: 20,
            padding: 16,
          }}
        >
          <Text style={{ color: '#000' }}>Content Section</Text>
        </LiquidGlassView>
      </LiquidGlassContainerView>
    </View>
  );
}
```

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

### Check Liquid Glass Support

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/README.md

Detect if the current device and platform support Liquid Glass effects. Use this to apply fallback styling on unsupported platforms.

```typescript
import { isLiquidGlassSupported } from '@callstack/liquid-glass';

if (isLiquidGlassSupported) {
  // Device supports liquid glass
} else {
  // Apply fallback styling
}
```

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

### Verify Native Module Constants

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Access and log the constants from the NativeLiquidGlassModule to verify the native module integration. This can help in debugging native-related issues.

```tsx
import NativeLiquidGlassModule from './NativeLiquidGlassModule';

const constants = NativeLiquidGlassModule.getConstants();
console.log('Native Constants:', constants);
```

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

### Check Liquid Glass Support

Source: https://github.com/callstack/liquid-glass/blob/main/README.md

Use the isLiquidGlassSupported constant to determine if the device supports the liquid glass effect and provide fallback UI if necessary.

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

if (isLiquidGlassSupported) {
  // Device supports liquid glass effect
} else {
  // Provide fallback UI
}
```

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

### Multiple Glass Views with Custom Spacing

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassContainerView.md

Shows how to arrange multiple LiquidGlassView components within a LiquidGlassContainerView, specifying a custom spacing value for effect merging.

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

export function CustomSpacingLayout() {
  return (
    <View style={{ padding: 20 }}>
      <LiquidGlassContainerView spacing={15}>
        <LiquidGlassView
          style={{
            width: 80,
            height: 80,
            borderRadius: 10,
          }}
        />
        <LiquidGlassView
          style={{
            width: 80,
            height: 80,
            borderRadius: 10,
          }}
        />
        <LiquidGlassView
          style={{
            width: 80,
            height: 80,
            borderRadius: 10,
          }}
        />
      </LiquidGlassContainerView>
    </View>
  );
}
```

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

### Animating LiquidGlassView Effect

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/LiquidGlassView.md

Demonstrates how to dynamically change the 'effect' prop of LiquidGlassView between 'regular', 'clear', and 'none' using React state and a button press. This showcases the animation of the glass effect materializing or dematerializing.

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

export function AnimatedEffectView() {
  const [effect, setEffect] = useState<'clear' | 'regular' | 'none'>('regular');

  return (
    <View>
      <LiquidGlassView
        style={{
          width: 200,
          height: 100,
          borderRadius: 20,
          marginBottom: 20,
        }}
        effect={effect}/>
      <Button
        title="Toggle Effect"
        onPress={() => {
          const effects: Array<'clear' | 'regular' | 'none'> = ['clear', 'regular', 'none'];
          const currentIndex = effects.indexOf(effect);
          setEffect(effects[(currentIndex + 1) % effects.length]);
        }}/>
    </View>
  );
}
```

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

### Use Fixed Sizes

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Utilize fixed dimensions for LiquidGlassView components when possible, as calculated or flexible sizes can be less performant.

```tsx
// ✓ Good: Fixed dimensions
<LiquidGlassView style={{ width: 200, height: 100 }} />

// ⚠️ Less efficient: Calculated dimensions
<LiquidGlassView style={{ flex: 1 }} />
```

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

### Import Core APIs from @callstack/liquid-glass

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/README.md

Import all public APIs, including components, utilities, and types, from the main package entry point. Ensure you have React Native Fabric architecture enabled.

```typescript
import {
  // Components
  LiquidGlassView,
  LiquidGlassContainerView,
  
  // Utilities
  isLiquidGlassSupported,
  
  // Types
  type LiquidGlassViewProps,
  type LiquidGlassContainerViewProps,
} from '@callstack/liquid-glass';
```

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

### Type Export Graph

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Illustrates the type export relationships within the Liquid Glass project, showing how component props are defined and linked to their native component definitions.

```text
index.tsx (re-exports)
├── LiquidGlassViewProps (type alias)
│   └── LiquidGlassViewNativeComponent.ts (NativeProps)
│       └── react-native (ViewProps, ColorValue)
│
└── LiquidGlassContainerViewProps (type alias)
    └── LiquidGlassViewContainerNativeComponent.ts (NativeProps)
        └── react-native (ViewProps)
```

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

### Adaptive Text Color with PlatformColor

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Display text with adaptive colors within a `LiquidGlassView` by using `PlatformColor('labelColor')`. Note that automatic color adaptation is most effective for views smaller than 65pt in height.

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

export function AdaptiveTextView() {
  return (
    <LiquidGlassView
      style={{
        width: 200,
        height: 100,
        borderRadius: 20,
        padding: 16,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text style={{ color: PlatformColor('labelColor'), fontSize: 16 }}>
        Adaptive Color Text
      </Text>
    </LiquidGlassView>
  );
}

**Note**: Automatic color adaptation works best for views smaller than 65pt in height.
```

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

### Fallback Styling for LiquidGlassView

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Applies fallback styling (e.g., background color) to a LiquidGlassView when liquid glass effects are not supported on the platform.

```tsx
<LiquidGlassView
  style={[
    { width: 200, height: 100, borderRadius: 20 },
    !isLiquidGlassSupported && {
      backgroundColor: 'rgba(255, 255, 255, 0.5)',
    },
  ]}
/>
```

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

### Basic LiquidGlassView Usage

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/README.md

Render a basic glass effect component with custom styles, effect mode, interactivity, color scheme, and tint color. Requires iOS 26+.

```tsx
<LiquidGlassView
  style={{ width: 200, height: 100, borderRadius: 20 }}
  effect="clear"
  interactive
  colorScheme="dark"
  tintColor="rgba(100, 150, 255, 0.2)">
  <Text>Glass Content</Text>
</LiquidGlassView>
```

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

### Inline Fallback Styling

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/api-reference/isLiquidGlassSupported.md

Apply fallback styles directly to `LiquidGlassView` when `isLiquidGlassSupported` is false. This allows for a single component definition that adapts its appearance based on support.

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

export function GlassViewWithFallback() {
  return (
    <LiquidGlassView
      style={[
        {
          width: 200,
          height: 100,
          borderRadius: 20,
          padding: 16,
        },
        !isLiquidGlassSupported && {
          backgroundColor: 'rgba(255, 255, 255, 0.5)',
          borderWidth: 1,
          borderColor: 'rgba(0, 0, 0, 0.1)',
        },
      ]}
    >
      <Text>Glass Effect (with fallback)</Text>
    </LiquidGlassView>
  );
}
```

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

### Component Rendering Data Flow

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Illustrates the data flow from developer code to the native iOS implementation for the LiquidGlassView component. This flow involves React props, platform-specific components, codegen declarations, and native Objective-C/Swift code.

```text
┌─────────────────────────────────────────────────────────┐
│ Developer Code                                          │
│ <LiquidGlassView effect="clear" interactive />         │
└────────────────────┬────────────────────────────────────┘
                     │ React props
                     ▼
┌─────────────────────────────────────────────────────────┐
│ LiquidGlassView.tsx / LiquidGlassView.ios.tsx           │
│ (Platform-specific component)                           │
└────────────────────┬────────────────────────────────────┘
                     │ Codegen declaration
                     ▼
┌─────────────────────────────────────────────────────────┐
│ LiquidGlassViewNativeComponent.ts                        │
│ (Type spec & codegen entry point)                       │
└────────────────────┬────────────────────────────────────┘
                     │ Native binding (iOS only)
                     ▼
┌─────────────────────────────────────────────────────────┐
│ Native Objective-C/Swift Code (ios/)                    │
│ - Initialize UIVisualEffectView                         │
│ - Apply liquid glass material                           │
│ - Handle interactive touch events                       │
│ - Manage effect transitions                             │
└─────────────────────────────────────────────────────────┘
```

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

### Basic Usage of LiquidGlassView

Source: https://github.com/callstack/liquid-glass/blob/main/README.md

Use LiquidGlassView to apply the liquid glass effect to a component. A fallback background color is applied if the effect is not supported.

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

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

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

### isLiquidGlassSupported

Source: https://github.com/callstack/liquid-glass/blob/main/README.md

A boolean constant that indicates whether the current device supports the liquid glass effect. Useful for providing fallback UI on unsupported devices.

```APIDOC
## isLiquidGlassSupported

### Description
A boolean constant that indicates whether the current device supports the liquid glass effect.

### Usage
```tsx
import { isLiquidGlassSupported } from '@callstack/liquid-glass';

if (isLiquidGlassSupported) {
  // Device supports liquid glass effect
} else {
  // Provide fallback UI
}
```
```

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

### Interactive Glass with Fallback Styling

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Implements an interactive glass effect on supported platforms and applies a fallback background color on others. The 'interactive' prop is conditionally set.

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

export function InteractiveGlass() {
  return (
    <LiquidGlassView
      style={[ 
        { width: 200, height: 100, borderRadius: 20 },
        !isLiquidGlassSupported && { backgroundColor: 'rgba(255, 255, 255, 0.5)' },
      ]}
      interactive={isLiquidGlassSupported}
    />
  );
}
```

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

### LiquidGlassView with Named tintColor

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Applying a tint color to LiquidGlassView using a named color string.

```typescript
<LiquidGlassView tintColor="red" />
```

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

### LiquidGlassView Props Interface

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/architecture.md

Defines the TypeScript interface for LiquidGlassViewProps, extending standard ViewProps and including custom properties for glass effects and appearance.

```typescript
LiquidGlassViewProps extends ViewProps
{
  // Standard view properties (inherited)
  style?: StyleProp<ViewStyle>;
  onLayout?: (event: LayoutChangeEvent) => void;
  testID?: string;
  // ... other ViewProps

  // Custom glass properties
  interactive?: boolean;              // Codegen → native
  effect?: 'clear' | 'regular' | 'none'; // Codegen → native
  tintColor?: ColorValue;             // Codegen → native
  colorScheme?: 'light' | 'dark' | 'system'; // Codegen → native
}
```

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

### LiquidGlassView with Hex tintColor

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Applying a tint color to LiquidGlassView using a hexadecimal color value.

```typescript
<LiquidGlassView tintColor="#FF0000" />
```

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

### Combining Multiple Glass Elements

Source: https://github.com/callstack/liquid-glass/blob/main/README.md

Utilize LiquidGlassContainerView to manage and arrange multiple liquid glass elements with specified spacing.

```tsx
// For combining multiple glass elements
function MergingGlassElements() {
  return (
    <LiquidGlassContainerView spacing={20}>
      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
      <LiquidGlassView style={{ width: 100, height: 100, borderRadius: 50 }} />
    </LiquidGlassContainerView>
  );
}
```

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

### LiquidGlassView with RGB tintColor

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Applying a tint color to LiquidGlassView using an RGB color value.

```typescript
<LiquidGlassView tintColor="rgb(255, 0, 0)" />
```

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

### LiquidGlassView with PlatformColor tintColor

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Applying a tint color to LiquidGlassView using a platform-specific color, such as 'systemBlue' on iOS.

```typescript
import { PlatformColor } from 'react-native';
<LiquidGlassView tintColor={PlatformColor('systemBlue')} />
```

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

### Minimize Nesting Depth

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/integration-guide.md

Prefer shallow component structures for LiquidGlassView to improve performance. Deeply nested views can be less efficient.

```tsx
// ✓ Good: Shallow structure
<LiquidGlassView>
  <Text>Content</Text>
</LiquidGlassView>

// ⚠️ Less efficient: Deep nesting
<LiquidGlassView>
  <View>
    <View>
      <View>
        <Text>Content</Text>
      </View>
    </View>
  </View>
</LiquidGlassView>
```

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

### LiquidGlassView with RGBA tintColor

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

Applying a tint color to LiquidGlassView using an RGBA color value, recommended for subtle tints.

```typescript
<LiquidGlassView tintColor="rgba(255, 0, 0, 0.2)" />
```

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

### Conditional Wrapper for LiquidGlassView

Source: https://github.com/callstack/liquid-glass/blob/main/_autodocs/quick-reference.md

A component that conditionally renders either a LiquidGlassView or a standard View with fallback styling based on platform support.

```tsx
function GlassContainer(props: ViewProps) {
  if (!isLiquidGlassSupported) {
    return <View {...props} style={[props.style, { backgroundColor: 'rgba(255, 255, 255, 0.3)' }]} />;
  }
  return <LiquidGlassView {...props} />;
}
```