Fullscreen Safe-Area

Overview

Full screen mode allows your app to utilize the entire device display, removing status bars and extending content edge-to-edge. Safe area management ensures your content remains visible and accessible, automatically adjusting for device-specific features like notches, Dynamic Island, and home indicators.

Prerequisites

Despia Configuration

1. Open your Despia project

2. Navigate to settings

3. Enable Full Screen Mode

4. Rebuild and republish your application (required for this native change)

WeWeb Setup

1. Install the Despia plugin from WeWeb Marketplace

2. Verify installation: Assets → Library → check for "Despia Provider"

Implementation Steps

Step 1: Add Despia Plugin Component

1. Click Add in WeWeb editor

2. Navigate to Assets panel

3. Drag Despia native component to the top of your page

Step 2: Create Top Safe Area

1. Add a Div Block as the first element on your page

2. Name it "safe-area-top" (optional)

3. Set its properties:

   • Height: Fixed

   • Value: Bind to formula: Despia Plugin > nativesafearea.top + "px"

   • Width: 100%

Step 3: Create Bottom Safe Area

1. Add another Div Block at the bottom of your page

2. Name it "safe-area-bottom" (optional)

3. Set its properties:

   • Height: Fixed

   • Value: Bind to formula: Despia Plugin > nativesafearea.bottom + "px"

   • Width: 100%

Dynamic Layout Strategies

Method 1: Spacer Divs

Use empty div blocks with dynamic heights as shown above to push content into safe areas.

Method 2: Dynamic Padding

Apply safe area values directly to container padding:

Copypadding-top: [nativesafearea.top]px;
padding-bottom: [nativesafearea.bottom]px

Method 3: Margin Adjustment

Use margins on your main content container:

Copymargin-top: [nativesafearea.top]px;
margin-bottom: [nativesafearea.bottom]px

Device-Specific Considerations

iPhone Models with Notch/Dynamic Island

• Top safe area: 44-59px

• Bottom safe area: 34px

• Requires both top and bottom adjustments

iPhone Models with Home Button

• Top safe area: 20-24px (status bar height)

• Bottom safe area: 0px

• Minimal adjustment needed

Android Devices

• Varies by manufacturer and model

• Punch-hole cameras may require custom adjustments

• Navigation bar height varies (0-48px)

Common Use Cases

Video Players

• Full-screen video with controls in safe areas

• Swipe gestures that respect system areas

Image Galleries

• Edge-to-edge photos with UI overlays in safe zones

• Pinch-to-zoom without losing access to controls

Games

• Immersive gameplay area

• UI elements positioned within safe boundaries

Social Media Feeds

• Content extends full width

• Navigation and action buttons remain accessible

Best Practices

1. Test on Multiple Devices: Safe areas vary significantly

2. Consider Orientation: Landscape safe areas differ from portrait

3. Fallback Values: Plugin provides 0px default when not on mobile

4. Responsive Design: Combine with responsive breakpoints

5. Content Priority: Ensure critical content is always in safe area

Publishing & Updates

• Initial full-screen mode requires app rebuild

• Safe area adjustments use over-the-air updates

• Layout changes deploy immediately

• No App Store resubmission for spacing tweaks

Troubleshooting

Content still behind notch:

• Verify Despia plugin is on the page

• Check formula includes "px" unit

• Ensure full screen mode is enabled in Despia

Safe area values showing 0:

• Normal in browser preview

• Test on actual device for real values

• Check plugin installation

Bottom content cut off:

• Add bottom safe area div

• Account for home indicator on newer iPhones

• Test with device keyboard open