NativePHP for Mobile v2 - Real Native Components - Powered by Blade!

We just unlocked something huge in NativePHP for Mobile v2 — real native iOS and Android components built directly from your Laravel Blade components. This changes everything about how Laravel apps come to life on mobile.

It’s here. And it works.

#How it works

We start with a special base class in PHP — it has an empty array, a few helper methods, and a simple idea: instead of rendering HTML, it builds a structured JSON representation of your Blade component tree.

When Laravel renders the page, each of these “native-aware” Blade components pushes its data into that array. By the end of the request, you’ve got a clean JSON object that describes your layout — not in HTML, but in an abstract, platform-agnostic format.

That JSON gets passed back to the native application code through a request header.

On Android and iOS, we intercept that header, parse the JSON, and dynamically render real native UI elements — instantly.

You’re still using Blade. You’re still writing Laravel. But the result is 100% native.

#What’s working now

We’re not building a complete set of native components (yet). For now, we’re building just a limited set of Blade components that map directly to native UI elements. That means you can’t go and create your own components just yet, but you can start using the pre-configured ones we provide: <native:bottom-nav>, <native:side-nav>, and <native:fab>.

These components already work inside our app shell, which continues using a webview for the main content areas. But now the navigation and some other key UI parts are rendered as true native components — no HTML, no JS frameworks, just a sprinkle of Blade.

#What’s next

We’re starting with bottom navs, side navs, and floating action buttons. We are still working to finalize the API for these items and ensure that a we get a good cross-platform experience first.

We will move on to other components soon and eventually you'll be able to build your entire application using native components—even being able to create your own!

Imagine something like a <native:app> component that houses a <native:webview> amongst other native components... The sky is really the limit here - we will very soon have full actual native apps all built with PHP!

This is the future we’ve been building toward — a world where Laravel developers don’t just write for the web… they build native mobile apps using the same language, framework, and tools they already love.

NativePHP for Mobile v2 is where that starts.

#Access

We are aiming to tag v2 by the end of November, 2025. In the meantime Max license holders can start playing with it right away since they have access to the nativephp/mobile repo on GitHub.

If you've got a Max license, here's how you can try it out today:

Update your composer.json

"repositories": {
    "type": "vcs",
    "url": "[email protected]:NativePHP/mobile.git"
},

"require": {
    "nativephp/mobile": "dev-vika",
}

Then run composer update followed by artisan native:install --force.

If you haven't added yourself to the GitHub repo yet, here's how to do it.

If you don't have a Max license yet, go get one.

Drop in the components

Simply drop some of the new Blade components into your views and start playing around! You can drop them into your main layout file or just on a specific page. As long as one of these components is in the response, it will get rendered in the app.

Floating Action Button (FAB)

<native:fab
    icon="plus"
    size="regular"
    position="end"
    containerColor="#FF5C00"
    contentColor="#FFF"
    :bottomOffset="80"
    :cornerRadius="50"
    :elevation="0"
    :url="route('barks')"
/>

Bottom Navigation Bar

<native:bottom-nav dark="true">
    <native:bottom-nav-item
        :active="request()->routeIs('home')"
        id="home"
        icon="home"
        :url="route('home')"
        label="Home"
    />
</native:bottom-nav>

Slide-out Side Navigation Panel

<native:side-nav dark="true">
    <native:side-nav-group
        heading="NativePHP"
        :expanded="request()->routeIs('home')"
    >
        <native:side-nav-item
            :active="request()->routeIs('home')"
            id="home"
            icon="home"
            :url="route('home')"
            label="Home"
        />
    </native:side-nav-group>
</native:side-nav>

We'll have full docs in place soon.

To stay on top of our releases, sign up for our newsletter.

— Shane