@harvest-profit/action-sheet
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

react-native-action-sheet Slack

ActionSheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a JS implementation on Android. Almost a drop in replacement for ActionSheetIOS except it cannot be called statically.

Installation

npm install @harvest-profit/action-sheet

or

yarn add @harvest-profit/action-sheet

A basic ActionSheet Setup

import ActionSheetProvider & connectActionSheet

import { ActionSheetProvider, connectActionSheet } from '@harvest-profit/action-sheet';

wrap your top-level component with <ActionSheetProvider />

class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
        <App />
      </ActionSheetProvider>
    );
  }
}

decorate the component you want to use the action sheet with @connectActionSheet

@connectActionSheet
class App extends React.Component { /* ... */ }

access actionSheet method as this.props.showActionSheetWithOptions

_onOpenActionSheet = () => {
  // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
  let options = ['Delete', 'Save', 'Cancel'];
  let destructiveButtonIndex = 0;
  let cancelButtonIndex = 2;

  this.props.showActionSheetWithOptions({
    options,
    cancelButtonIndex,
    destructiveButtonIndex,
  },
  (buttonIndex) => {
    // Do something here depending on the button index selected
  });

}

Try it out

Try it in Expo: https://expo.io/@community/react-native-action-sheet-example

Usage

See the example app source

Package Sidebar

Install

npm i @harvest-profit/action-sheet

Weekly Downloads

2

Version

1.1.1

License

MIT

Unpacked Size

16.3 kB

Total Files

10

Last publish

Collaborators

  • csalazarhp
  • nickhorob
  • codster0073
  • jakehumphrey
  • jarydkrish