NativePHP for Mobile

https://nativephp.com/docs/mobile/
Admin
NativePHP for Mobile is a library that allows you to run full PHP applications natively on mobile...
Tokens:90,003
Snippets:1,260
Trust Score:8.5
Update:3 months ago
Show doc for...
Tokens:
Raw
### Define Installation Instructions

Source: https://nativephp.com/docs/mobile/4/plugins/best-practices

Include these commands in your README to guide users through the installation process via Composer and the NativePHP CLI.

```markdown
## Installation

composer require vendor/my-plugin

php artisan native:plugin:register vendor/my-plugin
```

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

### Install a premium plugin

Source: https://nativephp.com/docs/mobile/4/plugins/using-plugins

Install a premium plugin after configuring the repository and credentials.

```shell
composer require vendor/nativephp-premium-plugin
```

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

### Install a standard plugin

Source: https://nativephp.com/docs/mobile/4/plugins/using-plugins

Install a standard NativePHP plugin using Composer.

```shell
composer require vendor/nativephp-plugin-name
```

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

### Install and Verify Xcode Command Line Tools

Source: https://nativephp.com/docs/mobile/4/getting-started/environment-setup

Commands to install the Xcode command line tools and verify the installation path.

```shell
xcode-select --install
```

```shell
xcode-select -p
```

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

### Start Development Server

Source: https://nativephp.com/docs/mobile/4/getting-started/commands

Starts the NativePHP development server for testing mobile apps without performing a full build.

```shell
php artisan native:jump
```

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

### Install Vibe Plugin

Source: https://nativephp.com/docs/mobile/4/digging-deeper/websockets

Install the required Composer package and register the plugin in your project.

```shell
composer require nativephp/mobile-vibe
php artisan native:plugin:register nativephp/mobile-vibe
```

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

### Move File Example

Source: https://nativephp.com/docs/mobile/4/the-basics/file

Demonstrates moving a temporary file to a permanent storage location.

```php
use Native\Mobile\Facades\File;

$temp = sys_get_temp_dir().'/recording.m4a';
$permanent = storage_path('recordings/recording.m4a');

if (File::move($temp, $permanent)) {
    // saved
}
```

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

### Install AI agents

Source: https://nativephp.com/docs/mobile/4/getting-started/commands

Installs AI agents for plugin development, with options to force overwrite or install all.

```shell
php artisan native:plugin:install-agent
```

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

### Clone the repository

Source: https://nativephp.com/docs/mobile/4/getting-started/contributing

Initial setup command to clone the fork and navigate into the project directory.

```bash
git clone git@github.com:your-username/mobile-air.git
cd mobile-air
```

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

### Install and Verify CocoaPods

Source: https://nativephp.com/docs/mobile/4/getting-started/environment-setup

Commands to install CocoaPods via Homebrew and verify the installed version.

```shell
brew install cocoapods
```

```shell
pod --version
```

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

### Configure Start URL

Source: https://nativephp.com/docs/mobile/4/getting-started/configuration

Sets the initial path for the application upon startup, defaulting to the root if not specified.

```php
'start_url' => env('NATIVEPHP_START_URL', '/'),
```

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

### Testing a component

Source: https://nativephp.com/docs/mobile/4/testing/introduction

Example of mounting a component and performing assertions on its state and rendered output.

```php
use App\NativeComponents\Counter;
use Native\Mobile\Testing\Native;

it('increments the count', function () {
    Native::test(Counter::class)
        ->assertSee('Count: 0')
        ->tap('Increment')
        ->assertSet('count', 1)
        ->assertSee('Count: 1');
});
```

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

### Deep Link Examples

Source: https://nativephp.com/docs/mobile/4/digging-deeper/deep-links

Examples of the two supported deep linking formats.

```text
myapp://some/path
```

```text
https://example.net/some/path
```

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

### Download and Copy ML Model Example

Source: https://nativephp.com/docs/mobile/4/plugins/lifecycle-hooks

Demonstrates using helper methods to download a file and copy it to platform-specific directories.

```php
public function handle(): int
{
    $modelPath = $this->pluginPath() . '/resources/models/model.tflite';

    // Download if not cached locally
    $this->downloadIfMissing(
        'https://example.com/models/v2/model.tflite',
        $modelPath
    );

    // Copy to the appropriate platform location
    if ($this->isAndroid()) {
        $this->copyToAndroidAssets('models/model.tflite', 'models/model.tflite');
        $this->info('Model copied to Android assets');
    }

    if ($this->isIos()) {
        $this->copyToIosBundle('models/model.tflite', 'models/model.tflite');
        $this->info('Model copied to iOS bundle');
    }

    return self::SUCCESS;
}
```

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

### Install Homebrew

Source: https://nativephp.com/docs/mobile/4/getting-started/environment-setup

Command to install the Homebrew package manager on macOS.

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

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

### Install and run NativePHP locally

Source: https://nativephp.com/docs/mobile/4/getting-started/quick-start

Configure an existing environment for mobile builds and execute the application locally.

