react-native-unified-action-sheet 0.1.0

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

@@ -0,0 +1,29 @@
+import { type TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+    showActionSheetWithOptions(options: {
+        options: string[];
+        cancelButtonIndex?: number;
+        destructiveButtonIndices?: number[];
+        title?: string;
+        message?: string;
+        tintColor?: string;
+        cancelButtonTintColor?: string;
+        destructiveColor?: string;
+        buttonTextAlignment?: string;
+        disabledButtonIndices?: number[];
+        userInterfaceStyle?: string;
+        presentationStyle?: string;
+        anchorAlignment?: string;
+        anchorRect?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    }): Promise<number>;
+    dismissActionSheet(): void;
+    dismissAllActionSheets(): void;
+}
+declare const _default: Spec;
+export default _default;
+//# sourceMappingURL=NativeUnifiedActionSheet.d.ts.map

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

@@ -0,0 +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,kBAAkB,IAAI,IAAI,CAAC;IAC3B,sBAAsB,IAAI,IAAI,CAAC;CAChC;;AAED,wBAA4E"}

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

@@ -0,0 +1,29 @@
+export interface ActionSheetButtonInterface {
+    label: string;
+    style?: 'cancel' | 'destructive';
+    disabled?: boolean;
+    onPress?: () => void;
+}
+export interface ActionSheetAnchorInterface {
+    measureInWindow: (callback: (x: number, y: number, width: number, height: number) => void) => void;
+}
+export interface ActionSheetCommonOptionsInterface {
+    options: ActionSheetButtonInterface[];
+    title?: string;
+    message?: string;
+    tintColor?: string;
+    cancelButtonTintColor?: string;
+    userInterfaceStyle?: 'light' | 'dark';
+    anchor?: ActionSheetAnchorInterface | {
+        current: ActionSheetAnchorInterface | null;
+    } | null;
+    destructiveColor?: string;
+    presentationStyle?: 'centered' | 'anchored';
+}
+export interface ActionSheetAndroidOptionsInterface {
+    buttonTextAlignment?: 'start' | 'center';
+    anchorAlignment?: 'start' | 'center';
+}
+export interface ActionSheetOptionsInterface extends ActionSheetCommonOptionsInterface, ActionSheetAndroidOptionsInterface {
+}
+//# sourceMappingURL=action-sheet-options.interface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-sheet-options.interface.d.ts","sourceRoot":"","sources":["../../../../src/action-sheet-options.interface.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,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,iCAAiC;IAChD,OAAO,EAAE,0BAA0B,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACtC,MAAM,CAAC,EACH,0BAA0B,GAC1B;QAAE,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAAA;KAAE,GAC9C,IAAI,CAAC;IACT,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAC7C;AAED,MAAM,WAAW,kCAAkC;IACjD,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzC,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

@@ -0,0 +1,6 @@
+import type { ActionSheetOptionsInterface } from './action-sheet-options.interface.js';
+export type { ActionSheetAnchorInterface, ActionSheetButtonInterface, ActionSheetCommonOptionsInterface, ActionSheetAndroidOptionsInterface, ActionSheetOptionsInterface, } from './action-sheet-options.interface.js';
+export declare const showActionSheetWithOptions: (options: ActionSheetOptionsInterface) => Promise<number | undefined>;
+export declare const dismissActionSheet: () => void;
+export declare const dismissAllActionSheets: () => void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,0BAA0B,EAC1B,0BAA0B,EAC1B,iCAAiC,EACjC,kCAAkC,EAClC,2BAA2B,GAC5B,MAAM,qCAAkC,CAAC;AAsF1C,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"}

package/package.json

