React Native Platform Bottom Sheet

A cross-platform bottom sheet component for React Native that provides a native Material Design bottom sheet on Android and uses the native ActionSheet on iOS.

| Android Demo | iOS Demo | | -------------------------------- | ------------------------ | | | |

Features

• 🎯 Consistent API across platforms
• 📱 Native Material Design bottom sheet on Android
• 🍎 Native ActionSheet on iOS
• 💪 Written in TypeScript
• ⚡ Lightweight with zero dependencies
• 🎨 Customizable styling options
• 🌙 Dark mode support (iOS)

Installation

# Using npm
npm install @miinos/rnactionsheet

# Using yarn
yarn add @miinos/rnactionsheet

Usage

import RNActionSheet from '@miinos/rnactionsheet';

// Basic usage
const handlePress = () => {
  const selectedIndex = RNActionSheet.showActionSheetWithOptions(
    {
      options: ['Take Photo', 'Choose from Library', 'Cancel'],
      cancelButtonIndex: 2,
      title: 'Select Photo',
      message: 'Choose a method to add your photo',
    },
    (index) => {
      switch (selectedIndex) {
        case 0:
          // Handle take photo
          break;
        case 1:
          // Handle choose from library
          break;
      }
    }
  );
};

// With destructive option
const handleDelete = () => {
  const selectedIndex = RNActionSheet.showActionSheetWithOptions(
    {
      options: ['Delete', 'Cancel'],
      cancelButtonIndex: 1,
      destructiveButtonIndex: 0,
      title: 'Delete Item',
      message: 'Are you sure you want to delete this item?',
    },
    (index) => {
      if (selectedIndex === 0) {
        // Handle delete
      }
    }
  );
};

API Reference

showActionSheetWithOptions(options, callback)

Returns a Promise that resolves with the selected index.

Options

| Property | Type | Description | Platform | | ---------------------- | -------- | ------------------------------------------ | -------- | | options | string[] | Array of option titles | Both | | cancelButtonIndex | number | Index of cancel button | Both | | destructiveButtonIndex | number | Index of destructive button (shown in red) | Both | | title | string | Title text shown above options | Both | | message | string | Message text shown below title | Both | | tintColor | string | Tint color for buttons (iOS only) | iOS | | dark | boolean | Enable dark mode (iOS only) | iOS |

Examples

Share Menu

const shareOptions = {
  options: [
    'Share via Email',
    'Share on Twitter',
    'Share on Facebook',
    'Copy Link',
    'Cancel',
  ],
  cancelButtonIndex: 4,
  title: 'Share',
  message: 'Choose how you want to share this content',
};

RNActionSheet.showActionSheetWithOptions(shareOptions, (index) => {
  console.log(index);
});

Platform Differences

| Feature | Android | iOS | | ------------------------- | ------------------------------------- | ------------------------------ | | Animation | Material Design bottom sheet slide-up | Native ActionSheet slide-up | | Styling | Material Design guidelines | Native iOS appearance | | Dark Mode | System default | Configurable via dark option | | Dismiss on backdrop press | Yes | N/A |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Troubleshooting

Author

Amine SOUAIAIA

• Twitter: @SoMiinO
• GitHub: @miinos
• LinkedIn : @AmineSOUAIAIA

Made with create-react-native-library