react-native-unified-action-sheet 0.2.0 → 0.3.0

package/lib/typescript/module/src/NativeUnifiedActionSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeUnifiedActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/NativeUnifiedActionSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAErE,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,0BAA0B,CAAC,OAAO,EAAE;QAClC,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;QACpC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;QACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,UAAU,CAAC,EAAE;YACX,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,qBAAqB,CAAC,OAAO,EAAE;QAC7B,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;QACpC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;QACjC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,GAAG,OAAO,CAAC;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,kBAAkB,IAAI,IAAI,CAAC;IAC3B,sBAAsB,IAAI,IAAI,CAAC;CAChC;;AAED,wBAA4E"}
+{"version":3,"file":"NativeUnifiedActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/NativeUnifiedActionSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAErE,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,YAAY,IAAI;QAGd,iBAAiB,EAAE,OAAO,CAAC;KAC5B,CAAC;IACF,0BAA0B,CAAC,OAAO,EAAE;QAClC,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;QACpC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;QACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,UAAU,CAAC,EAAE;YACX,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,qBAAqB,CAAC,OAAO,EAAE;QAC7B,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAC;QACpC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;QACjC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,GAAG,OAAO,CAAC;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,kBAAkB,IAAI,IAAI,CAAC;IAC3B,sBAAsB,IAAI,IAAI,CAAC;CAChC;;AAED,wBAA4E"}

package/lib/typescript/module/src/action-sheet-options.interface.d.ts

@@ -10,7 +10,7 @@ export interface ActionSheetCommonOptionsInterface extends BaseOptionsInterface
     anchor?: ActionSheetAnchorInterface | {
         current: ActionSheetAnchorInterface | null;
     } | null;
-    presentationStyle?: 'centered' | 'anchored';
+    presentationStyle?: 'centered' | 'anchored' | 'bottom';
 }
 export interface ActionSheetAndroidOptionsInterface extends BaseAndroidOptionsInterface {
     anchorAlignment?: 'start' | 'center';

package/lib/typescript/module/src/action-sheet-options.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-sheet-options.interface.d.ts","sourceRoot":"","sources":["../../../../src/action-sheet-options.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,2BAA2B,EAC3B,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,+BAA4B,CAAC;AAEpC,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB;IACrE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,EAAE,CACf,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,KACpE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,iCAAkC,SAAQ,oBAAoB;IAC7E,OAAO,EAAE,0BAA0B,EAAE,CAAC;IACtC,MAAM,CAAC,EACH,0BAA0B,GAC1B;QAAE,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAAA;KAAE,GAC9C,IAAI,CAAC;IACT,iBAAiB,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAC7C;AAED,MAAM,WAAW,kCAAmC,SAAQ,2BAA2B;IACrF,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACtC;AAED,MAAM,WAAW,2BACf,SACE,iCAAiC,EACjC,kCAAkC;CAAG"}
+{"version":3,"file":"action-sheet-options.interface.d.ts","sourceRoot":"","sources":["../../../../src/action-sheet-options.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,2BAA2B,EAC3B,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,+BAA4B,CAAC;AAEpC,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB;IACrE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,EAAE,CACf,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,KACpE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,iCAAkC,SAAQ,oBAAoB;IAC7E,OAAO,EAAE,0BAA0B,EAAE,CAAC;IACtC,MAAM,CAAC,EACH,0BAA0B,GAC1B;QAAE,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAAA;KAAE,GAC9C,IAAI,CAAC;IACT,iBAAiB,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;CACxD;AAED,MAAM,WAAW,kCAAmC,SAAQ,2BAA2B;IACrF,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACtC;AAED,MAAM,WAAW,2BACf,SACE,iCAAiC,EACjC,kCAAkC;CAAG"}

package/lib/typescript/module/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qCAAkC,CAAC;AAEpF,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,+BAA4B,CAAC;AAEpC,YAAY,EACV,qBAAqB,EACrB,4BAA4B,EAC5B,6BAA6B,EAC7B,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,+BAA4B,CAAC;AAEpC,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,+BAA4B,CAAC;AAEpC,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,iCAAiC,EACjC,kCAAkC,EAClC,2BAA2B,GAC5B,MAAM,qCAAkC,CAAC;AAmG1C,eAAO,MAAM,0BAA0B,GACrC,SAAS,2BAA2B,KACnC,OAAO,CAAC,MAAM,GAAG,SAAS,CAiB5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,IAIrC,CAAC;AAIF,eAAO,MAAM,sBAAsB,QAAO,IAIzC,CAAC;AAMF,eAAO,MAAM,qBAAqB,GAChC,SAAS,sBAAsB,KAC9B,OAAO,CAAC,qBAAqB,GAAG,SAAS,CAsB3C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qCAAkC,CAAC;AAEpF,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,+BAA4B,CAAC;AAEpC,YAAY,EACV,qBAAqB,EACrB,4BAA4B,EAC5B,6BAA6B,EAC7B,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,+BAA4B,CAAC;AAEpC,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,+BAA4B,CAAC;AAEpC,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,iCAAiC,EACjC,kCAAkC,EAClC,2BAA2B,GAC5B,MAAM,qCAAkC,CAAC;AA8H1C,eAAO,MAAM,0BAA0B,GACrC,SAAS,2BAA2B,KACnC,OAAO,CAAC,MAAM,GAAG,SAAS,CAsB5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,IAIrC,CAAC;AAIF,eAAO,MAAM,sBAAsB,QAAO,IAIzC,CAAC;AAMF,eAAO,MAAM,qBAAqB,GAChC,SAAS,sBAAsB,KAC9B,OAAO,CAAC,qBAAqB,GAAG,SAAS,CAsB3C,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-unified-action-sheet",
-  "version": "0.2.0",
-  "description": "Unified action sheet for React Native: a native UIAlertController on iOS, a native AppCompatDialog on Android",
+  "version": "0.3.0",
+  "description": "Unified native action sheet for React Native, one API on iOS and Android",
   "main": "./lib/commonjs/index.js",
   "sideEffects": false,
   "types": "./lib/typescript/commonjs/src/index.d.ts",
@@ -18,6 +18,7 @@
       }
     },
     "./package.json": "./package.json",
