Belajar NativePHP - Native Components & Navigation

#Pendahuluan

Setelah di episode 12 kita memahami bagaimana SuperNative mengkonversi Blade ke SwiftUI/Jetpack Compose, pada episode ini kita dalami komponen native spesifik dan sistem navigasi. Native components memberikan UX yang autentik — tab bar yang bergerak halus, list yang di-scroll native, glass effects yang sesuai platform — sementara navigasi native stack memberikan transisi yang tidak bisa ditiru oleh WebView.

#Native Components

#Top Bar

Top bar native mengikuti style platform — iOS menggunakan large title yang collapse saat scroll, Android menggunakan Material Design 3 top app bar:

resources/views/components/native-top-bar.blade.php

<x-native.top-bar
    title="Tasks"
    :large="true"
    :collapsible="true"
    :back-button="$showBack"
>
    <x-slot name="actions">
        <x-native.icon-button icon="plus" wire:click="createTask" />
    </x-slot>
</x-native.top-bar>

Di iOS, ini di-render sebagai NavigationBar dengan large title. Di Android, sebagai TopAppBar dengan mediumTopAppBar style.

#Tab Bar

Tab bar native berada di bagian bawah layar — cara utama navigasi di banyak aplikasi mobile:

Tab bar navigation

<x-native.tab-bar>
    <x-native.tab icon="house" label="Home" route="/" :active="$currentTab === 'home'" />
    <x-native.tab icon="checklist" label="Tasks" route="/tasks" :active="$currentTab === 'tasks'" />
    <x-native.tab icon="gearshape" label="Settings" route="/settings" :active="$currentTab === 'settings'" />
</x-native.tab-bar>

Tab bar native menggunakan rendering asli — animasi switch tab, badge counter, dan haptic feedback saat tab berganti.

#List Native

List adalah komponen paling umum di mobile. SuperNative menyediakan list dengan scrolling native, swipe actions, dan pull-to-refresh:

List native dengan swipe actions

<x-native.list :items="$tasks" swipeable>
    <x-slot name="item" let="$task">
        <x-native.list-item :title="$task->title" :subtitle="$task->description">
            <x-slot name="trailing">
                @if($task->completed)
                    <x-native.badge color="green" label="Done" />
                @endif
            </x-slot>
        </x-native.list-item>
    </x-slot>
 
    <x-slot name="swipe-actions">
        <x-native.swipe-action color="red" icon="trash" action="delete" />
        <x-native.swipe-action color="blue" icon="pencil" action="edit" />
    </x-slot>
</x-native.list>

#Glass Effects dan Transisi

SuperNative mendukung visual effects sesuai platform:

Glass effect dan visual

<x-native.card variant="glass">
    <x-native.text style="headline">Overview</x-native.text>
    <x-native.text style="body">Summary card with glass effect</x-native.text>
</x-native.card>
 
<x-native.sheet :visible="$showSheet" @close="showSheet = false">
    <x-native.text style="title">Detail</x-native.text>
</x-native.sheet>

iOS mendukung UIBlurEffect (glass), Android mendukung Surface dengan elevation dan tonal surface colors.

#Native Route Middleware

Middleware Laravel bisa diterapkan ke route native:

routes/native.php

<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Middleware\Authenticate;
 
Route::middleware([Authenticate::class])->group(function () {
    Route::native('/dashboard', \App\Livewire\Dashboard::class);
    Route::native('/tasks', \App\Livewire\TaskList::class);
    Route::native('/settings', \App\Livewire\Settings::class);
});

Middleware berjalan sebelum route di-resolve — jika user belum login, mereka dialihkan ke halaman login tanpa perlu memuat halaman yang seharusnya terproteksi.

Native stack navigation memungkinkan push/pop transisi seperti aplikasi native asli:

Push dan pop navigation

<?php
 
use Livewire\Component;
 
class TaskList extends Component
{
    public function goToDetail($taskId)
    {
        // Push halaman baru ke stack
        $this->navigate("/tasks/{$taskId}");
    }
}

Di belakang layar, navigate() memanggil UINavigationController.pushViewController() (iOS) atau NavController.navigate() (Android). Transisi slide dari kanan (iOS) atau fade (Android) terjadi secara otomatis sesuai platform.

#Pop (Kembali)

Navigasi kembali

public function goBack()
{
    // Pop halaman saat ini dari stack
    $this->navigateBack();
}

#Replace (Ganti Halaman)

Replace halaman (tanpa back)

public function goToHome()
{
    // Replace stack, tidak bisa kembali
    $this->navigateReplace('/');
}

Tip

Gunakan navigate() untuk push, navigateBack() untuk pop, dan navigateReplace() untuk mengganti seluruh stack (contoh: setelah login, replace stack dengan dashboard agar user tidak bisa kembali ke login screen).

Bangun aplikasi dengan tab bar di bawah dan stack navigation di dalam setiap tab:

resources/views/layouts/app.blade.php

<div class="flex flex-col h-screen">
    <!-- Stack content -->
    <div class="flex-1 overflow-auto">
        {{ $slot }}
    </div>
 
    <!-- Tab bar -->
    <x-native.tab-bar>
        <x-native.tab icon="house" label="Home" route="/" />
        <x-native.tab icon="checklist" label="Tasks" route="/tasks" />
        <x-native.tab icon="gearshape" label="Settings" route="/settings" />
    </x-native.tab-bar>
</div>

Setiap tab memiliki stack navigasi sendiri — user bisa push task detail dari tab Tasks, lalu kembali ke list tanpa kehilangan posisi scroll.

#Penutup

Inti yang harus dibawa pulang:

Native components (top bar, tab bar, list, glass effects) memberikan UX autentik per-platform.
Swipe actions dan pull-to-refresh di list native bekerja dengan gestur asli.
Native route middleware menggunakan Laravel middleware yang sama untuk proteksi route.
Stack navigation: navigate() push, navigateBack() pop, navigateReplace() ganti stack.
Tab bar + stack: setiap tab punya stack navigasi sendiri.

Di episode 14 selanjutnya, kita akan membahas Plugin Architecture & Custom Plugin — bagaimana plugin system NativePHP bekerja, registrasi plugin, permissions deklaratif, serta cara menulis plugin Swift/Kotlin sendiri untuk kebutuhan spesifik. Sampai jumpa di episode 14!