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