+    "./app.plugin.js": "./app.plugin.js",
     "./jest": {
       "types": "./jest/index.d.ts",
       "default": "./jest/index.js"
@@ -27,6 +28,8 @@
     "src",
     "lib",
     "jest",
+    "plugin",
+    "app.plugin.js",
     "android",
     "ios",
     "*.podspec",
@@ -56,6 +59,7 @@
     "action-sheet",
     "actionsheet",
     "action-sheet-ios",
+    "bottom-sheet",
     "turbomodule"
   ],
   "repository": {
@@ -97,9 +101,15 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
+    "@expo/config-plugins": "*",
     "react": "*",
     "react-native": ">=0.81.0"
   },
+  "peerDependenciesMeta": {
+    "@expo/config-plugins": {
+      "optional": true
+    }
+  },
   "workspaces": [
     "example"
   ],

package/plugin/withUnifiedActionSheet.js

@@ -0,0 +1,58 @@
+/**
+ * Expo config plugin. Writes the gradle properties that opt the Android build
+ * into Material, which presentationStyle 'bottom' needs:
+ *
+ *   plugins: [['react-native-unified-action-sheet', { material: true }]]
+ *
+ * Options:
+ *   material         enable the Material bottom sheet (default false)
+ *   materialVersion  override the Material version the library pins
+ */
+const MATERIAL_KEY = 'unifiedActionSheet.material';
+const MATERIAL_VERSION_KEY = 'unifiedActionSheet.materialVersion';
+
+/// Pure, so it can be tested without Expo. Drops any previous value of both
+/// keys before adding the current ones: prebuild runs repeatedly, and turning
+/// the option off must remove what an earlier run wrote.
+const applyMaterialProperties = (properties, options = {}) => {
+  const next = properties.filter(
+    (item) =>
+      !(
+        item.type === 'property' &&
+        (item.key === MATERIAL_KEY || item.key === MATERIAL_VERSION_KEY)
+      )
+  );
+
+  if (options.material) {
+    next.push({ type: 'property', key: MATERIAL_KEY, value: 'true' });
+
+    if (options.materialVersion) {
+      next.push({
+        type: 'property',
+        key: MATERIAL_VERSION_KEY,
+        value: String(options.materialVersion),
+      });
+    }
+  }
+
+  return next;
+};
+
+const withUnifiedActionSheet = (config, options = {}) => {
+  // Required here rather than at the top: @expo/config-plugins is an optional
+  // peer, present in every Expo project and absent from bare ones, which never
+  // load this file.
+  const { withGradleProperties } = require('@expo/config-plugins');
+
+  return withGradleProperties(config, (modConfig) => {
+    modConfig.modResults = applyMaterialProperties(
+      modConfig.modResults,
+      options
+    );
+
+    return modConfig;
+  });
+};
+
+module.exports = withUnifiedActionSheet;
+module.exports.applyMaterialProperties = applyMaterialProperties;

