Mobile 2.2.0

resources/views/docs/mobile/2/edge-components/bottom-nav.md

@@ -45,10 +45,10 @@ A bottom navigation bar with up to 5 items. Used for your app's primary navigati
 
 A `<native:bottom-nav>` can contain up to 5 `<native:bottom-nav-item>` elements.
 
-- `id` - Unique identifier
-- `icon` - A named [icon](icons)
-- `label` - Accessibility label (optional)
-- `url` - A URL to navigate to in the web view (optional)
+- `id` - Unique identifier (required)
+- `icon` - A named [icon](icons) (required)
+- `label` - Accessibility label (required)
+- `url` - A URL to navigate to in the web view (required)
 - `active` - Highlight this item as active (optional, default: `false`)
 - `badge` - Badge text/number (optional)
 - `news` - Show "new" indicator dot (optional, default: `false`)

resources/views/docs/mobile/2/edge-components/icons.md

@@ -14,14 +14,15 @@ handles the platform translation automatically.
 
 ## How It Works
 
-The icon system uses a three-tier resolution strategy:
+The icon system uses a four-tier resolution strategy:
 
-1. **Manual Mapping** - Explicit mappings for common icons and aliases (e.g., `home`, `settings`, `user`)
-2. **Smart Fallback** - Attempts to auto-convert unmapped icon names to platform equivalents
-3. **Default Fallback** - Uses a circle icon if no match is found
+1. **Direct Platform Icons** - On iOS, if the name contains a `.` it's used as a direct SF Symbol path (e.g., `car.side.fill`). On Android, any Material Icon ligature name works directly (e.g., `shopping_cart`).
+2. **Manual Mapping** - Explicit mappings for common icons and aliases (e.g., `home`, `settings`, `user`)
+3. **Smart Fallback** - Attempts to auto-convert unmapped icon names to platform equivalents
+4. **Default Fallback** - Uses a circle icon if no match is found
 
-This approach means you can use intuitive icon names and get consistent results across iOS and Android, even when the
-underlying platform icon names differ.
+This approach means you can use intuitive icon names for common cases, leverage direct platform icons for advanced use
+cases, and get consistent results across iOS and Android.
 
 ## Platform Differences
 
@@ -39,15 +40,60 @@ If an icon name isn't manually mapped, the system attempts to find a matching SF
 
 ### Android (Material Icons)
 
-On Android, icons render as Material Icons with automatic support for filled and outlined variants. The filled variant
-is used by default in most components, but components like bottom navigation can switch between filled (selected) and
-outlined (unselected) states.
+On Android, icons render using a lightweight font-based approach that supports the entire Material Icons library. You
+can use any Material Icon by its ligature name directly (e.g., `shopping_cart`, `qr_code_2`).
 
-Manual mappings convert common icon names to their Material Icon equivalents. For example:
+Manual mappings provide convenient aliases for common icon names. For example:
 
-- `home` → `Icons.Filled.Home`
-- `settings` → `Icons.Filled.Settings`
-- `check` → `Icons.Filled.Check`
+- `home` → `home`
+- `settings` → `settings`
+- `check` → `check`
+- `cart` → `shopping_cart`
+
+## Direct Platform Icons
+
+For advanced use cases, you can use platform-specific icon names directly.
+
+### iOS SF Symbols
+
+On iOS, include a `.` in the icon name to use an SF Symbol path directly:
+
+@verbatim
+```blade
+<native:bottom-nav-item icon="car.side.fill" ... />
+<native:bottom-nav-item icon="flashlight.on.fill" ... />
+<native:bottom-nav-item icon="figure.walk" ... />
+```
+@endverbatim
+
+### Android Material Icons
+
+On Android, use any Material Icon ligature name (with underscores):
+
+@verbatim
+```blade
+<native:bottom-nav-item icon="qr_code_2" ... />
+<native:bottom-nav-item icon="flashlight_on" ... />
+<native:bottom-nav-item icon="space_dashboard" ... />
+```
+@endverbatim
+
+## Platform-Specific Icons
+
+When you need different icons on each platform, use the `System` facade:
+
+@verbatim
+```blade
+<native:bottom-nav-item
+    id="flashlight"
+    icon="{{ \Native\Mobile\Facades\System::isIos() ? 'flashlight.on.fill' : 'flashlight_on' }}"
+    label="Flashlight"
+    url="/flashlight"
+/>
+```
+@endverbatim
+
+This is useful when the mapped icon doesn't match your needs or you want to use platform-specific variants.
 
 ## Basic Usage
 
@@ -220,3 +266,23 @@ application across apps. So try to maintain consistent use of icons to help guid
 
 - **Stay consistent** - Use the same icon name throughout your app for the same action
 - **Test on both platforms** - If you use auto-converted icons, verify they appear correctly on iOS and Android
