skills.rest
alemamdevs
alemamdevsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nativephp-v3-to-v4-upgrade

Migrates NativePHP Mobile v3 Livewire apps to v4 native SuperNative EDGE UI.

Updated Sep 10, 2026
Search Tags:#migration#mobile#laravel#upgrade#livewire#nativephp#edge ui
One-click install
npx skills add https://github.com/alemamdevs/expense-tracker --skill nativephp-v3-to-v4-upgrade-alemamdevs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nativephp-v3-to-v4-upgrade
Source: https://github.com/alemamdevs/expense-tracker/tree/main/.agents/skills/nativephp-v3-to-v4-upgrade
Command: npx skills add https://github.com/alemamdevs/expense-tracker --skill nativephp-v3-to-v4-upgrade-alemamdevs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Upgrading a NativePHP Mobile app from v3 (Livewire/Volt/Flux in a web view) to v4 native EDGE UI involves undocumented package renames, silent rendering failures, font and theme-push timing traps, and layout behaviors that differ from CSS — most of which fail without any error message. ## Core Features & Use Cases - Phased migration plan: Covers composer package moves (nativephp/native-ui → nativephp/mobile-ui), plugin registration, Livewire removal ordering, scaffolding, screen conversion, and cutover. - Silent-failure diagnosis: Documents layout traps verified from renderer source — empty columns painting nothing, anchored absolute children, zero-inset anchoring bugs, and silently dropped Tailwind classes. - Fonts and theme guidance: Explains the native:font command location, font alias registration, and the theme-push timing fix that resolves system-font fallback. - Use Case: A team with a Livewire-based NativePHP v3 mobile app uses this Skill to plan and execute a full cutover to native EDGE screens, porting tests to Native::test() with FakeBridge and avoiding weeks of silent-rendering debugging. ## Quick Start Ask the agent to upgrade my NativePHP mobile app from v3 to v4 native EDGE UI following the phased migration plan.

Frequently Asked Questions about nativephp-v3-to-v4-upgrade

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I upgrade NativePHP mobile from v3 to v4?▼

Follow a phased approach: fix composer packages first (nativephp/native-ui became nativephp/mobile-ui, requiring a vcs repository and an inline dev-main alias), register the plugin with native:plugin:register, then scaffold theme and layouts before converting screens one by one.

Why do my NativePHP v4 native screens render blank or with the system font?▼

Almost every v4 failure is silent. Blank areas usually come from empty native:column elements or unsupported Tailwind classes being dropped, while system-font text means the theme push fired before the bridge was reachable — re-push Theme::pushToNative() after the app boots.

Where is the native:font command in NativePHP v4?▼

The native:font command ships in the nativephp/mobile-ui package, not nativephp/mobile. It downloads Google Fonts into resources/fonts/, which the plugin's build hook bundles into each native project during native:run.

How do I convert Livewire components to NativePHP EDGE screens?▼

Replace wire:model with native:model (live by default), swap validate() for manual Validator calls, convert query strings to navigation data read via $this->data(), and map wire:poll, wire:init, and flux modals to #[Poll], #[Lazy], and native:bottom-sheet equivalents.

Why does absolute positioning not fill the parent in NativePHP EDGE?▼

Absolute children are anchored at their measured size, never stretched like CSS. Use explicit w-full h-full with top-0 left-0, and avoid zero insets on bottom/right since a zero value is treated as no anchor on that edge.

How do I test NativePHP v4 native screens?▼

Port legacy Livewire tests to Native\Mobile\Testing\Native::test() or Native::visit() with FakeBridge and Saloon MockClient. Note the test harness uses createElement, a different code path from the device's streaming collector, so verify props on both.

Related Skills

Explore More Software Engineering Skills→
jonaaixjonaaix
1

volt-development

Create and integrate Volt-powered single-file Livewire components in Laravel.

Community
Intermediate
sulthonuladibsulthonuladib

expo-deployment

Deploy Expo apps to iOS, Android, and web via EAS CLI.

Community
Advanced
jonlucajonluca
3

expo-module

Create and customize native modules and views for Expo apps.

Community
Intermediate
superdejooosuperdejooo
1

livewire-principles

Guide Laravel/Livewire development toward simple, maintainable components and tests.

Community
Intermediate