feat(ios-stickers): custom id for sticker project (#150)

apps/ios-stickers/app.json

@@ -7,6 +7,7 @@
         "@config-plugins/ios-stickers",
         {
           "name": "Stickers",
+          "stickerBundleId": "dev.bacon.iosstickers.stickers",
           "icon": "./assets/imessage-icon.png",
           "columns": 4,
           "stickers": [

apps/ios-stickers/package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@config-plugins/ios-stickers": "*",
-    "expo": "~47.0.3",
-    "expo-splash-screen": "~0.17.4",
+    "expo": "~47.0.8",
+    "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",

package.json

@@ -22,7 +22,7 @@
     "@expo/package-manager": "^0.0.43",
     "@types/js-yaml": "^4.0.5",
     "@types/prompts": "^2.0.13",
-    "eslint": "^7.25.0",
+    "eslint": "^8.10.0",
     "expo-yarn-workspaces": "^2.0.2",
     "js-yaml": "^4.1.0",
     "lerna": "3.4.1",

packages/ios-stickers/README.md

@@ -20,6 +20,7 @@ In your app.json `plugins` array:
   {
     "name": "Stickers!",
     "icon": "./assets/imessage-icon.png",
+    "stickerBundleId": "dev.bacon.iosstickers.stickers",
     "columns": 4,
     "stickers": [
       "./assets/stickers/annoyed.png",
@@ -39,6 +40,7 @@ In your app.json `plugins` array:
 ```
 
 - `name`: defaults to the iOS app name
+- `stickerBundleId`: custom bundle identifier for the stickers project, if not provided, it will defaults to `${ios.bundleIdentifier}.${name}-Stickers` given your expo config values.
 - `icon`: defaults to the iOS app icon
 - `columns`: number of stickers to render, defaults to `3`. Can be one of `2`, `3`, `4`.
 - `stickers`: local file paths or remote URLs, or `{ image: "...", name: "...", accessibilityLabel: "..." }`. Order is preserved.

packages/ios-stickers/src/__tests__/withStickerPack-test.ts

@@ -6,6 +6,7 @@ describe(withStickerPack, () => {
     expect(() =>
       withStickerPack(exp, {
         name: "test",
+        stickerBundleId: "test",
         stickers: [{ image: "test.png" }],
         columns: 2,
         icon: "test.png",

packages/ios-stickers/src/options.json

@@ -25,6 +25,9 @@
                 "name": {
                     "type": "string"
                 },
+                "stickerBundleId": {
+                    "type": "string"
+                },
                 "columns": {
                     "type": "number",
                     "enum": [

packages/ios-stickers/src/withStickerAssets.ts

@@ -221,5 +221,6 @@ export type Props = {
   stickers?: (string | Sticker)[];
   icon?: string;
   name?: string;
+  stickerBundleId?: string;
   columns?: 2 | 3 | 4;
 };

packages/ios-stickers/src/withStickerPack.ts

@@ -36,7 +36,7 @@ const withStickerPack: ConfigPlugin<Props> = (config, options = {}) => {
   // Perform option validation.
   validate(schema as any, options);
 
-  const { stickers, icon, name, columns = 3 } = options;
+  const { stickers, icon, name, stickerBundleId, columns = 3 } = options;
 
   const size = sizeColumnMap[columns] || "regular";
   if (!size) {
@@ -50,7 +50,7 @@ const withStickerPack: ConfigPlugin<Props> = (config, options = {}) => {
 
   config = withStickersPlist(config, { name });
   config = withStickerAssets(config, { stickers: _stickers, icon, size });
-  config = withStickerXcodeTarget(config);
+  config = withStickerXcodeTarget(config, { stickerBundleId });
   return config;
 };
 

packages/ios-stickers/src/withStickerXcodeTarget.ts

@@ -1,5 +1,6 @@
 import { ConfigPlugin, withXcodeProject } from "@expo/config-plugins";
 
+import { Props } from "./withStickerAssets";
 import {
   addStickerResourceFile,
   addStickersTarget,
@@ -12,7 +13,9 @@ export function getProjectStickersName(name: string) {
   return `${name} Stickers`;
 }
 
-export const withStickerXcodeTarget: ConfigPlugin = (config) => {
+export const withStickerXcodeTarget: ConfigPlugin<
+  Pick<Props, "stickerBundleId">
+> = (config, { stickerBundleId }) => {
   return withXcodeProject(config, (config) => {
     const stickerPackName = getProjectStickersName(
       config.modRequest.projectName!
@@ -22,7 +25,8 @@ export const withStickerXcodeTarget: ConfigPlugin = (config) => {
       config.modResults,
       stickerPackName,
       config.ios!.bundleIdentifier!,
-      stickerPackName
+      stickerPackName,
+      stickerBundleId
     );
 
     const stickersKey = addStickerResourceFile(

packages/ios-stickers/src/xcodeSticker.ts

@@ -88,7 +88,8 @@ export function addStickersTarget(
   proj: XcodeProject,
   name: string,
   bundleId: string,
-  subfolder: string
+  subfolder: string,
+  stickerBundleId?: string
 ) {
   // Setup uuid and name of new target
   const targetUuid = proj.generateUuid();
@@ -111,7 +112,10 @@ export function addStickersTarget(
     throw new Error("Target type invalid: " + targetType);
   }
 
-  const PRODUCT_BUNDLE_IDENTIFIER = `"${bundleId}.${bundleName}"`;
+  // Either use the given bundleId for the stickers or
+  // generate one from the app bundleId and stickers project folder
+  const PRODUCT_BUNDLE_IDENTIFIER =
+    stickerBundleId ?? `"${bundleId}.${bundleName}"`;
   const INFOPLIST_FILE = `"${subfolder}/Info.plist"`;
 
   const commonBuildSettings = {