```bash
# Install NativePHP for Mobile into a new Laravel app
composer require nativephp/mobile

# Ready your app to go native
php artisan native:install

# Run your app on a mobile device
php artisan native:run
```

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

### Run the SuperNative demo application

Source: https://nativephp.com/docs/mobile/4/architecture/super-native

Commands to clone, install, and launch the SuperNative demonstration project on a simulator or device.

```shell
git clone https://github.com/nativephp/super-native
cd super-native
composer install
php artisan native:install
php artisan native:run
```

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

### Install Laravel Boost for NativePHP

Source: https://nativephp.com/docs/mobile/4/getting-started/development

Run this command after installing the necessary packages to activate NativePHP support for Laravel Boost.

```bash
php artisan boost:install
```

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

### Basic Image Example

Source: https://nativephp.com/docs/mobile/4/edge-components/image

A simple image implementation with full width and fixed height.

```blade
<native:image src="https://example.com/hero.jpg" class="w-full" :height="200" :fit="2" />
```

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

### Volume Slider Example

Source: https://nativephp.com/docs/mobile/4/edge-components/slider

A complete layout example including a label and a debounced slider for volume control.

```blade
<native:column class="w-full gap-2 p-4">
    <native:row class="w-full" :justify-content="3">
        <native:text class="text-sm">Volume</native:text>
        <native:text class="text-sm">{{ $volume }}%</native:text>
    </native:row>
    <native:slider :min="0" :max="100" :step="1" native:model.debounce.150ms="volume" />
</native:column>
```

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

### Install NativePHP dependencies

Source: https://nativephp.com/docs/mobile/4/architecture/embedded-php

Downloads the prebuilt PHP bundles and configures them for the platform projects.

```shell
php artisan native:install
```

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

### Settings List Example

Source: https://nativephp.com/docs/mobile/4/edge-components/toggle

A collection of toggles within a column layout, demonstrating various binding and state configurations.

```blade
<native:column class="w-full gap-0">
    <native:row class="w-full px-4 py-3" :justify-content="3" :align-items="1">
        <native:text class="text-base">Dark Mode</native:text>
        <native:toggle native:model="darkMode" />
    </native:row>
    <native:divider />
    <native:row class="w-full px-4 py-3" :justify-content="3" :align-items="1">
        <native:text class="text-base">Notifications</native:text>
        <native:toggle native:model="notifications" />
    </native:row>
    <native:divider />
    <native:row class="w-full px-4 py-3" :justify-content="3" :align-items="1">
        <native:text class="text-base">Location</native:text>
        <native:toggle :value="$location" @change="toggleLocation" disabled />
    </native:row>
</native:column>
```

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

### Build frontend assets

Source: https://nativephp.com/docs/mobile/4/the-basics/assets

Run the build command before starting the native application to ensure frontend changes are included.

```bash
npm run build
```

```bash
php artisan native:run
```

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

### Country Picker Example

Source: https://nativephp.com/docs/mobile/4/edge-components/select

A practical example of a country selection dropdown with a placeholder.

```blade
<native:select
    label="Country"
    placeholder="Select country"
    :options="['Australia', 'Brazil', 'Canada', 'Germany', 'Japan', 'United Kingdom', 'United States']"
    native:model="country"
/>
```

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

### Define Initialization Functions

Source: https://nativephp.com/docs/mobile/4/plugins/advanced-configuration

Specify native functions to execute during app startup for SDK setup or global state initialization.

```json
{
    "android": {
        "init_function": "com.myvendor.plugins.myplugin.MyPluginInit.initialize"
    },
    "ios": {
        "init_function": "MyPluginInit.initialize"
    }
}
```

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

### Basic Progress Bar Usage

Source: https://nativephp.com/docs/mobile/4/edge-components/progress-bar

A simple determinate progress bar example.

```blade
<native:progress-bar :value="0.65" />
```

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

### List installed NativePHP plugins

Source: https://nativephp.com/docs/mobile/4/getting-started/commands

Displays all installed plugins, with options to output as JSON or include unregistered plugins.

```shell
php artisan native:plugin:list
```

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

### Basic Stack Usage

Source: https://nativephp.com/docs/mobile/4/edge-components/stack

An example of layering an image and text within a stack container.

```blade
<native:stack class="w-[200] h-[200]">
    <native:image src="https://example.com/photo.jpg" class="w-full h-full" />
    <native:column class="w-full h-full items-center justify-center">
        <native:text class="text-xl font-bold text-white">Overlay Text</native:text>
    </native:column>
</native:stack>
```

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

### List Registered Plugins

Source: https://nativephp.com/docs/mobile/4/plugins/creating-plugins

View currently registered or all installed plugins.

```shell
# Show registered plugins
php artisan native:plugin:list

# Show all installed plugins (including unregistered)
php artisan native:plugin:list --all
```

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

### Implement a Plan Picker

Source: https://nativephp.com/docs/mobile/4/edge-components/radio-group

