fix: allow closing action sheet when cancelButtonIndex is undefined

README.md

@@ -113,6 +113,8 @@ The interface style used for the action sheet, can be set to `light` or `dark`,
 
 The below props allow modification of the Android ActionSheet. They have no effect on the look on iOS as the native iOS Action Sheet does not have options for modifying these options.
 
+**Regarding Cancelling**: Unlike iOS, Android and Web allow you to render an action sheet _without_ a dedicated cancel button. The action sheet can then be closed by tapping in the background, or using the hardware back button. When the screen is closed in this way, your `buttonIndex` param will be `undefined`. Note that this will not work in iOS and the screen will be "stuck", forcing the user to select one of the options.
+
 
 | Name             | Type                              | Required | Default |
 | -----------------| ----------------------------------| -------- | ------- |

example/App.tsx

@@ -19,7 +19,7 @@ import ShowActionSheetButton from './ShowActionSheetButton';
 type Props = ActionSheetProps;
 
 interface State {
-  selectedIndex: number | null;
+  selectedIndex?: number | null;
   isModalOpen: boolean;
 }
 
@@ -29,7 +29,7 @@ class App extends React.Component<Props, State> {
     isModalOpen: false,
   };
 
-  _updateSelectionText = (selectedIndex: number) => {
+  _updateSelectionText = (selectedIndex?: number) => {
     this.setState({
       selectedIndex,
     });
@@ -38,7 +38,9 @@ class App extends React.Component<Props, State> {
   _renderSelectionText = () => {
     const { selectedIndex } = this.state;
     const text =
-      selectedIndex === null ? 'No Option Selected' : `Option #${selectedIndex + 1} Selected`;
+      selectedIndex === null || selectedIndex === undefined
+        ? 'No Option Selected'
+        : `Option #${selectedIndex + 1} Selected`;
     return <Text style={styles.selectionText}>{text}</Text>;
   };
 
@@ -86,7 +88,7 @@ class App extends React.Component<Props, State> {
         <ShowActionSheetButton
           title="Nested Action Sheets"
           onSelection={(index) => {
-            if (index < 3) {
+            if (index && index < 3) {
               showActionSheetWithOptions(
                 {
                   title: 'Sub Action Sheet',
@@ -99,6 +101,18 @@ class App extends React.Component<Props, State> {
           }}
           showActionSheetWithOptions={showActionSheetWithOptions}
         />
+        <ShowActionSheetButton
+          title="No Cancel Button"
+          onSelection={this._updateSelectionText}
+          showActionSheetWithOptions={() =>
+            showActionSheetWithOptions(
+              {
+                options: ['Option 1', 'Option 2'],
+              },
+              this._updateSelectionText
+            )
+          }
+        />
         {this._renderSectionHeader('Android-Only Options')}
         <ShowActionSheetButton
           title="Icons"

example/ShowActionSheetButton.tsx

@@ -9,9 +9,9 @@ interface Props {
   title: string;
   showActionSheetWithOptions: (
     options: ActionSheetOptions,
-    callback: (buttonIndex: number) => void
+    callback: (buttonIndex?: number) => void
   ) => void;
-  onSelection: (index: number) => void;
+  onSelection: (index?: number) => void;
   withTitle?: boolean;
   withMessage?: boolean;
   withIcons?: boolean;
@@ -116,7 +116,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
         // Android only,
         useModal,
       },
-      (buttonIndex: number) => {
+      (buttonIndex?: number) => {
         // Do something here depending on the button index selected
         onSelection(buttonIndex);
       }

src/ActionSheet/index.tsx

@@ -17,7 +17,7 @@ interface State {
   isVisible: boolean;
   isAnimating: boolean;
   options: ActionSheetOptions | null;
-  onSelect: ((i: number) => void) | null;
+  onSelect: ((i?: number) => void) | null;
   overlayOpacity: any;
   sheetOpacity: any;
 }
@@ -165,7 +165,7 @@ export default class ActionSheet extends React.Component<Props, State> {
     );
   }
 
-  showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i: number) => void) => {
+  showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i?: number) => void) => {
     const { isVisible, overlayOpacity, sheetOpacity } = this.state;
 
     if (isVisible) {
@@ -208,21 +208,12 @@ export default class ActionSheet extends React.Component<Props, State> {
 
   _selectCancelButton = () => {
     const { options } = this.state;
+    const cancelButtonIndex = options === null ? undefined : options.cancelButtonIndex;
 
-    if (!options) {
-      return false;
-    }
-
-    if (typeof options.cancelButtonIndex === 'undefined') {
-      return false;
-    } else if (typeof options.cancelButtonIndex === 'number') {
-      return this._onSelect(options.cancelButtonIndex);
-    } else {
-      return this._animateOut();
-    }
+    return this._onSelect(cancelButtonIndex);
   };
 
-  _onSelect = (index: number): boolean => {
+  _onSelect = (index?: number): boolean => {
     const { isAnimating, onSelect } = this.state;
 
     if (isAnimating) {