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 diff --git a/example/App.tsx b/example/App.tsx index e588519..768353b 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 { state: State = { selectedIndex: null, + isModalOpen: false, }; _updateSelectionText = (selectedIndex: number) => { @@ -36,6 +45,10 @@ class App extends React.Component { return {text}; }; + _toggleModal = () => { + this.setState({ isModalOpen: !this.state.isModalOpen }); + }; + _renderButtons() { const { showActionSheetWithOptions } = this.props; return ( @@ -117,6 +130,26 @@ class App extends React.Component { onSelection={this._updateSelectionText} showActionSheetWithOptions={showActionSheetWithOptions} /> + {this._renderSectionHeader('Special Cases')} + + Open Modal + + {this.state.isModalOpen && ( + + + + + + Close Modal + + + + )} ); } @@ -184,4 +217,8 @@ const styles = StyleSheet.create({ fontSize: 16, marginTop: 20, }, + link: { + fontSize: 15, + textDecorationLine: 'underline', + }, }); 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) => 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 { withCustomStyles: false, withAnchor: false, onSelection: null, + useModal: false, }; _anchorRef = React.createRef