1import { ActionSheetOptions } from '@expo/react-native-action-sheet';
2import MaterialCommunityIcons from '@expo/vector-icons/build/MaterialCommunityIcons';
3import React from 'react';
4import { Text, TextStyle, View } from 'react-native';
5
6const icon = (name: string) => <MaterialCommunityIcons key={name} name={name as any} size={24} />;
7
8interface Props {
9  title: string;
10  showActionSheetWithOptions: (
11    options: ActionSheetOptions,
12    onSelection: (index: number) => void
13  ) => void;
14  onSelection: (index: number) => void;
15  withTitle?: boolean;
16  withMessage?: boolean;
17  withIcons?: boolean;
18  withSeparators?: boolean;
19  withCustomStyles?: boolean;
20}
21
22// A custom button that shows examples of different share sheet configurations
23export default class ShowActionSheetButton extends React.PureComponent<Props> {
24  static defaultProps = {
25    withTitle: false,
26    withMessage: false,
27    withIcons: false,
28    withSeparators: false,
29    withCustomStyles: false,
30    onSelection: null,
31  };
32
33  _showActionSheet = () => {
34    const {
35      withTitle,
36      withMessage,
37      withIcons,
38      withSeparators,
39      withCustomStyles,
40      onSelection,
41      showActionSheetWithOptions,
42    } = this.props;
43    // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
44    const options = ['Delete', 'Save', 'Share', 'Cancel'];
45    const icons = withIcons
46      ? [icon('delete'), icon('content-save'), icon('share'), icon('cancel')]
47      : undefined;
48    const title = withTitle ? 'Choose An Action' : undefined;
49    const message = withMessage
50      ? 'This library tries to mimic the native share sheets as close as possible.'
51      : undefined;
52    const destructiveButtonIndex = 0;
53    const cancelButtonIndex = 3;
54    const textStyle: TextStyle | undefined = withCustomStyles
55      ? { fontSize: 20, fontWeight: '500', color: 'blue' }
56      : undefined;
57    const titleTextStyle: TextStyle | undefined = withCustomStyles
58      ? {
59          fontSize: 24,
60          textAlign: 'center',
61          fontWeight: '700',
62          color: 'orange',
63        }
64      : undefined;
65    const messageTextStyle: TextStyle | undefined = withCustomStyles
66      ? { fontSize: 12, color: 'purple', textAlign: 'right' }
67      : undefined;
68
69    showActionSheetWithOptions(
70      {
71        options,
72        cancelButtonIndex,
73        destructiveButtonIndex,
74        title,
75        message,
76        icons, // Android only
77        tintIcons: true, // Android only; default is true
78        showSeparators: withSeparators, // Affects Android only; default is false
79        textStyle, // Android only
80        titleTextStyle, // Android only
81        messageTextStyle, // Android only
82      },
83      (buttonIndex) => {
84        // Do something here depending on the button index selected
85        onSelection(buttonIndex);
86      }
87    );
88  };
89
90  render() {
91    const { title } = this.props;
92    return (
93      <View style={{ margin: 6 }}>
94        <MaterialCommunityIcons.Button
95          name="code-tags"
96          backgroundColor="#3e3e3e"
97          onPress={this._showActionSheet}>
98          <Text
99            style={{
100              fontSize: 15,
101              color: '#fff',
102            }}>
103            {title}
104          </Text>
105        </MaterialCommunityIcons.Button>
106      </View>
107    );
108  }
109}
110