A radio group example featuring multiple pricing tiers and a disabled option.

```blade
<native:radio-group native:model="plan" label="Choose a plan">
    <native:radio value="free"     label="Free — $0/mo" />
    <native:radio value="pro"      label="Pro — $9/mo" />
    <native:radio value="team"     label="Team — $29/mo" />
    <native:radio value="custom"   label="Enterprise (contact sales)" disabled />
</native:radio-group>
```

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

### Use the native command helper

Source: https://nativephp.com/docs/mobile/4/getting-started/quick-start

Utilize the installed native script helper as a shorthand for Artisan commands.

```shell
# Instead of...
php artisan native:run

# Do
php native run

# Or
./native run
```

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

### Document PHP Usage

Source: https://nativephp.com/docs/mobile/4/plugins/best-practices

Provide clear examples of facade usage and event handling within Livewire components.

```markdown
## Usage (PHP)

use Vendor\MyPlugin\Facades\MyPlugin;

// Basic usage
$result = MyPlugin::doSomething(['option' => 'value']);

// Listening for events in Livewire
#[OnNative(SomethingCompleted::class)]
public function handleResult($data)
{
    $this->result = $data['result'];
}
```

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

### Stepped Picker Example

Source: https://nativephp.com/docs/mobile/4/edge-components/slider

A slider configured for discrete stepped selection.

```blade
<native:slider :min="1" :max="5" :step="1" native:model="rating" />
```

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

### Start the development watcher

Source: https://nativephp.com/docs/mobile/4/getting-started/development

Initiates a long-lived process to watch source files and push updates to the emulator.

```shell
php artisan native:watch
```

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

### Font Weight Scale Example

Source: https://nativephp.com/docs/mobile/4/edge-components/text

Demonstrates the available font weight scale from 1 to 7.

```blade
<native:text :font-weight="1" :font-size="18">Thin (1)</native:text>
<native:text :font-weight="2" :font-size="18">Light (2)</native:text>
<native:text :font-weight="3" :font-size="18">Regular (3)</native:text>
<native:text :font-weight="4" :font-size="18">Medium (4)</native:text>
<native:text :font-weight="5" :font-size="18">SemiBold (5)</native:text>
<native:text :font-weight="6" :font-size="18">Bold (6)</native:text>
<native:text :font-weight="7" :font-size="18">Heavy (7)</native:text>
```

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

### Accessing Native Facades in PHP

Source: https://nativephp.com/docs/mobile/4/the-basics/native-functions

Examples of Laravel Facades used to access native device features directly from PHP code.

```php
Native\Mobile\Facades\Biometrics
Native\Mobile\Facades\Browser
Native\Mobile\Facades\Camera
```

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

### Configure Android Environment Variables on Windows

Source: https://nativephp.com/docs/mobile/4/getting-started/environment-setup

Sets ANDROID_HOME, PATH, and JAVA_HOME for Windows environments using default installation paths.

```shell
set ANDROID_HOME=C:\Users\yourname\AppData\Local\Android\Sdk
set PATH=%PATH%;%JAVA_HOME%\bin;%ANDROID_HOME%\platform-tools

# This isn't required if JAVA_HOME is already set in the Windows Env Variables
set JAVA_HOME=C:\Program Files\Microsoft\jdk-17.0.8.7-hotspot
```

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

### Start Vite HMR with the watcher

Source: https://nativephp.com/docs/mobile/4/getting-started/development

Enables Vite's HMR server for UI development. Use the run command to build, deploy, and watch in one step.

```shell
php artisan native:watch --vite

# or build, deploy, and start watching in one go:
php artisan native:run --watch --vite
```

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

### Initialize component with mount()

Source: https://nativephp.com/docs/mobile/4/digging-deeper/lifecycle-hooks

Runs once when a screen is pushed onto the stack to load initial data or route parameters.

```php
class ProductScreen extends NativeComponent
{
    public array $product = [];

    public function mount(): void
    {
        $this->product = Product::findOrFail($this->param('id'))->toArray();
    }
}
```

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

### Create a new Laravel app with NativePHP

Source: https://nativephp.com/docs/mobile/4/getting-started/quick-start

Use the starter kit to scaffold a new Laravel project pre-configured for NativePHP mobile development.

```bash
laravel new my-app --using=nativephp/mobile-starter

cd my-app

php artisan native:jump
```

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

### Define Full Plugin Manifest

Source: https://nativephp.com/docs/mobile/4/plugins/permissions-dependencies

A complete example of a plugin manifest including Android permissions, dependencies, repositories, iOS configuration, and required secrets.

