@ng-native/schematics 0.1.1 → 0.1.3

package/files/AGENTS.md

@@ -8,7 +8,7 @@ The whole documentation, for reading before a change: https://ng-native.com/llms
 outline with a line per page: https://ng-native.com/llms.txt.
 
 Angular's own rules apply as well: https://angular.dev/assets/context/best-practices.md. Its
-browser-only parts do not: there is no `NgOptimizedImage` (use `<image>`), and no AXE or ARIA
+browser-only parts do not: there is no `NgOptimizedImage` (use `<image>`), and no AXE
 (accessibility is the props below). Where the two disagree, this file wins.
 
 ## Commands
@@ -41,7 +41,9 @@ change; both are fast.
 - **No backticks inside an inline template**, even in an HTML comment: they end the template string
   and the build fails with a misleading parse error.
 - **Accessibility is props:** `accessibilityRole="button"`, `accessibilityLabel`,
-  `[accessibilityState]`. Screen readers and the testing library's `getByRole` both read them.
+  `[accessibilityState]`. The web spellings work too, as aliases: `role`, and the `aria-*` names
+  React Native maps (`aria-label`, `aria-checked`, `aria-hidden` and so on). Screen readers and
+  the testing library's `getByRole` both read them.
 
 ## Styling
 

package/files/src/app/app.ts

@@ -1,24 +1,26 @@
 import { Component, signal } from '@angular/core';
-import { Pressable, SafeAreaView, Text, View } from '@ng-native/components';
+import { Pressable, SafeAreaProvider, SafeAreaView, Text, View } from '@ng-native/components';
 
 /**
  * Element names are lowercase, and that is load-bearing rather than style: an uppercase name is
  * read as an unknown Angular component and commits as a plain view with nothing in it.
  */
 @Component({
-  imports: [Pressable, SafeAreaView, Text, View],
+  imports: [Pressable, SafeAreaProvider, SafeAreaView, Text, View],
   selector: 'app-root',
   template: `
-    <safe-area-view class="screen">
-      <view class="body">
-        <text class="title">Angular, natively</text>
-        <text class="hint">Real native views. React is never in the render path.</text>
+    <safe-area-provider>
+      <safe-area-view class="screen">
+        <view class="body">
+          <text class="title">Angular, natively</text>
+          <text class="hint">Real native views. React is never in the render path.</text>
 
-        <pressable accessibilityRole="button" class="button" (press)="count.set(count() + 1)">
-          <text class="label">Tapped {{ count() }} times</text>
-        </pressable>
-      </view>
-    </safe-area-view>
+          <pressable accessibilityRole="button" class="button" (press)="count.set(count() + 1)">
+            <text class="label">Tapped {{ count() }} times</text>
+          </pressable>
+        </view>
+      </safe-area-view>
+    </safe-area-provider>
   `,
   styles: `
     :host {

package/native-app.cjs

@@ -28,8 +28,9 @@ const dependencies = {
   ...Object.fromEntries(FRAMEWORK.map((name) => [name, version])),
   '@angular/common': '^22.0.0',
   '@angular/core': '^22.0.0',
-  expo: '~57.0.20',
+  expo: '~57.0.26',
   'expo-status-bar': '~57.0.1',
+  'expo-system-ui': '~57.0.4',
   react: '19.2.3',
   'react-native': '0.86.3',
   'react-native-safe-area-context': '~5.7.0',
@@ -101,6 +102,7 @@ function appJson(name) {
     scheme: name.replace(/[^a-z0-9]/gi, '').toLowerCase(),
     // The template's: Expo otherwise guesses a router root from src/app and says so on every start.
     extra: { router: { root: 'src/app' } },
+    plugins: ['@ng-native/metro'],
   };
   return JSON.stringify({ expo }, null, 2) + '\n';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/schematics",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "ng add and ng generate for Angular Native: an Expo app in an Angular CLI workspace, with builders that run it.",
   "keywords": [
     "angular",