<<<<<<< HEAD

Laravel Mobile UI

A PHP-first mobile UI component library for Android WebView. Build reactive mobile interfaces with Laravel, Livewire 4, and Alpine.js.

Features

✨ PHP-First Development - Write mobile UI entirely in PHP
⚡ Live Reactivity - Powered by Livewire 4 and Alpine.js
📱 Android WebView - Optimized for NativePHP and Android integration
🎨 Comprehensive Components - 20+ ready-to-use UI components
🔔 Push Notifications - Firebase FCM integration for Android
📐 Layout System - Flexible flex, grid, and stack layouts
⌨️ Form Components - Input, select, toggle, file upload with validation
🎯 Deep Linking - Navigate between app screens via notifications

Requirements

• PHP 8.2+
• Laravel 12+
• Livewire 4+
• Android API 21+

Installation

Via Composer

composer require nativemobile/laravel-mobile-ui

Publish Assets

php artisan vendor:publish --tag=mobile-ui-assets
php artisan vendor:publish --tag=mobile-ui-config

Install Command

php artisan mobile-ui:install

Quick Start

1. Create a Mobile Page

php artisan mobile-ui:page home

2. Build Your UI

<?php

use Livewire\Component;
use NativeMobile\LaravelMobileUI\MobileApp;
use NativeMobile\LaravelMobileUI\Components\{
    AppBar, NavigationDrawer, BottomNavigation,
    StackLayout, Button, TextView
};

class HomePage extends Component
{
    public function render(): string
    {
        return MobileApp::make()
            ->appBar(
                AppBar::make()
                    ->title('Home')
                    ->withDrawer()
            )
            ->drawer(
                NavigationDrawer::make()
                    ->header('My App')
            )
            ->content(
                StackLayout::make()
                    ->vertical()
                    ->gap(16)
                    ->children([
                        TextView::make('Welcome!')
                            ->fontSize(24)
                            ->fontWeight(600),
                        Button::make('Click Me')
                            ->primary()
                            ->onClick('handleClick'),
                    ])
            )
            ->render();
    }

    public function handleClick(): void
    {
        // Handle button click
    }
}

Components

Layout Components

Form Components

UI Components

Reactivity

Use Livewire attributes for reactivity:

class SearchPage extends Component
{
    public string $query = '';
    public array $results = [];

    #[Computed]
    public function filteredResults()
    {
        return Post::where('title', 'like', "%{$this->query}%")->get();
    }

    public function updateQuery(string $query): void
    {
        $this->query = $query;
    }
}

In your view:

TextInput::make('Search')
    ->wire:model('query')
    ->wire:debounce('500ms')

Push Notifications

Send Firebase Cloud Messaging (FCM) notifications:

use NativeMobile\LaravelMobileUI\Services\PushNotification;

PushNotification::send(
    $user,
    title: 'Hello',
    body: 'You have a new message',
    url: '/messages'
);

See PUSH_NOTIFICATIONS.md for complete documentation.

Events

Components dispatch Alpine.js events for custom handlers:

Push Notifications

// Token received from Android
window.addEventListener('push-token-received', (event) => {
    console.log('FCM Token:', event.detail);
});

// User tapped notification
window.addEventListener('push-notification-tapped', (event) => {
    const { url } = JSON.parse(event.detail);
    window.location = url;
});

Styling

All components use Tailwind CSS utilities. Customize via config/mobile-ui.php:

'primary_color' => env('MOBILE_UI_COLOR', '#6200EE'),
'app_name' => env('APP_NAME', 'My App'),
'alpine_cdn' => 'https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js',

Android Integration

Built-in Android WebView bridge with:

• Device info access
• Haptic feedback
• Toast notifications
• Push notification handling
• Deep linking

Register the bridge in your MainActivity.java:

PhpMobileBridge bridge = new PhpMobileBridge(this, webView);
webView.addJavascriptInterface(bridge, "AndroidBridge");

PushNotificationBridge pushBridge = new PushNotificationBridge(this, webView);
webView.addJavascriptInterface(pushBridge, "PushBridge");

Testing

Run the test suite:

php artisan test

Or with Pest:

php artisan test --compact

Troubleshooting

Components Not Loading

Clear caches:

php artisan config:clear
php artisan cache:clear
php artisan route:clear

Regenerate autoloader:

composer dump-autoload

Styles Not Applying

Publish assets:

php artisan vendor:publish --tag=mobile-ui-assets --force

Rebuild frontend:

npm run build

Livewire Not Responding

Ensure Livewire trait is included in component:

use Livewire\Component;
use NativeMobile\LaravelMobileUI\Traits\WithPushNotifications;

class MyComponent extends Component
{
    use WithPushNotifications;
}

Documentation

• Complete Component Guide
• API Reference
• Push Notifications
• Android Integration

Community

• GitHub Issues: paravecdesign/phpnativemobile
• Repository: github.com/paravecdesign/phpnativemobile

License

This package is open-sourced software licensed under the MIT license.

Credits

Built with ❤️ by NativeMobile

GitHub Repository • Report Issues • Laravel • Livewire