react-native-platform-components 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-platform-components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Native UI components for React Native, the real platform widgets on both iOS and Android: TextField, DatePicker, ContextMenu, SelectionMenu, SegmentedControl, TabBar, NavigationRail, Button, ButtonGroup, FloatingActionButton, FloatingToolbar and LiquidGlass. UIKit on iOS, Material 3 Expressive on Android. Fabric, TypeScript, Expo config plugin.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/plugin/build/index.cjs

@@ -1,8 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATERIAL3_THEME_PARENT = void 0;
 exports.resolveMaterial3Parent = resolveMaterial3Parent;
 exports.applyMaterial3Theme = applyMaterial3Theme;
+exports.resolveDrawables = resolveDrawables;
+exports.copyDrawables = copyDrawables;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
 const config_plugins_1 = require("@expo/config-plugins");
 exports.MATERIAL3_THEME_PARENT = 'Theme.Material3.DayNight.NoActionBar';
 /**
@@ -42,6 +49,57 @@ function applyMaterial3Theme(xml) {
     xml.resources.style = styles;
     return xml;
 }
+const PLUGIN_NAME = 'react-native-platform-components';
+/** Android resource names: lowercase letters, digits and underscores. */
+const DRAWABLE_NAME = /^[a-z][a-z0-9_]*$/;
+/**
+ * Expands the `drawables` option into the files to copy, checking each name
+ * is a valid Android resource name and appears once.
+ */
+function resolveDrawables(projectRoot, entries) {
+    const files = [];
+    for (const entry of entries) {
+        const source = path_1.default.resolve(projectRoot, entry);
+        if (!fs_1.default.existsSync(source)) {
+            throw new Error(`${PLUGIN_NAME}: drawable not found: ${entry}`);
+        }
+        let sources = [source];
+        if (fs_1.default.statSync(source).isDirectory()) {
+            sources = fs_1.default
+                .readdirSync(source)
+                .filter((file) => file.endsWith('.xml'))
+                .sort()
+                .map((file) => path_1.default.join(source, file));
+            if (sources.length === 0) {
+                throw new Error(`${PLUGIN_NAME}: no .xml drawables in ${entry}`);
+            }
+        }
+        for (const file of sources) {
+            if (path_1.default.extname(file) !== '.xml') {
+                throw new Error(`${PLUGIN_NAME}: ${entry} is not a vector drawable (.xml). ` +
+                    'Use an image icon for PNGs.');
+            }
+            const name = path_1.default.basename(file, '.xml');
+            if (!DRAWABLE_NAME.test(name)) {
+                throw new Error(`${PLUGIN_NAME}: "${name}" is not a valid drawable name. ` +
+                    'Use lowercase letters, digits and underscores, starting with a letter.');
+            }
+            if (files.some((existing) => existing.name === name)) {
+                throw new Error(`${PLUGIN_NAME}: more than one drawable named "${name}"`);
+            }
+            files.push({ name, source: file });
+        }
+    }
+    return files;
+}
+/** Copies the drawables into `<resDir>/drawable`, replacing earlier copies. */
+function copyDrawables(files, resDir) {
+    const drawableDir = path_1.default.join(resDir, 'drawable');
+    fs_1.default.mkdirSync(drawableDir, { recursive: true });
+    for (const file of files) {
+        fs_1.default.copyFileSync(file.source, path_1.default.join(drawableDir, `${file.name}.xml`));
+    }
+}
 /**
  * Expo config plugin for react-native-platform-components.
  *
@@ -53,15 +111,30 @@ function applyMaterial3Theme(xml) {
  * `material: 'system'` modes, but Material 3 widgets look best under a
  * Material 3 app theme. Pass `{ android: { theme: 'material3' } }` to have
  * prebuild re-parent `AppTheme` accordingly.
+ *
+ * It also copies the vector drawables listed in `android.drawables` into the
+ * generated project, since hand-added files there don't survive
+ * `expo prebuild --clean`.
  */
 const withPlatformComponents = (config, options) => {
     const theme = options?.android?.theme ?? 'appcompat';
-    if (theme !== 'material3') {
-        return config;
+    const drawables = options?.android?.drawables ?? [];
+    if (theme === 'material3') {
+        config = (0, config_plugins_1.withAndroidStyles)(config, (styleConfig) => {
+            styleConfig.modResults = applyMaterial3Theme(styleConfig.modResults);
+            return styleConfig;
+        });
+    }
+    if (drawables.length > 0) {
+        config = (0, config_plugins_1.withDangerousMod)(config, [
+            'android',
+            (modConfig) => {
+                const { projectRoot, platformProjectRoot } = modConfig.modRequest;
+                copyDrawables(resolveDrawables(projectRoot, drawables), path_1.default.join(platformProjectRoot, 'app', 'src', 'main', 'res'));
+                return modConfig;
+            },
+        ]);
     }
-    return (0, config_plugins_1.withAndroidStyles)(config, (styleConfig) => {
-        styleConfig.modResults = applyMaterial3Theme(styleConfig.modResults);
-        return styleConfig;
-    });
+    return config;
 };
 exports.default = withPlatformComponents;

package/plugin/build/index.d.ts

@@ -13,6 +13,13 @@ export type AndroidTheme = 'material3' | 'appcompat';
 export type PlatformComponentsPluginOptions = {
     android?: {
         theme?: AndroidTheme;
+        /**
+         * Vector drawables to copy into `res/drawable` at prebuild, so drawable
+         * icon names (`android: 'home'`) resolve in an Expo app. Each entry is a
+         * `.xml` file or a directory of them, relative to the project root. The
+         * drawable name is the file name without `.xml`.
+         */
+        drawables?: string[];
     };
 };
 export declare const MATERIAL3_THEME_PARENT = "Theme.Material3.DayNight.NoActionBar";
@@ -23,6 +30,19 @@ export declare function resolveMaterial3Parent(currentParent: string | undefined
  * Idempotent: running prebuild again leaves the result unchanged.
  */
 export declare function applyMaterial3Theme(xml: ResourceXML): ResourceXML;
+export type DrawableFile = {
+    /** Resource name: the file name without `.xml`. */
+    name: string;
+    /** Absolute path of the source file. */
+    source: string;
+};
+/**
+ * Expands the `drawables` option into the files to copy, checking each name
+ * is a valid Android resource name and appears once.
+ */
+export declare function resolveDrawables(projectRoot: string, entries: string[]): DrawableFile[];
+/** Copies the drawables into `<resDir>/drawable`, replacing earlier copies. */
+export declare function copyDrawables(files: DrawableFile[], resDir: string): void;
 /**
  * Expo config plugin for react-native-platform-components.
  *
@@ -34,6 +54,10 @@ export declare function applyMaterial3Theme(xml: ResourceXML): ResourceXML;
  * `material: 'system'` modes, but Material 3 widgets look best under a
  * Material 3 app theme. Pass `{ android: { theme: 'material3' } }` to have
  * prebuild re-parent `AppTheme` accordingly.
+ *
+ * It also copies the vector drawables listed in `android.drawables` into the
+ * generated project, since hand-added files there don't survive
+ * `expo prebuild --clean`.
  */
 declare const withPlatformComponents: ConfigPlugin<PlatformComponentsPluginOptions | void>;
 export default withPlatformComponents;

package/plugin/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,WAAW,CAAC;AAErD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,YAAY,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,sBAAsB,yCAAyC,CAAC;AAW7E,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,MAAM,CASR;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,GAAG,WAAW,CAejE;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,sBAAsB,EAAE,YAAY,CACxC,+BAA+B,GAAG,IAAI,CAWvC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,WAAW,CAAC;AAErD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,YAAY,CAAC;QACrB;;;;;WAKG;QACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,sBAAsB,yCAAyC,CAAC;AAW7E,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,MAAM,CASR;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,GAAG,WAAW,CAejE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,MAAM,EAAE,GAChB,YAAY,EAAE,CAyChB;AAED,+EAA+E;AAC/E,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAMzE;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,sBAAsB,EAAE,YAAY,CACxC,+BAA+B,GAAG,IAAI,CA2BvC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/plugin/tsconfig.json

@@ -9,7 +9,8 @@
     "declaration": true,
     "declarationMap": true,
     "outDir": "build",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["node"]
   },
   "include": [
     "src/**/*"