> ## 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

> [card] Web
>
> **Full Feature Support**
>
> * Complete navigation area functionality
> * Zones with headers and footers
> * Wizard and single-page navigation
> * All UI component types supported

> [card] iOS
>
> **Mobile-Optimized**
>
> * Basic navigation areas
> * Screen title configuration for navigation bar
> * Scrollable property for root card components
> * Platform-specific property overrides

> [card] Android
>
> **Mobile-Optimized**
>
> * Basic navigation areas
> * Screen title configuration for navigation bar
> * Platform-specific property overrides
> * Material design considerations

## Web platform features

### Navigation capabilities

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

> [accordion] Zone Navigation
>
> **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.

> [accordion] Navigation Types
>
> **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

### Component support

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

## Mobile platform features

### iOS platform specifics

> [tab] 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={"dark"}
> {
>   "screenTitle": "User Profile",
>   "scrollable": true
> }
> ```

> [tab] 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] Component Adaptations
>
> **iOS Considerations**:
>
> * Screen size variations (iPhone, iPad)
> * Touch interaction patterns
> * Platform-specific styling requirements
> * System integration features

### Android platform specifics

> [accordion] Screen Configuration
>
> **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] Device Variations
>
> **Android Ecosystem**:
>
> * Multiple screen sizes and densities
> * Different Android versions
> * Manufacturer-specific customizations
> * Hardware capability variations

## Platform override system

### Configuration hierarchy

**1. Generic Settings**

**Base Configuration**: Properties available cross-platform (Web, Android and iOS), serving as the default for all platforms.

**2. Platform Overrides**

**Specific Customizations**: Override generic settings for individual platforms to optimize user experience.

**3. Preview and Testing**

**Visual Validation**: Preview changes across platforms, keeping in mind that iOS and Android previews are estimates.

### Implementing overrides

To configure platform-specific overrides:

**1. Access Platform Settings**

From the UI Designer navigation panel, select the **Settings** tab, then select the **desired platform** (Web, iOS, or Android).

**2. 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

**3. Configure Value**

Enter the platform-specific value that differs from the generic setting.

**4. Import/Export**

Use the import/push functionality to share overrides between platforms when appropriate.

### Available override types

> [tab] 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] 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

## 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) |

> [!NOTE]
>
> ⚠️ = Limited functionality or platform-specific constraints\
> ❌ = Not supported on platform

### Styling and layout limitations

These design-time options are applied by the **web renderer only**. Native iOS and Android renderers do not honor them:

* **Custom CSS**: custom CSS is a web-only styling mechanism; native renderers ignore it.
* **Justify layout options**: the **Justify** setting (Start, Center, End, Space Between, Space Around, Space Evenly) is honored on web only.

### Navigation limitations

> [accordion] Mobile Navigation Constraints
>
> **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] Cross-Platform Consistency
>
> **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

## Platform-specific best practices

### Web platform optimization

> [card] Navigation Design
>
> **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] Layout Strategy
>
> **Web-Specific Layouts**:
>
> * Utilize horizontal space effectively
> * Implement complex grid layouts
> * Support both single-page and wizard navigation
> * Consider desktop interaction patterns

### Mobile platform optimization

**1. Screen Space Management**

**Mobile Constraints**:

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

**2. 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

**3. 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

## Testing across platforms

### Preview limitations

> [!NOTE]
>
> **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.

### Testing Strategy

> [accordion] Platform Switching
>
> **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] Content Validation
>
> **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] Functionality Testing
>
> **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

## 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.

### Maintenance best practices

**1. Regular Testing**

Test your interfaces across all target platforms regularly, especially after making changes to generic settings or platform overrides.

**2. Documentation**

Document platform-specific decisions and overrides to help team members understand the rationale behind platform differences.

**3. Consistency Monitoring**

Regularly review platform overrides to ensure they still serve their intended purpose and maintain overall design consistency.

> [!TIP]
>
> 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.


## Related topics

- [UI Designer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
- [UI Flows](https://docs.flowx.ai/6.x/docs/building-blocks/ui-flows.md)
- [Screen configuration guide](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/screen-configuration-guide.md)
- [Layout configuration](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/layout-configuration.md)
- [Process definition](https://docs.flowx.ai/6.x/docs/building-blocks/process/process-definition.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.