```json
{
    "name": "vendor/ml-maps-plugin",
    "namespace": "MLMaps",
    "android": {
        "permissions": [
            "android.permission.CAMERA",
            "android.permission.ACCESS_FINE_LOCATION"
        ],
        "dependencies": {
            "implementation": [
                "com.google.mlkit:object-detection:17.0.0",
                "com.mapbox.maps:android:11.0.0"
            ]
        },
        "repositories": [
            {
                "url": "https://api.mapbox.com/downloads/v2/releases/maven",
                "credentials": {
                    "username": "mapbox",
                    "password": "${MAPBOX_DOWNLOADS_TOKEN}"
                }
            }
        ]
    },
    "ios": {
        "info_plist": {
            "NSCameraUsageDescription": "Camera is used for real-time object detection",
            "NSLocationWhenInUseUsageDescription": "Location is used to display your position on the map",
            "MBXAccessToken": "${MAPBOX_PUBLIC_TOKEN}"
        },
        "dependencies": {
            "pods": [
                {"name": "MapboxMaps", "version": "~> 11.0"}
            ]
        }
    },
    "secrets": {
        "MAPBOX_DOWNLOADS_TOKEN": {
            "description": "Mapbox SDK download token from mapbox.com/account/access-tokens",
            "required": true
        },
        "MAPBOX_PUBLIC_TOKEN": {
            "description": "Mapbox public access token for runtime API calls",
            "required": true
        }
    }
}
```

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

### Import Device Facade

Source: https://nativephp.com/docs/mobile/4/the-basics/device

Include the Device facade to access hardware and device information methods.

```php
use Native\Mobile\Facades\Device;
```

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

### Define a complete plugin manifest

Source: https://nativephp.com/docs/mobile/4/plugins/advanced-configuration

A full example of a plugin manifest file integrating Firebase ML Kit, including Android and iOS platform-specific configurations.

```json
{
    "namespace": "FirebaseML",
    "bridge_functions": [
        {
            "name": "FirebaseML.Analyze",
            "android": "com.nativephp.plugins.firebaseml.AnalyzeFunctions.Analyze",
            "ios": "FirebaseMLFunctions.Analyze"
        }
    ],
    "events": [
        "Vendor\\FirebaseML\\Events\\AnalysisComplete"
    ],
    "android": {
        "permissions": [
            "android.permission.CAMERA",
            "android.permission.INTERNET"
        ],
        "features": [
            {"name": "android.hardware.camera", "required": true}
        ],
        "dependencies": {
            "implementation": [
                "com.google.firebase:firebase-ml-vision:24.1.0",
                "com.google.firebase:firebase-core:21.1.1"
            ]
        },
        "activities": [
            {
                "name": ".CameraPreviewActivity",
                "theme": "@style/Theme.AppCompat.Light.NoActionBar",
                "exported": false,
                "configChanges": "orientation|screenSize|keyboardHidden"
            }
        ],
        "meta_data": [
            {
                "name": "com.google.firebase.ml.vision.DEPENDENCIES",
                "value": "ocr"
            }
        ]
    },
    "ios": {
        "info_plist": {
            "NSCameraUsageDescription": "Camera is used for ML analysis"
        },
        "dependencies": {
            "pods": [
                {"name": "Firebase/MLVision", "version": "~> 10.0"},
                {"name": "Firebase/Core", "version": "~> 10.0"}
            ]
        },
        "background_modes": ["processing"],
        "entitlements": {
            "com.apple.developer.associated-domains": ["applinks:example.com"]
        }
    },
    "assets": {
        "android": {
            "google-services.json": "google-services.json"
        },
        "ios": {
            "GoogleService-Info.plist": "Resources/GoogleService-Info.plist"
        }
    },
    "secrets": {
        "FIREBASE_API_KEY": {
            "description": "Firebase API key from Firebase Console",
            "required": true
        }
    },
    "hooks": {
        "pre_compile": "nativephp:firebase-ml:setup"
    }
}
```

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

### Follow navigation flow

Source: https://nativephp.com/docs/mobile/4/testing/navigation

Use follow() to transition the test harness to the destination screen and verify the component state.

```php
use App\NativeComponents\GeolocationDemo;

it('follows navigation from home onto the geolocation demo', function () {
    Native::visit('/')
        ->tap('Location')
        ->assertNavigatedTo('/system/geolocation')
        ->follow()
        ->assertScreen(GeolocationDemo::class)
        ->assertSee('Geolocation');
});
```

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

### Install NativePHP

Source: https://nativephp.com/docs/mobile/4/getting-started/commands

Installs NativePHP into your Laravel application. Supports specifying a target platform and various configuration flags.

```shell
php artisan native:install {platform?}
```

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

### Install NativePHP Composer package

Source: https://nativephp.com/docs/mobile/4/getting-started/installation

Run this command in your Laravel project root to install the necessary NativePHP libraries.

```shell
composer require nativephp/mobile
```

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

### Build iOS App for App Store

Source: https://nativephp.com/docs/mobile/4/publishing/ios

Use this command to package a production-ready app for App Store submission.

```bash
php artisan native:package ios \
  --export-method=app-store \
  --api-key-path=/path/to/api-key.p8 \
  --api-key-id=ABC123DEF \
  --api-issuer-id=01234567-89ab-cdef-0123-456789abcdef \
  --certificate-path=/path/to/distribution.p12 \
  --certificate-password=certificatepassword \
  --provisioning-profile-path=/path/to/profile.mobileprovision \
  --team-id=ABC1234567
```

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

