A cross-platform ActionSheet for React Native
Clone or download
peterpme Merge pull request #92 from dozoisch/patch-1
add types to NPM file list
Latest commit 2fc359b Sep 5, 2018


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.


npm install @expo/react-native-action-sheet

A basic ActionSheet Setup

import ActionSheetProvider & connectActionSheet

import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';

wrap your top-level component with <ActionSheetProvider />

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

decorate the component you want to use the action sheet with @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;
  (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


See the example app source