@@ -0,0 +1,155 @@
+{
+  "name": "react-native-unified-action-sheet",
+  "version": "0.1.0",
+  "description": "Unified action sheet for React Native: a native UIAlertController on iOS, a native AppCompatDialog on Android",
+  "main": "./lib/commonjs/index.js",
+  "sideEffects": false,
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-unified-action-sheet-source": "./src/index.tsx",
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./jest": {
+      "types": "./jest/index.d.ts",
+      "default": "./jest/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "jest",
+    "android",
+    "ios",
+    "*.podspec",
+    "CHANGELOG.md",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-unified-action-sheet-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "test": "jest",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "action-sheet",
+    "actionsheet",
+    "action-sheet-ios",
+    "turbomodule"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/galikvalkin/react-native-unified-action-sheet.git"
+  },
+  "author": "Valentyn Halkin <galikvalkin@gmail.com> (https://github.com/galikvalkin)",
+  "license": "MIT",
+  "engines": {
+    "node": ">= 18"
+  },
+  "bugs": {
+    "url": "https://github.com/galikvalkin/react-native-unified-action-sheet/issues"
+  },
+  "homepage": "https://github.com/galikvalkin/react-native-unified-action-sheet#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^30.4.1",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^30.4.2",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-modal": "^14.0.0-rc.1",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.81.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "UnifiedActionSheetSpec",
+    "type": "modules",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.unifiedactionsheet"
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "turbo-module",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.0"
+  },
+  "module": "./lib/module/index.js"
+}

package/react-native-unified-action-sheet.podspec

@@ -0,0 +1,23 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-unified-action-sheet"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.description  = <<~DESC
+                     One action-sheet API for both platforms, presented natively:
+                     a UIAlertController on iOS and an AppCompatDialog on Android.
+                     DESC
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/galikvalkin/react-native-unified-action-sheet.git", :tag => "v#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  install_modules_dependencies(s)
+end

package/src/NativeUnifiedActionSheet.ts

