> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Platform-specific considerations

> Platform-specific configuration, limitations, and best practices for Web, iOS, and Android platforms in FlowX.AI UI Designer.

## Platform-specific configuration

FlowX.AI UI Designer provides platform-specific configuration and styling for components across **Web**, **iOS**, and **Android** platforms. Understanding platform differences and capabilities is essential for creating optimal user experiences.

## Platform overview

### Supported platforms

<CardGroup cols={3}>
  <Card title="Web" icon="globe">
    **Full Feature Support**

    * Complete navigation area functionality
    * Zones with headers and footers
    * Wizard and single-page navigation
    * All UI component types supported
  </Card>

  <Card title="iOS" icon="mobile">
    **Mobile-Optimized**

    * Basic navigation areas
    * Screen title configuration for navigation bar
    * Scrollable property for root card components
    * Platform-specific property overrides
  </Card>

  <Card title="Android" icon="android">
    **Mobile-Optimized**

    * Basic navigation areas
    * Screen title configuration for navigation bar
    * Platform-specific property overrides
    * Material design considerations
  </Card>
</CardGroup>

## Web platform features

### Navigation capabilities

**Full Navigation Support**: Web platform provides the most comprehensive navigation features.

<AccordionGroup>
  <Accordion title="Zone Navigation" icon="chart-area">
    **Web-Exclusive Features**:

    * Zones with headers and footers
    * Complete navigation hierarchy
    * Advanced navigation patterns

    <Warning>
      Zones with headers and footers are exclusively accessible in web configurations. They are not supported as navigation areas for mobile development.
    </Warning>
  </Accordion>

  <Accordion title="Navigation Types" icon="arrows-split-up-and-left">
    **Single Page Form (Default)**:

    * Web Renderer displays all User Tasks within the same page (in parallel)
    * Use cards to guide users through content
    * Child areas rendered on the same page

    **Wizard Navigation**:

    * Displays one user task at a time
    * Custom Next and Back buttons
    * Child areas presented sequentially
    * Requires proper action configuration
  </Accordion>
</AccordionGroup>

### Component support

**Full Component Library**: Web platform supports all UI component types without restrictions.

## Mobile platform features

### iOS platform specifics

<Tabs>
  <Tab title="Screen Configuration">
    **iOS-Specific Properties**:

    **Screen Title**: Set the screen title used in the navigation bar on mobile devices (available only when the card element is set as the root)

    **Scrollable Property**: Define the desired behavior of the screen, specifying whether it should be scrollable or not (default: true)

    ```json theme={"system"}
    {
      "screenTitle": "User Profile",
      "scrollable": true
    }
    ```
  </Tab>

  <Tab title="Navigation Limitations">
    **Mobile Navigation Restrictions**:

    * Basic navigation areas only
    * No zones with headers and footers
    * Limited navigation types compared to web
    * Navigation hierarchy displayed beneath platform tabs
  </Tab>

  <Tab title="Component Adaptations">
    **iOS Considerations**:

    * Screen size variations (iPhone, iPad)
    * Touch interaction patterns
    * Platform-specific styling requirements
    * System integration features
  </Tab>
</Tabs>

### Android platform specifics

<AccordionGroup>
  <Accordion title="Screen Configuration" icon="smartphone">
    **Android-Specific Features**:

    **Screen Title**: Set the screen title used in the navigation bar on mobile devices (available only when the card element is set as the root)

    **Material Design Considerations**: Android components adapt to Material Design principles where applicable
  </Accordion>

  <Accordion title="Device Variations" icon="devices">
    **Android Ecosystem**:

    * Multiple screen sizes and densities
    * Different Android versions
    * Manufacturer-specific customizations
    * Hardware capability variations
  </Accordion>
</AccordionGroup>

## Platform override system

### Configuration hierarchy

<Steps>
  <Step title="Generic Settings">
    **Base Configuration**: Properties available cross-platform (Web, Android and iOS), serving as the default for all platforms.
  </Step>

  <Step title="Platform Overrides">
    **Specific Customizations**: Override generic settings for individual platforms to optimize user experience.
  </Step>

  <Step title="Preview and Testing">
    **Visual Validation**: Preview changes across platforms, keeping in mind that iOS and Android previews are estimates.
  </Step>
</Steps>

### Implementing overrides

To configure platform-specific overrides:

<Steps>
  <Step title="Access Platform Settings">
    From the UI Designer navigation panel, select the **Settings** tab, then select the **desired platform** (Web, iOS, or Android).
  </Step>

  <Step title="Add Override">
    Click the "+" button (next to "Overrides") and select the type of override:

    * **Properties**: Override component properties (e.g., Title, Subtitle, Helper text)
    * **Expressions**: Override hide/show conditions
  </Step>

  <Step title="Configure Value">
    Enter the platform-specific value that differs from the generic setting.
  </Step>

  <Step title="Import/Export">
    Use the import/push functionality to share overrides between platforms when appropriate.
  </Step>
</Steps>

### Available override types

<Tabs>
  <Tab title="Property Overrides">
    **Common Property Overrides**:

    * **Title**: Shorter titles for mobile displays
    * **Subtitle**: Platform-appropriate subtitles
    * **Helper Text**: Context-specific help information
    * **Labels**: Adapted for platform conventions

    **Example Use Case**: Web title "Complete Application Process" → Mobile title "Complete App"
  </Tab>

  <Tab title="Expression Overrides">
    **Hide Expressions**: Platform-specific visibility conditions

    **Use Cases**:

    * Show different content on mobile vs desktop
    * Hide complex features on mobile platforms
    * Adapt to platform-specific user flows
  </Tab>
