From a63bab7aef583ec3f8c7a2cb9732f401045daea3 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Mon, 27 Apr 2020 01:22:38 +0100
Subject: [PATCH 1/7] Wrap ActionSheet with a Modal

---
 src/ActionSheet/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/ActionSheet/index.tsx b/src/ActionSheet/index.tsx
index d830133..ab5bd63 100644
--- a/src/ActionSheet/index.tsx
+++ b/src/ActionSheet/index.tsx
@@ -3,6 +3,7 @@ import {
   Animated,
   BackHandler,
   Easing,
+  Modal,
   StyleSheet,
   TouchableWithoutFeedback,
   View,
@@ -71,8 +72,13 @@ export default class ActionSheet extends React.Component<Props, State> {
           flex: 1,
         }}>
         {React.Children.only(this.props.children)}
-        {overlay}
-        {isVisible ? this._renderSheet() : null}
+
+        {isVisible && (
+          <Modal animationType="none" transparent={true} onRequestClose={this._selectCancelButton}>
+            {overlay}
+            {isVisible ? this._renderSheet() : null}
+          </Modal>
+        )}
       </View>
     );
   }
@@ -143,7 +149,7 @@ export default class ActionSheet extends React.Component<Props, State> {
   }
 
   showActionSheetWithOptions = (options: ActionSheetOptions, onSelect: (i: number) => void) => {
-    const { isVisible, isAnimating, overlayOpacity, sheetOpacity } = this.state;
+    const { isVisible, overlayOpacity, sheetOpacity } = this.state;
 
     if (isVisible) {
       this._deferNextShow = this.showActionSheetWithOptions.bind(this, options, onSelect);

From 57ac1d1074be7b96d8e105971973cd165eea54a5 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Mon, 27 Apr 2020 01:23:12 +0100
Subject: [PATCH 2/7] Add Modal example

---
 example/App.tsx | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index e588519..4bf0437 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,9 +1,16 @@
 import * as React from 'react';
-import { StyleSheet, Text, View, ScrollView, SafeAreaView } from 'react-native';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
 import {
   ActionSheetProvider,
   connectActionSheet,
-  ActionSheetOptions,
   ActionSheetProps,
 } from '@expo/react-native-action-sheet';
 import ShowActionSheetButton from './ShowActionSheetButton';
@@ -12,11 +19,13 @@ type Props = ActionSheetProps;
 
 interface State {
   selectedIndex: number | null;
+  isModalOpen: boolean;
 }
 
 class App extends React.Component<Props, State> {
   state: State = {
     selectedIndex: null,
+    isModalOpen: false,
   };
 
   _updateSelectionText = (selectedIndex: number) => {
@@ -36,6 +45,10 @@ class App extends React.Component<Props, State> {
     return <Text style={styles.sectionHeaderText}>{text}</Text>;
   };
 
+  _toggleModal = () => {
+    this.setState({ isModalOpen: !this.state.isModalOpen });
+  };
+
   _renderButtons() {
     const { showActionSheetWithOptions } = this.props;
     return (
@@ -117,6 +130,37 @@ class App extends React.Component<Props, State> {
           onSelection={this._updateSelectionText}
           showActionSheetWithOptions={showActionSheetWithOptions}
         />
+        {this._renderSectionHeader('Special Cases')}
+        <TouchableOpacity onPress={this._toggleModal}>
+          <Text
+            style={{
+              fontSize: 15,
+              textDecorationLine: 'underline',
+            }}>
+            Open Modal
+          </Text>
+        </TouchableOpacity>
+        {this.state.isModalOpen && (
+          <Modal>
+            <View style={{ flex: 1, padding: 30 }}>
+              <ShowActionSheetButton
+                title="Options Only"
+                onSelection={this._updateSelectionText}
+                showActionSheetWithOptions={showActionSheetWithOptions}
+              />
+
+              <TouchableOpacity onPress={this._toggleModal}>
+                <Text
+                  style={{
+                    fontSize: 15,
+                    textDecorationLine: 'underline',
+                  }}>
+                  Close Modal
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </Modal>
+        )}
       </View>
     );
   }

From 15460e4354765f338fd491a44e716e6ebfdca146 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Mon, 27 Apr 2020 01:28:44 +0100
Subject: [PATCH 3/7] Simplify code

---
 example/App.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index 4bf0437..95bcfba 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -132,13 +132,7 @@ class App extends React.Component<Props, State> {
         />
         {this._renderSectionHeader('Special Cases')}
         <TouchableOpacity onPress={this._toggleModal}>
-          <Text
-            style={{
-              fontSize: 15,
-              textDecorationLine: 'underline',
-            }}>
-            Open Modal
-          </Text>
+          <Text style={styles.link}>Open Modal</Text>
         </TouchableOpacity>
         {this.state.isModalOpen && (
           <Modal>
@@ -150,13 +144,7 @@ class App extends React.Component<Props, State> {
               />
 
               <TouchableOpacity onPress={this._toggleModal}>
-                <Text
-                  style={{
-                    fontSize: 15,
-                    textDecorationLine: 'underline',
-                  }}>
-                  Close Modal
-                </Text>
+                <Text style={styles.link}>Close Modal</Text>
               </TouchableOpacity>
             </View>
           </Modal>
@@ -228,4 +216,8 @@ const styles = StyleSheet.create({
     fontSize: 16,
     marginTop: 20,
   },
+  link: {
+    fontSize: 15,
+    textDecorationLine: 'underline',
+  },
 });

From 3deddde49a5b9a24cb33cfaf06ce3371fa499c50 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Mon, 27 Apr 2020 18:23:38 +0100
Subject: [PATCH 4/7] Add useModal on Example

---
 example/App.tsx                   | 1 +
 example/ShowActionSheetButton.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/example/App.tsx b/example/App.tsx
index 95bcfba..768353b 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -138,6 +138,7 @@ class App extends React.Component<Props, State> {
           <Modal>
             <View style={{ flex: 1, padding: 30 }}>
               <ShowActionSheetButton
+                useModal
                 title="Options Only"
                 onSelection={this._updateSelectionText}
                 showActionSheetWithOptions={showActionSheetWithOptions}
diff --git a/example/ShowActionSheetButton.tsx b/example/ShowActionSheetButton.tsx
index d97e800..3be5d00 100644
--- a/example/ShowActionSheetButton.tsx
+++ b/example/ShowActionSheetButton.tsx
@@ -8,7 +8,7 @@ const icon = (name: string) => <MaterialIcons key={name} name={name} size={24} /
 interface Props {
   title: string;
   showActionSheetWithOptions: (
-    optons: ActionSheetOptions,
+    options: ActionSheetOptions,
     callback: (buttonIndex: number) => void
   ) => void;
   onSelection: (index: number) => void;
@@ -18,6 +18,7 @@ interface Props {
   withSeparators?: boolean;
   withCustomStyles?: boolean;
   withAnchor?: boolean;
+  useModal?: boolean;
 }
 
 // A custom button that shows examples of different share sheet configurations
@@ -30,6 +31,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
     withCustomStyles: false,
     withAnchor: false,
     onSelection: null,
+    useModal: false,
   };
 
   _anchorRef = React.createRef<Button>();
@@ -44,6 +46,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
       withCustomStyles,
       onSelection,
       showActionSheetWithOptions,
+      useModal,
     } = this.props;
 
     // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
@@ -110,6 +113,8 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
         messageTextStyle,
         // Android only,
         containerStyle,
+        // Android only,
+        useModal,
       },
       (buttonIndex: number) => {
         // Do something here depending on the button index selected

From 22c4081f4ff36810396a244dee7404215600a5b9 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Mon, 27 Apr 2020 18:27:14 +0100
Subject: [PATCH 5/7] Implement useModal

---
 src/ActionSheet/index.tsx | 14 ++++++++++----
 src/types.ts              |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/ActionSheet/index.tsx b/src/ActionSheet/index.tsx
index ab5bd63..10ad418 100644
--- a/src/ActionSheet/index.tsx
+++ b/src/ActionSheet/index.tsx
@@ -54,7 +54,8 @@ export default class ActionSheet extends React.Component<Props, State> {
     (this._actionSheetHeight = nativeEvent.layout.height);
 
   render() {
-    const { isVisible, overlayOpacity } = this.state;
+    const { isVisible, overlayOpacity, options } = this.state;
+    const useModal = options && options.useModal;
     const overlay = isVisible ? (
       <Animated.View
         style={[
@@ -72,11 +73,16 @@ export default class ActionSheet extends React.Component<Props, State> {
           flex: 1,
         }}>
         {React.Children.only(this.props.children)}
-
-        {isVisible && (
+        {isVisible && !useModal && (
+          <React.Fragment>
+            {overlay}
+            {this._renderSheet()}
+          </React.Fragment>
+        )}
+        {isVisible && useModal && (
           <Modal animationType="none" transparent={true} onRequestClose={this._selectCancelButton}>
             {overlay}
-            {isVisible ? this._renderSheet() : null}
+            {this._renderSheet()}
           </Modal>
         )}
       </View>
diff --git a/src/types.ts b/src/types.ts
index 7491b36..35515a6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,4 +26,5 @@ export interface ActionSheetOptions extends ActionSheetIOSOptions {
   showSeparators?: boolean;
   containerStyle?: ViewStyle;
   separatorStyle?: ViewStyle;
+  useModal?: boolean;
 }

From 944b2b3d32e0b8bef2a27137b41ab5fcb335fb30 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Tue, 28 Apr 2020 19:37:56 +0100
Subject: [PATCH 6/7] Apply suggested changes

Co-Authored-By: Brad Bumbalough <bradbumbalough@users.noreply.github.com>
---
 src/ActionSheet/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ActionSheet/index.tsx b/src/ActionSheet/index.tsx
index 10ad418..5c11393 100644
--- a/src/ActionSheet/index.tsx
+++ b/src/ActionSheet/index.tsx
@@ -55,7 +55,7 @@ export default class ActionSheet extends React.Component<Props, State> {
 
   render() {
     const { isVisible, overlayOpacity, options } = this.state;
-    const useModal = options && options.useModal;
+    const useModal = options ? options.useModal === true : false;
     const overlay = isVisible ? (
       <Animated.View
         style={[

From 44970a93abb9754a9e17ba98bf384c607baf4121 Mon Sep 17 00:00:00 2001
From: Broda Noel <brodanoel@gmail.com>
Date: Wed, 29 Apr 2020 04:15:48 +0100
Subject: [PATCH 7/7] Add documentation

---
 README.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9b8b454..2706582 100644
--- a/README.md
+++ b/README.md
@@ -102,7 +102,7 @@ The same options available on React Native's [ActionSheetIOS](https://facebook.g
 | -----------------| -------| -------- | ------- |
 | anchor           | number | No       |         |
 
-#### `anchor` (optional) 
+#### `anchor` (optional)
 iPad only option that allows for docking the action sheet to a node. See [ShowActionSheetButton.tsx](/example/ShowActionSheetButton.tsx) for an example on how to implement this.
 
 ### Android/Web-Only Props
@@ -120,6 +120,7 @@ The below props allow modification of the Android ActionSheet. They have no effe
 | showSeparators   | boolean                           | No       |  false  |
 | containerStyle   | ViewStyle                         | No       |         |
 | separatorStyle   | ViewStyle                         | No       |         |
+| useModal         | boolean                           | No       |  false  |
 
 #### `icons` (optional)
 
@@ -146,6 +147,9 @@ Apply any view style props to the container rather than use the default look (e.
 #### `separatorStyle`: (optional)
 Modify the look of the separators rather than use the default look.
 
+#### `useModal`: (optional)
+Wrap the ActionSheet with a Modal, in order to show in front of other Modals that were already opened ([issue reference](https://github.com/expo/react-native-action-sheet/issues/164)).
+
 ## Try it out
 
 Try it in Expo: https://expo.io/@community/react-native-action-sheet-example