package/src/NativeUnifiedActionSheet.ts

@@ -1,6 +1,11 @@
 import { TurboModuleRegistry, type TurboModule } from 'react-native';
 
 export interface Spec extends TurboModule {
+  getConstants(): {
+    /// Android: whether the app opted into Material (presentationStyle
+    /// 'bottom'). Always false on iOS, which needs no opt-in.
+    isMaterialEnabled: boolean;
+  };
   showActionSheetWithOptions(options: {
     options: string[];
     cancelButtonIndex?: number;

package/src/action-sheet-options.interface.ts

@@ -20,7 +20,7 @@ export interface ActionSheetCommonOptionsInterface extends BaseOptionsInterface
     | ActionSheetAnchorInterface
     | { current: ActionSheetAnchorInterface | null }
     | null;
-  presentationStyle?: 'centered' | 'anchored';
+  presentationStyle?: 'centered' | 'anchored' | 'bottom';
 }
 
 export interface ActionSheetAndroidOptionsInterface extends BaseAndroidOptionsInterface {

package/src/index.tsx

@@ -104,6 +104,33 @@ const showWithNativeModule = (
     )
     .catch(() => options.cancelButtonIndex ?? -1);
 
+let warnedMaterialDisabled = false;
+
+/// 'bottom' needs Material on Android, which the app opts into at build time.
+/// Without it the sheet falls back to a centered dialog; say so once, in
+/// development, since the fallback alone looks like the option was ignored.
+const warnIfBottomUnavailable = (
+  presentationStyle: ActionSheetOptionsInterface['presentationStyle']
+) => {
+  if (
+    !__DEV__ ||
+    warnedMaterialDisabled ||
+    Platform.OS !== 'android' ||
+    presentationStyle !== 'bottom' ||
+    nativeModule().getConstants().isMaterialEnabled
+  ) {
+    return;
+  }
+
+  warnedMaterialDisabled = true;
+  console.warn(
+    "react-native-unified-action-sheet: presentationStyle 'bottom' needs Material on Android, " +
+      'so this sheet falls back to a centered dialog. Set unifiedActionSheet.material=true in ' +
+      "android/gradle.properties, or add ['react-native-unified-action-sheet', { material: true }] " +
+      'to your Expo plugins, then rebuild the app.'
+  );
+};
+
 /// The anchor is measured in JS and sent across as a rect, so neither native
 /// module has to resolve a view: a ref's own measureInWindow is the supported
 /// way to do this on both architectures, unlike a react tag.
@@ -143,9 +170,14 @@ export const showActionSheetWithOptions = (
     return Promise.resolve(undefined);
   }
 
-  return withAnchorRect(wire, options.anchor)
-    .then(showWithNativeModule)
-    .then(press);
+  warnIfBottomUnavailable(options.presentationStyle);
+
+  // A bottom sheet has no anchor, so don't measure one: on iPad a rect would
+  // turn the sheet into an arrowed popover pointing at it.
+  const anchor =
+    options.presentationStyle === 'bottom' ? undefined : options.anchor;
+
+  return withAnchorRect(wire, anchor).then(showWithNativeModule).then(press);
 };
 
 export const dismissActionSheet = (): void => {