### Display Version

Source: https://nativephp.com/docs/mobile/4/getting-started/commands

Displays the currently installed version of NativePHP Mobile.

```shell
php artisan native:version
```

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

### Importing the Native facade

Source: https://nativephp.com/docs/mobile/4/testing/introduction

The entry point for testing components in NativePHP.

```php
use Native\Mobile\Testing\Native;
```

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

### Tinted Icon Example

Source: https://nativephp.com/docs/mobile/4/edge-components/image

Applies a hex color tint to an image.

```blade
<native:image
    src="https://example.com/logo.png"
    :width="40"
    :height="40"
    tint-color="#7C3AED"
/>
```

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

### Period Picker Example

Source: https://nativephp.com/docs/mobile/4/edge-components/button-group

A button group configured for selecting time periods.

```blade
<native:button-group
    :options="['Day', 'Week', 'Month', 'Year']"
    native:model="period"
/>
```

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

### Anchored Badge Example

Source: https://nativephp.com/docs/mobile/4/edge-components/badge

Uses a stack to position a badge as an overlay on an icon.

```blade
<native:stack :width="40" :height="40">
    <native:icon name="cart" :size="32" />
    <native:column class="absolute" :top="-2" :right="-2">
        <native:badge :count="$cartItems" />
    </native:column>
</native:stack>
```

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

### Initialize shape elements in PHP

Source: https://nativephp.com/docs/mobile/4/edge-components/shapes

Demonstrates the PHP fluent API for instantiating shape elements.

```php
use Native\Mobile\Edge\Elements\Rect;
use Native\Mobile\Edge\Elements\Circle;
use Native\Mobile\Edge\Elements\Line;

Rect::make();
Circle::make();
Line::make();
```

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

### Basic Badge Usage

Source: https://nativephp.com/docs/mobile/4/edge-components/badge

A simple example of rendering a badge with a numeric count.

```blade
<native:badge :count="3" />
```

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

### System::appSettings

Source: https://nativephp.com/docs/mobile/4/the-basics/system

Opens the device's system settings page for the application.

```APIDOC
## System::appSettings()

### Description
Triggers the device to open the application's specific settings page, useful for directing users to manage permissions.

### Signature
`System::appSettings(): void`
```

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

### Use a plugin facade

Source: https://nativephp.com/docs/mobile/4/plugins/using-plugins

Interact with native functionality using the plugin's provided facade.

```php
use Vendor\PluginName\Facades\PluginName;

// Call a native function
$result = PluginName::doSomething(['option' => 'value']);
```

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

### Walk a full navigation flow

Source: https://nativephp.com/docs/mobile/4/testing/navigation

Demonstrates navigating through a stack, asserting chrome changes, and returning to the original screen.

```php
use App\NativeComponents\MediaHub;
use App\NativeComponents\ScannerDemo;

it('walks hub → demo → back with chrome tracking the stack', function () {
    $hub = Native::visit('/media')->assertTabActive('Media');

    $scanner = $hub->tap('Scanner')
        ->assertNavigatedTo('/media/scanner')
        ->follow()
        ->assertScreen(ScannerDemo::class)
        ->assertNavTitle('Scanner');

    $scanner->goBack()
        ->assertScreen(MediaHub::class)
        ->assertTabActive('Media');
});
```

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

### Publishing the theme configuration

Source: https://nativephp.com/docs/mobile/4/digging-deeper/theming

Run this command to generate the config/native-ui.php file, which contains the theme token definitions.

```shell
php artisan vendor:publish --tag=native-ui-config
```

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

### Tappable Text Example

Source: https://nativephp.com/docs/mobile/4/edge-components/text

Uses the @press event listener to make text interactive.

```blade
<native:text class="text-base font-semibold" color="#3B82F6" @press="openLink">
    Learn more
</native:text>
```

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

### Importing the System Facade

Source: https://nativephp.com/docs/mobile/4/the-basics/system

The System facade is a core built-in and does not require additional registration.

```php
use Native\Mobile\Facades\System;
```

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

### Centered Heading Example

Source: https://nativephp.com/docs/mobile/4/edge-components/text

Applies text-center and font-extrabold classes to create a styled heading.

```blade
<native:text class="text-3xl font-extrabold text-center" color="#7C3AED">
    Welcome Back
</native:text>
```

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

### Create a NativeList with ListItems

Source: https://nativephp.com/docs/mobile/4/edge-components/list

Initializes a list with multiple items, including icons and event handlers for refresh and end-reached actions.

```php
use Nativephp\NativeUi\Elements\NativeList;
use Nativephp\NativeUi\Elements\ListItem;

NativeList::make(
    ListItem::make('Profile')->leadingIcon('person')->trailingIcon('forward'),
    ListItem::make('Settings')->leadingIcon('settings')->trailingIcon('forward'),
)
    ->separator()
    ->onRefresh('refresh')
    ->onEndReached('loadMore');
```

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