+
+## Finding Icons
+
+### Android Material Icons
+
+Browse the complete Material Icons library at [Google Fonts Icons](https://fonts.google.com/icons). Use the icon name
+exactly as shown (with underscores, e.g., `shopping_cart`, `qr_code_2`).
+
+### iOS SF Symbols
+
+Browse SF Symbols using this [community Figma file](https://www.figma.com/community/file/1549047589273604548). While not
+comprehensive, it's a great starting point for discovering available symbols.
+
+For the complete library, download the [SF Symbols app](https://developer.apple.com/sf-symbols/) for macOS.
+
+<aside>
+
+SF Symbol names use dots (e.g., `house.fill`), while Material Icon names use underscores (e.g., `shopping_cart`).
+
+</aside>

resources/views/docs/mobile/2/edge-components/introduction.md

@@ -74,6 +74,23 @@ They can be defined in any Blade file, but for them to be processed, that Blade
 recommend putting your components in a Blade component that is likely to be rendered on every request, such as your
 main layout, e.g. `layouts/app.blade.php` or one of its child views/components.
 
+## Props Validation
+
+EDGE components enforce required props validation to prevent misconfiguration. If you're missing required props, you'll
+see a clear error message that tells you exactly what's missing and how to fix it.
+
+For example, if you forget the `label` prop on a bottom navigation item:
+
+```
+EDGE Component <native:bottom-nav-item> is missing required properties: 'label'.
+Add these attributes to your component: label="..."
+```
+
+The error message will list all missing required props and show you exactly which attributes you need to add. This
+validation happens at render time, making it easy to catch configuration issues during development.
+
+Each component's documentation page indicates which props are required vs optional.
+
 ## Using Inertia?
 
 Each link in an EDGE component will do a full post back to PHP, which may not be what you want if you are using Inertia. To transform these requests into Inertia `<Link>`, add `router` to your `window` object:

resources/views/docs/mobile/2/edge-components/side-nav.md

@@ -84,10 +84,10 @@ On iOS, gesture support is always enabled for the side nav.
 
 ### `<native:side-nav-item>`
 
-- `id` - Unique identifier
-- `label` - Display text
-- `icon` - A named [icon](icons)
-- `url` - A URL to navigate to in the web view (optional)
+- `id` - Unique identifier (required)
+- `label` - Display text (required)
+- `icon` - A named [icon](icons) (required)
+- `url` - A URL to navigate to in the web view (required)
 - `active` - Highlight this item as active (optional, default: `false`)
 - `badge` - Badge text (optional)
 - `badge-color` - Hex code or named color (optional)
@@ -100,7 +100,7 @@ Any `url` that doesn't match the web view's domain will open in the user's defau
 
 ### `<native:side-nav-group>`
 
-- `heading` - The group's heading
+- `heading` - The group's heading (required)
 - `expanded` - Initially expanded (optional, default: `false`)
 - `icon` - Material icon (optional)
 

resources/views/docs/mobile/2/edge-components/top-bar.md

@@ -35,9 +35,9 @@ A top bar with title and action buttons. This renders at the top of the screen.
 
 ## Props
 
-- `title` - The title text
+- `title` - The title text (required)
 - `show-navigation-icon` - Show back/menu button (optional, default: `true`)
-- `label` - If more than 5 actions, iOS will display an overflow menu and the labels assigned to each item
+- `label` - If more than 5 actions, iOS will display an overflow menu and the labels assigned to each item (optional)
 - `background-color` - Background color. Hex code (optional)
 - `text-color` - Text color. Hex code (optional)
 - `elevation` - Shadow depth 0-24 (optional) [Android]
@@ -48,8 +48,8 @@ A `<native:top-bar>` can contain up to 10 `<native:top-bar-action>` elements. Th
 collapsing to a menu if there are too many.
 
 ### Props
-- `id` - Unique identifier
-- `icon` - A named [icon](icons)
+- `id` - Unique identifier (required)
+- `icon` - A named [icon](icons) (required)
 - `label` - Accessibility label (optional)
 - `url` - A URL to navigate to in the web view (optional)
 

resources/views/docs/mobile/2/getting-started/changelog.md

@@ -3,13 +3,35 @@ title: Changelog
 order: 2
 ---
 
+## v2.2.0
+
+### EDGE Required Props Validation
+EDGE components now validate required props at render time and provide helpful error messages showing exactly which props are missing and how to fix them.
+
+### Direct SF Symbol Support (iOS)
+Use any SF Symbol directly (e.g., `car.side.fill`, `flashlight.on.fill`).
+
+### Font-based Material Icons (Android)
+Reduced Android app size by ~30MB by switching from the `material-icons-extended` library to a lightweight font-based approach. Any Material Icon ligature name now works directly.
+
+@verbatim
+```blade
+@use(Native\Mobile\Facades\System)
+
+<native:bottom-nav-item
+    ...
+    icon="{{ System::isIos() ? 'flashlight.on.fill' : 'flashlight_on' }}"
+/>
+```
+@endverbatim
+
 ## v2.1.1
 
 ### Foreground permissions
-Prevent removal of FOREGROUND_SERVICE and POST_NOTIFICATIONS permissions when they're needed by camera features
+Prevent removal of FOREGROUND_SERVICE and POST_NOTIFICATIONS permissions when they're needed by camera features, even if push notifications are disabled
 
 ### Symlink fix
-Exclude public/storage from build to prevent symlink conflicts
+Run storage:unlink before storage:link to handle stale symlinks, and exclude public/storage from build to prevent symlink conflicts
 
 ### iOS Push Notifications
 Handles push notification APNS flow differently, fires off the native event as soon as the token is received from FCM vs assuming the AppDelegate will ahndle it.