Navigation

Overview#

Native screens form a stack, exactly like a native iOS UINavigationController or an Android Activity stack. From inside a NativeComponent, you push, pop, and replace screens using methods on $this.

Registering routes#

Native routes are registered similarly to Livewire routes, but instead of using Route::livewire() you use the Route::native() macro:

use App\NativeComponents\Home;
use App\NativeComponents\ItemDetail;
 
Route::native('/', Home::class);
Route::native('/item/{id}', ItemDetail::class);

You can put these routes anywhere that makes sense for your application, but you may find that creating a routes/mobile.php to keep them all together is a clean option.

Route parameters work just like Laravel web routes — {id} matches a path segment and is exposed to the screen through $this->param('id').

See Layouts for how to attach shared chrome to a route or group of routes.

Pushing a new screen#

$this->navigate('/item/42');

By default a push slides in from the right. Pass arbitrary data along with the navigation:

$this->navigate('/item/42', ['source' => 'home-feed']);

The next screen reads the data with $this->data('source').

Going back#

$this->back();

Pops the current screen off the stack and returns to whatever was beneath it. The default transition is a slide-out to the right.

Replacing the current screen#

$this->replace('/login');

Pops the current screen and pushes a new one in its place — useful after sign-in / sign-out or for in-place tab swaps. The default transition is a fade.

Exiting to the web view#

$this->exitToWeb('/dashboard');

Tear down the native UI stack and load the given URL in the web view. Use this for screens that aren't part of the native experience.

Custom transitions#

Chain transition() after a navigation method to override the default animation:

use Native\Mobile\Edge\Transition;
 
$this->navigate('/item/42')->transition(Transition::SlideFromBottom);

Available cases:

• Transition::SlideFromRight - default for navigate()
• Transition::SlideFromLeft - default for back()
• Transition::SlideFromBottom - modal-style presentation
• Transition::Fade - default for replace()
• Transition::FadeFromBottom - subtle vertical fade
• Transition::ScaleFromCenter - zoom-in effect
• Transition::None - swap with no animation

Reading params and data#

class ItemDetail extends NativeComponent
{
    public function mount(): void
    {
        $id = $this->param('id');                  // from the route URI
        $source = $this->data('source', 'unknown'); // from navigate()'s second arg
 
        // ...
    }
}

Both accessors take an optional default that's returned when the key is missing.

Resolving named routes#

If you've named your routes you can use route() on the component to resolve them to URIs:

$this->navigate($this->route('listing.show', ['id' => 5]));

This delegates to Laravel's URL generator with absolute: false.

Customizing device-back behavior#

By default, the device back button (Android) pops the navigation stack. Override onBackPressed() to add custom behavior:

class CheckoutForm extends NativeComponent
{
    public bool $dirty = false;
 
    public function onBackPressed(): void
    {
        if ($this->dirty) {
            $this->showDiscardConfirmation();
 
            return;
        }
 
        $this->back();
    }
}

If the back press should ultimately still pop, call $this->back() from your override.