### Full-page scrollable layout

Source: https://nativephp.com/docs/mobile/4/edge-components/scroll-view

A full-screen scrollable container example using class-based sizing.

```blade
<native:scroll-view class="w-full h-full" bg="#FFFFFF">
    <native:column class="w-full gap-4 safe-area p-4">
        <native:text class="text-3xl font-bold">Welcome</native:text>
        <native:text class="text-base text-theme-on-surface-variant">
            Scroll down to see more content.
        </native:text>
        {{-- Long content here --}}
    </native:column>
</native:scroll-view>
```

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

### Indeterminate Progress Bar Example

Source: https://nativephp.com/docs/mobile/4/edge-components/progress-bar

A progress bar in indeterminate mode with an accessibility label.

```blade
<native:progress-bar indeterminate a11y-label="Loading" />
```

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

### Create Boost AI guidelines

Source: https://nativephp.com/docs/mobile/4/getting-started/commands

Generates AI guidelines for a specific plugin.

```shell
php artisan native:plugin:boost {plugin?}
```

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

### Determinate Progress Bar Example

Source: https://nativephp.com/docs/mobile/4/edge-components/progress-bar

A progress bar integrated into a layout with a percentage label.

```blade
<native:column class="w-full gap-2 p-4">
    <native:row class="w-full" :justify-content="3">
        <native:text class="text-sm">Uploading</native:text>
        <native:text class="text-sm">{{ round($progress * 100) }}%</native:text>
    </native:row>
    <native:progress-bar :value="$progress" />
</native:column>
```

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

### Implement lazy loading with #[Lazy]

Source: https://nativephp.com/docs/mobile/4/digging-deeper/lifecycle-hooks

Displays a placeholder immediately while performing heavy initialization tasks in the background.

```php
use Native\Mobile\Attributes\Lazy;

#[Lazy]
class Dashboard extends NativeComponent
{
    public function mount(): void
    {
        $this->stats = $this->crunchExpensiveStats(); // slow
    }

    protected function placeholder(): Element|View
    {
        return view('native.dashboard-skeleton');
    }
}
```

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

### Basic Separator Example

Source: https://nativephp.com/docs/mobile/4/edge-components/divider

Using a divider to separate content sections within a column.

```blade
<native:column class="w-full gap-4 p-4">
    <native:text class="text-lg font-bold">Section One</native:text>
    <native:text>Some content here.</native:text>
    <native:divider />
    <native:text class="text-lg font-bold">Section Two</native:text>
    <native:text>More content here.</native:text>
</native:column>
```

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

### Label Badge Example

Source: https://nativephp.com/docs/mobile/4/edge-components/badge

Displays a badge with a text label instead of a numeric count.

```blade
<native:badge label="New" variant="primary" />
```

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

### Import File Facade

Source: https://nativephp.com/docs/mobile/4/the-basics/file

Include the File facade to access native file system operations.

```php
use Native\Mobile\Facades\File;
```

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

### Accessing system appearance in PHP

Source: https://nativephp.com/docs/mobile/4/digging-deeper/theming

Use the System facade or global helpers to check the current system appearance.

```php
use Native\Mobile\Facades\System;

System::appearance();   // 'light' | 'dark'
System::isDarkMode();   // bool
System::isLightMode();  // bool
```

```php
isDark();   // bool
isLight();  // bool
```

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

### Install Local Plugin via Composer

Source: https://nativephp.com/docs/mobile/4/plugins/creating-plugins

Require the local plugin package using Composer.

```shell
composer require vendor/my-plugin
```

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

### Update composer dependencies

Source: https://nativephp.com/docs/mobile/4/getting-started/upgrade-guide

Update the nativephp/mobile version constraint in your composer.json and run the installation commands.

```json
"require": {
    "nativephp/mobile": "~3.1.0" // [tl! remove]
    "nativephp/mobile": "~4.0.0" // [tl! add]
}
```

```sh
composer update
php artisan native:install --force
```

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

### Build iOS App for Development

Source: https://nativephp.com/docs/mobile/4/publishing/ios

Use this command to package an app for testing on your own device.

```bash
php artisan native:package ios \
  --export-method=development \
  --certificate-path=/path/to/development.p12 \
  --certificate-password=certificatepassword \
  --provisioning-profile-path=/path/to/development-profile.mobileprovision
```

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

### Configure NativePHP environment variables

Source: https://nativephp.com/docs/mobile/4/getting-started/installation

Set these variables in your .env file before running the installation command.

```dotenv
NATIVEPHP_APP_ID=com.yourcompany.yourapp
```

```dotenv
NATIVEPHP_DEVELOPMENT_TEAM={your team ID}
```

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

### Use External Server

Source: https://nativephp.com/docs/mobile/4/the-basics/jump

Run native:jump with an existing server by disabling the automatic artisan serve and specifying the port.

```shell
php artisan native:jump --no-serve --laravel-port=8000
```