@@ -0,0 +1,29 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  showActionSheetWithOptions(options: {
+    options: string[];
+    cancelButtonIndex?: number;
+    destructiveButtonIndices?: number[];
+    title?: string;
+    message?: string;
+    tintColor?: string;
+    cancelButtonTintColor?: string;
+    destructiveColor?: string;
+    buttonTextAlignment?: string;
+    disabledButtonIndices?: number[];
+    userInterfaceStyle?: string;
+    presentationStyle?: string;
+    anchorAlignment?: string;
+    anchorRect?: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  }): Promise<number>;
+  dismissActionSheet(): void;
+  dismissAllActionSheets(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('UnifiedActionSheet');

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

@@ -0,0 +1,43 @@
+/// One button. `style` mirrors React Native's own Alert API and the native
+/// button roles, which are mutually exclusive; `disabled` is independent of it.
+export interface ActionSheetButtonInterface {
+  label: string;
+  style?: 'cancel' | 'destructive';
+  disabled?: boolean;
+  /// Runs when this button resolves the sheet, so callers need not match on the
+  /// index. A dismissal that resolves the cancel button counts as pressing it.
+  onPress?: () => void;
+}
+
+/// Anything measurable — every React Native host component ref has this method,
+/// so a `useRef` on a View, Pressable or Touchable satisfies it.
+export interface ActionSheetAnchorInterface {
+  measureInWindow: (
+    callback: (x: number, y: number, width: number, height: number) => void
+  ) => void;
+}
+
+export interface ActionSheetCommonOptionsInterface {
+  options: ActionSheetButtonInterface[];
+  title?: string;
+  message?: string;
+  tintColor?: string;
+  cancelButtonTintColor?: string;
+  userInterfaceStyle?: 'light' | 'dark';
+  anchor?:
+    | ActionSheetAnchorInterface
+    | { current: ActionSheetAnchorInterface | null }
+    | null;
+  destructiveColor?: string;
+  presentationStyle?: 'centered' | 'anchored';
+}
+
+export interface ActionSheetAndroidOptionsInterface {
+  buttonTextAlignment?: 'start' | 'center';
+  anchorAlignment?: 'start' | 'center';
+}
+
+export interface ActionSheetOptionsInterface
+  extends
+    ActionSheetCommonOptionsInterface,
+    ActionSheetAndroidOptionsInterface {}

package/src/index.tsx

@@ -0,0 +1,131 @@
+import { Platform } from 'react-native';
+
+import type { Spec } from './NativeUnifiedActionSheet';
+import type { ActionSheetOptionsInterface } from './action-sheet-options.interface';
+
+export type {
+  ActionSheetAnchorInterface,
+  ActionSheetButtonInterface,
+  ActionSheetCommonOptionsInterface,
+  ActionSheetAndroidOptionsInterface,
+  ActionSheetOptionsInterface,
+} from './action-sheet-options.interface';
+
+const DISMISSED_BY_API = -2;
+
+/// The native wire format is index-based; the public API is not. Nothing below
+/// index.tsx knows buttons are described as objects.
+type WireOptions = Omit<ActionSheetOptionsInterface, 'options' | 'anchor'> & {
+  options: string[];
+  cancelButtonIndex?: number;
+  destructiveButtonIndices?: number[];
+  disabledButtonIndices?: number[];
+  anchorRect?: { x: number; y: number; width: number; height: number };
+};
+
+const nativeModule = (): Spec =>
+  require('./NativeUnifiedActionSheet').default as Spec;
+
+/// Flattens the buttons into the labels and index sets the native side expects.
+/// Only the first button styled 'cancel' counts, since there is one cancel row.
+const toWireOptions = ({
+  options,
+  // Dropped deliberately: the anchor is a ref, and only its measured rect
+  // crosses the bridge. Omit<> would not strip it at runtime.
+  anchor: _anchor,
+  ...rest
+}: ActionSheetOptionsInterface): WireOptions => {
+  const labels: string[] = [];
+  const destructive: number[] = [];
+  const disabled: number[] = [];
+  let cancelButtonIndex: number | undefined;
+
+  options.forEach((button, index) => {
+    labels.push(button.label);
+
+    if (button.style === 'destructive') destructive.push(index);
+    if (button.style === 'cancel' && cancelButtonIndex == null) {
+      cancelButtonIndex = index;
+    }
+    if (button.disabled) disabled.push(index);
+  });
+
+  return {
+    ...rest,
+    options: labels,
+    ...(cancelButtonIndex == null ? {} : { cancelButtonIndex }),
+    ...(destructive.length === 0
+      ? {}
+      : { destructiveButtonIndices: destructive }),
+    ...(disabled.length === 0 ? {} : { disabledButtonIndices: disabled }),
+  };
+};
+
+const showWithNativeModule = (
+  options: WireOptions
+): Promise<number | undefined> =>
+  nativeModule()
+    .showActionSheetWithOptions(options)
+    // A programmatic dismiss resolves with no index rather than a selection.
+    .then((buttonIndex) =>
+      buttonIndex === DISMISSED_BY_API ? undefined : buttonIndex
+    )
+    .catch(() => options.cancelButtonIndex ?? -1);
+
+/// 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.
+const withAnchorRect = (
+  wire: WireOptions,
+  anchor: ActionSheetOptionsInterface['anchor']
+): Promise<WireOptions> => {
+  const target =
+    anchor && 'measureInWindow' in anchor ? anchor : (anchor?.current ?? null);
+
+  if (!target) return Promise.resolve(wire);
+
+  return new Promise((resolve) => {
+    target.measureInWindow((x, y, width, height) => {
+      const measured = typeof x === 'number' && typeof y === 'number';
+
+      resolve(
+        measured ? { ...wire, anchorRect: { x, y, width, height } } : wire
+      );
+    });
+  });
+};
+
+export const showActionSheetWithOptions = (
+  options: ActionSheetOptionsInterface
+): Promise<number | undefined> => {
+  const wire = toWireOptions(options);
+
+  // -1 and undefined index nothing, so optional chaining covers both.
+  const press = (buttonIndex: number | undefined) => {
+    if (buttonIndex != null) options.options[buttonIndex]?.onPress?.();
+
+    return buttonIndex;
+  };
+
+  if (Platform.OS !== 'ios' && Platform.OS !== 'android') {
+    return Promise.resolve(undefined);
+  }
+
+  return withAnchorRect(wire, options.anchor)
+    .then(showWithNativeModule)
+    .then(press);
+};
+
+export const dismissActionSheet = (): void => {
+  if (Platform.OS === 'ios' || Platform.OS === 'android') {
+    nativeModule().dismissActionSheet();
+  }
+};
+
+/// Closes every open sheet, not just the top-most one. Each resolves with no
+/// index, exactly as dismissActionSheet() does.
+export const dismissAllActionSheets = (): void => {
+  if (Platform.OS === 'ios' || Platform.OS === 'android') {
+    nativeModule().dismissAllActionSheets();
+  }
+};