</Tabs>

## Platform limitations and constraints

### Component availability

| Component Type   | Web | iOS | Android | Notes                                       |
| ---------------- | --- | --- | ------- | ------------------------------------------- |
| Container        | ✅   | ✅   | ✅       | Full support across platforms               |
| Card             | ✅   | ✅   | ✅       | Mobile has additional screen title property |
| Custom           | ✅   | ❌   | ❌       | Web-only component                          |
| Form Elements    | ✅   | ✅   | ✅       | Full support with platform adaptations      |
| Navigation Areas | ✅   | ⚠️  | ⚠️      | Limited on mobile (no headers/footers)      |

<Info>
  ⚠️ = Limited functionality or platform-specific constraints\
  ❌ = Not supported on platform
</Info>

### Navigation limitations

<AccordionGroup>
  <Accordion title="Mobile Navigation Constraints" icon="mobile-screen">
    **Limitations**:

    * No zones with headers and footers on mobile
    * Limited navigation types (no wizard mode on mobile)
    * Simplified navigation hierarchy
    * Basic navigation areas only

    **Workarounds**:

    * Use card-based layouts for mobile organization
    * Implement navigation through event handlers
    * Use platform-specific screen titles
  </Accordion>

  <Accordion title="Cross-Platform Consistency" icon="arrows-rotate">
    **Challenges**:

    * Different navigation capabilities across platforms
    * Varying screen sizes and interaction methods
    * Platform-specific design conventions

    **Solutions**:

    * Use generic settings as baseline
    * Apply strategic platform overrides
    * Test across all target platforms
    * Design for the most constrained platform first
  </Accordion>
</AccordionGroup>

## Platform-specific best practices

### Web platform optimization

<CardGroup cols={2}>
  <Card title="Navigation Design" icon="sitemap">
    **Use Web Capabilities**:

    * Use full zone navigation with headers/footers
    * Implement wizard navigation for complex flows
    * Take advantage of larger screen real estate
    * Use single-page forms with card organization
  </Card>

  <Card title="Layout Strategy" icon="table-layout">
    **Web-Specific Layouts**:

    * Utilize horizontal space effectively
    * Implement complex grid layouts
    * Support both single-page and wizard navigation
    * Consider desktop interaction patterns
  </Card>
</CardGroup>

### Mobile platform optimization

<Steps>
  <Step title="Screen Space Management">
    **Mobile Constraints**:

    * Smaller screen sizes require condensed content
    * Use shorter titles and labels
    * Prioritize essential information
    * Consider thumb-friendly interaction zones
  </Step>

  <Step title="Platform Integration">
    **Mobile-Specific Features**:

    * Configure screen titles for navigation bars
    * Set appropriate scrollable behavior (iOS)
    * Consider platform design conventions
    * Test on actual devices when possible
  </Step>

  <Step title="Content Adaptation">
    **Mobile Content Strategy**:

    * Use platform overrides for mobile-optimized text
    * Simplify complex interactions
    * Ensure touch targets are appropriately sized
    * Test with realistic content lengths
  </Step>
</Steps>

## Testing across platforms

### Preview limitations

<Info>
  **Important**: The preview generated in the UI Designer for iOS and Android platforms is an estimate meant to help you visualize how it might look on a mobile view. Actual device testing is recommended for production applications.
</Info>

### Testing Strategy

<AccordionGroup>
  <Accordion title="Platform Switching" icon="arrows-rotate">
    **UI Designer Testing**:

    * Use platform tabs to switch between Web, iOS, and Android views
    * Compare layouts and content across platforms
    * Validate platform overrides are applied correctly
    * Check navigation behavior differences
  </Accordion>

  <Accordion title="Content Validation" icon="check">
    **Cross-Platform Content**:

    * Verify text fits within mobile constraints
    * Test with longest expected translations
    * Ensure critical information is visible on all platforms
    * Validate platform-specific features function correctly
  </Accordion>

  <Accordion title="Functionality Testing" icon="play">
    **Feature Validation**:

    * Test navigation flows on each platform
    * Verify platform-specific components work as expected
    * Validate hide/show expressions across platforms
    * Test conditional styling behavior
  </Accordion>
</AccordionGroup>

## Migration and maintenance

### Platform updates

<Tip>
  **Override Management**: Settings overrides can always be imported/pushed from one platform to another, making it easier to maintain consistency while allowing for platform-specific optimizations.
</Tip>

### Maintenance best practices

<Steps>
  <Step title="Regular Testing">
    Test your interfaces across all target platforms regularly, especially after making changes to generic settings or platform overrides.
  </Step>

  <Step title="Documentation">
    Document platform-specific decisions and overrides to help team members understand the rationale behind platform differences.
  </Step>

  <Step title="Consistency Monitoring">
    Regularly review platform overrides to ensure they still serve their intended purpose and maintain overall design consistency.
  </Step>
</Steps>

<Check>
  Understanding platform-specific considerations helps you create interfaces that work well across all target platforms while taking advantage of each platform's unique capabilities and respecting their constraints.
</Check>