```shell
JUMP_BRIDGE_PORT=3002 php artisan serve --port=8000
```

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

### Truncated Text Example

Source: https://nativephp.com/docs/mobile/4/edge-components/text

Uses max-lines to truncate text with an ellipsis after a specified number of lines.

```blade
<native:text class="text-base" :max-lines="2" color="#64748B">
    This text will be truncated with an ellipsis after two lines if it overflows
    the available space in its container.
</native:text>
```

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

### Configure Development Server Settings

Source: https://nativephp.com/docs/mobile/4/getting-started/configuration

Defines ports and service discovery settings for the development server used by native:jump and native:watch.

```php
'server' => [
    'http_port' => env('NATIVEPHP_HTTP_PORT', 3000),
    'ws_port' => env('NATIVEPHP_WS_PORT', 8081),
    'service_name' => env('NATIVEPHP_SERVICE_NAME', 'NativePHP Server'),
    'open_browser' => env('NATIVEPHP_OPEN_BROWSER', true),
],
```

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

### Interpolate SharedValue

Source: https://nativephp.com/docs/mobile/4/digging-deeper/gestures

Example of deriving a new value from a shared value using the interpolate formula.

```php
$drag->interpolate([0, 200], [1, 0]);  // 0→1, 200→0, fully faded past 200
```

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

### Count Badge Example

Source: https://nativephp.com/docs/mobile/4/edge-components/badge

Displays a badge next to an icon, commonly used for notification counts.

```blade
<native:row :gap="8" :align-items="1">
    <native:icon name="notifications" :size="24" />
    <native:badge :count="$unreadCount" />
</native:row>
```

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

### Building assets for specific platforms

Source: https://nativephp.com/docs/mobile/4/getting-started/development

Run these commands to build your frontend assets for the target platform before compiling the native application.

```shell
npm run build -- --mode=ios

npm run build -- --mode=android
```

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

### Dynamic Content Example

Source: https://nativephp.com/docs/mobile/4/edge-components/text

Uses Blade syntax to inject dynamic PHP variables into the text component.

```blade
<native:text class="text-lg font-semibold" color="#7C3AED">
    Score: {{ $score }}
</native:text>
```

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

### Image in a Card Example

Source: https://nativephp.com/docs/mobile/4/edge-components/image

Demonstrates nesting an image within a column container to create a card layout.

```blade
<native:column class="w-full rounded-2xl" :border-width="1" border-color="#E2E8F0" bg="#FFFFFF">
    <native:image src="https://example.com/cover.jpg" class="w-full" :height="180" :fit="2" />
    <native:column class="p-4 gap-2">
        <native:text class="text-lg font-bold">Article Title</native:text>
        <native:text class="text-base text-theme-on-surface-variant">A brief description of the article.</native:text>
    </native:column>
</native:column>
```

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

### Create avatar strip carousel

Source: https://nativephp.com/docs/mobile/4/edge-components/carousel

Example of a carousel displaying a horizontal strip of user avatars and names.

```blade
<native:carousel :item-width="80" :item-spacing="8">
    @foreach($contacts as $contact)
        <native:column :height="100" center :gap="6">
            <native:image src="{{ $contact->avatar }}" :width="64" :height="64" :border-radius="32" :fit="2" />
            <native:text class="text-xs">{{ $contact->name }}</native:text>
        </native:column>
    @endforeach
</native:carousel>
```

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

### Verify keystore alias

Source: https://nativephp.com/docs/mobile/4/publishing/android

Use the keytool utility to list and verify the contents of a keystore file.

```bash
keytool -list -v -keystore /path/to/keystore
```

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

### Create featured cards carousel

Source: https://nativephp.com/docs/mobile/4/edge-components/carousel

Example of a carousel displaying featured cards with dynamic background colors.

```blade
<native:carousel :item-width="320" :item-spacing="16">
    @foreach($features as $feature)
        <native:column :height="180" bg="{{ $feature->color }}" :padding="20">
            <native:text class="text-2xl font-bold text-white">{{ $feature->title }}</native:text>
            <native:spacer />
            <native:text class="text-base text-white">{{ $feature->subtitle }}</native:text>
        </native:column>
    @endforeach
</native:carousel>
```

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

### Build iOS App with Environment Variables

Source: https://nativephp.com/docs/mobile/4/publishing/ios

Execute the build command after configuring credentials in the .env file.

```bash
php artisan native:package ios --export-method=app-store
```

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

### Document JavaScript Usage

Source: https://nativephp.com/docs/mobile/4/plugins/best-practices

Show how to import and use plugin functionality within SPA frameworks like Vue or React.

```markdown
## Usage (JavaScript)

import { DoSomething } from 'vendor-my-plugin';

// In Vue/React components
const result = await DoSomething({ option: 'value' });
```

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

### Build with Environment Variables

Source: https://nativephp.com/docs/mobile/4/publishing/android

Executes the build command using credentials defined in the environment.

```bash
php artisan native:package android --build-type=bundle
```

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

### Importing the Dialog Facade

