1import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';
2import React from 'react';
3import {
4  ActionSheetIOS,
5  Platform,
6  ScrollView,
7  StyleSheet,
8  Text,
9  TouchableOpacity,
10  TouchableOpacityProps,
11  View,
12} from 'react-native';
13
14import ShowActionSheetButton from '../components/ShowActionSheetButton';
15import { Colors } from '../constants';
16
17const Button: React.FunctionComponent<TouchableOpacityProps> = props => {
18  return (
19    <TouchableOpacity
20      onPress={props.onPress}
21      style={{
22        paddingHorizontal: 15,
23        paddingVertical: 10,
24        borderRadius: 3,
25        backgroundColor: Colors.tintColor,
26        marginRight: 10,
27      }}>
28      <Text
29        style={{
30          color: '#fff',
31        }}>
32        {props.children}
33      </Text>
34    </TouchableOpacity>
35  );
36};
37
38const ActionSheetProviderScreen = () => (
39  <ActionSheetProvider>
40    {/*
41    // @ts-ignore */}
42    <App />
43  </ActionSheetProvider>
44);
45
46function ActionSheetScreen() {
47  return (
48    <ScrollView>
49      <ActionSheetProviderScreen />
50      {Platform.OS === 'ios' && <ActionSheetIOSExample />}
51    </ScrollView>
52  );
53}
54
55function ActionSheetIOSExample() {
56  const showActionSheet = () => {
57    ActionSheetIOS.showActionSheetWithOptions(
58      {
59        options: ['Option 0', 'Option 1', 'Delete', 'Cancel'],
60        cancelButtonIndex: 3,
61        destructiveButtonIndex: 2,
62      },
63      buttonIndex => {
64        console.log({ buttonIndex });
65      }
66    );
67  };
68
69  const showShareSheet = () => {
70    ActionSheetIOS.showShareActionSheetWithOptions(
71      {
72        url: 'https://expo.io',
73        message: 'message to go with the shared url',
74        subject: 'a subject to go in the email heading',
75      },
76      error => alert(error),
77      (success, method) => {
78        if (success) {
79          alert(`Shared via ${method}`);
80        }
81      }
82    );
83  };
84
85  return (
86    <View style={{ flexDirection: 'row', padding: 10 }}>
87      <Button onPress={showActionSheet}>Action sheet</Button>
88
89      <Button onPress={showShareSheet}>Share sheet</Button>
90    </View>
91  );
92}
93
94ActionSheetScreen.navigationOptions = {
95  title: 'Action Sheet',
96};
97
98export default ActionSheetScreen;
99
100interface State {
101  selectedIndex?: number;
102}
103
104// @ts-ignore
105@connectActionSheet
106class App extends React.Component<{ showActionSheetWithOptions: any }, State> {
107  readonly state: State = {};
108
109  _updateSelectionText = (selectedIndex: number) => {
110    this.setState({ selectedIndex });
111  };
112
113  _renderSelectionText() {
114    const { selectedIndex } = this.state;
115    const text =
116      selectedIndex === undefined ? 'No Option Selected' : `Option #${selectedIndex + 1} Selected`;
117
118    return <Text style={styles.selectionText}>{text}</Text>;
119  }
120
121  _renderSectionHeader(text: string) {
122    return <Text style={styles.sectionHeaderText}>{text}</Text>;
123  }
124
125  _renderButtons() {
126    const { showActionSheetWithOptions } = this.props;
127    return (
128      <View style={{ alignItems: 'center' }}>
129        {this._renderSectionHeader('Universal Options')}
130        <ShowActionSheetButton
131          title="Options Only"
132          onSelection={this._updateSelectionText}
133          showActionSheetWithOptions={showActionSheetWithOptions}
134        />
135        <ShowActionSheetButton
136          title="Title"
137          withTitle
138          onSelection={this._updateSelectionText}
139          showActionSheetWithOptions={showActionSheetWithOptions}
140        />
141        <ShowActionSheetButton
142          title="Title & Message"
143          withTitle
144          withMessage
145          onSelection={this._updateSelectionText}
146          showActionSheetWithOptions={showActionSheetWithOptions}
147        />
148        {this._renderSectionHeader('Android-Only Options')}
149        <ShowActionSheetButton
150          title="Icons"
151          withIcons
152          onSelection={this._updateSelectionText}
153          showActionSheetWithOptions={showActionSheetWithOptions}
154        />
155        <ShowActionSheetButton
156          title="Title, Message, & Icons"
157          withTitle
158          withMessage
159          withIcons
160          onSelection={this._updateSelectionText}
161          showActionSheetWithOptions={showActionSheetWithOptions}
162        />
163        <ShowActionSheetButton
164          title="Use Separators"
165          withTitle
166          withIcons
167          withSeparators
168          onSelection={this._updateSelectionText}
169          showActionSheetWithOptions={showActionSheetWithOptions}
170        />
171        <ShowActionSheetButton
172          title="Custom Styles"
173          withTitle
174          withMessage
175          withIcons
176          withCustomStyles
177          onSelection={this._updateSelectionText}
178          showActionSheetWithOptions={showActionSheetWithOptions}
179        />
180      </View>
181    );
182  }
183
184  render() {
185    return (
186      <ScrollView style={styles.flex} contentContainerStyle={styles.contentContainer}>
187        <Text style={styles.headerText}>
188          {'Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet.'}
189        </Text>
190        {this._renderButtons()}
191        {this._renderSelectionText()}
192        <Text style={styles.notes}>
193          Note: Icons and custom text styles are only available on Android and web. Separators can
194          only be toggled on Android or web; they always show on iOS.
195        </Text>
196      </ScrollView>
197    );
198  }
199}
200
201const styles = StyleSheet.create({
202  flex: {
203    flex: 1,
204  },
205  contentContainer: {
206    padding: 16,
207    paddingVertical: 20,
208  },
209  headerText: {
210    textAlign: 'center',
211    fontSize: 16,
212    marginBottom: 10,
213  },
214  notes: {
215    marginTop: 32,
216  },
217  sectionHeaderText: {
218    color: 'orange',
219    textAlign: 'center',
220    fontWeight: 'bold',
221    fontSize: 20,
222    marginTop: 20,
223    marginBottom: 10,
224  },
225  selectionText: {
226    textAlign: 'center',
227    color: 'blue',
228    fontSize: 16,
229    marginTop: 20,
230  },
231});
232