Source: https://nativephp.com/docs/mobile/4/the-basics/dialogs

Include the Dialog facade to access native alert and toast functionality.

```php
use Native\Mobile\Facades\Dialog;
```

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

### Build a release APK

Source: https://nativephp.com/docs/mobile/4/publishing/android

Compiles and signs an Android APK using the specified keystore and key credentials.

```bash
php artisan native:package android \
  --keystore=/path/to/my-app.keystore \
  --keystore-password=mykeystorepassword \
  --key-alias=my-app-key \
  --key-password=mykeypassword
```

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

### Define a row template view

Source: https://nativephp.com/docs/mobile/4/edge-components/virtual-list

Example of a row template view that receives the current index to fetch and display data.

```blade
{{-- resources/views/native/rows/contact.blade.php --}}
@php $contact = \App\Models\Contact::skip($index)->first(); @endphp

<native:list-item headline="{{ $contact->name }}" supporting="{{ $contact->email }}" />
```

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

### Create a settings menu list

Source: https://nativephp.com/docs/mobile/4/edge-components/list

A list with separators and icons for navigation items.

```blade
<native:list separator>
    <native:list-item headline="Profile"       leadingIcon="person"        trailingIcon="forward" @press="openProfile" />
    <native:list-item headline="Notifications" leadingIcon="notifications" trailingIcon="forward" @press="openNotifications" />
    <native:list-item headline="Privacy"       leadingIcon="lock"          trailingIcon="forward" @press="openPrivacy" />
    <native:list-item headline="Help"          leadingIcon="help"          trailingIcon="forward" @press="openHelp" />
</native:list>
```

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

### Package Android application to custom directory

Source: https://nativephp.com/docs/mobile/4/publishing/android

Use the --output flag to specify a destination path for the build artifact instead of the default file manager behavior.

```bash
php artisan native:package android \
  --build-type=bundle \
  --keystore=/path/to/my-app.keystore \
  --keystore-password=mykeystorepassword \
  --key-alias=my-app-key \
  --key-password=mykeypassword \
  --output=/path/to/custom/directory
```

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

### View missing prop error message

Source: https://nativephp.com/docs/mobile/4/edge-components/introduction

Example of the error message displayed when a required prop is omitted from an EDGE component.

```text
EDGE Component <native:bottom-nav-item> is missing required properties: 'label'.
Add these attributes to your component: label="..."
```

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

### Platform Detection Methods

Source: https://nativephp.com/docs/mobile/4/the-basics/system

Use these methods to branch logic or conditionally render UI based on the device platform.

```php
System::isIos();      // true on iOS
System::isAndroid();  // true on Android
System::isMobile();   // true on either platform
```

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

### Rounded Avatar Example

Source: https://nativephp.com/docs/mobile/4/edge-components/image

Displays a circular image by setting equal width/height and a border radius equal to half the dimension.

```blade
<native:image
    src="https://example.com/avatar.jpg"
    :width="64"
    :height="64"
    :fit="2"
    :border-radius="32"
/>
```

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

### Basic List Implementation

Source: https://nativephp.com/docs/mobile/4/edge-components/list

Demonstrates a list with separators, pull-to-refresh, and infinite loading, using list-item children.

```blade
<native:list separator on-refresh="refresh" on-end-reached="loadMore">
    @foreach($contacts as $contact)
        <native:list-item
            headline="{{ $contact->name }}"
            supporting="{{ $contact->email }}"
            leadingMonogram="{{ $contact->initials }}"
            trailingIcon="forward"
            @press="openContact({{ $contact->id }})"
        />
    @endforeach
</native:list>
```

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

### Declare plugin secrets in manifest

Source: https://nativephp.com/docs/mobile/4/plugins/advanced-configuration

Define required or optional environment variables with descriptions to guide users during the build process.

```json
{
    "secrets": {
        "MAPBOX_DOWNLOADS_TOKEN": {
            "description": "Mapbox SDK download token from mapbox.com/account/access-tokens",
            "required": true
        },
        "FIREBASE_API_KEY": {
            "description": "Firebase project API key",
            "required": false
        }
    }
}
```

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

### Build an Android App Bundle

Source: https://nativephp.com/docs/mobile/4/publishing/android

Generates a signed AAB file for Play Store distribution using command-line arguments for keystore credentials.

```bash
php artisan native:package android \
  --build-type=bundle \
  --keystore=/path/to/my-app.keystore \
  --keystore-password=mykeystorepassword \
  --key-alias=my-app-key \
  --key-password=mykeypassword
```

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

### Add NativePHP to an existing Laravel app

Source: https://nativephp.com/docs/mobile/4/getting-started/quick-start

Install the package via Composer and initiate the Jump service to connect your mobile device.

```bash
composer require nativephp/mobile

php artisan native:jump
```

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

### Generating a test file

Source: https://nativephp.com/docs/mobile/4/testing/introduction

Command to scaffold a new test file for a specific component.

```bash
php artisan native:make-test Counter
```
Tokens:
Raw