1import * as SMS from 'expo-sms';
2import React from 'react';
3import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
4
5interface State {
6  phoneNumbers: string[];
7  message?: string;
8  error?: string;
9  result?: string;
10}
11
12// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
13// eslint-disable-next-line @typescript-eslint/ban-types
14export default class SMSScreen extends React.Component<{}, State> {
15  static navigationOptions = {
16    title: 'SMS',
17  };
18
19  readonly state: State = {
20    phoneNumbers: [],
21  };
22
23  _sendSMS = async () => {
24    const isAvailable = await SMS.isAvailableAsync();
25    if (!isAvailable) {
26      this.setState({
27        error: 'SMS functionality is not available on this device!',
28      });
29      setTimeout(() => this.setState({ error: undefined }), 10000);
30      return;
31    }
32    try {
33      if (this.state.message) {
34        const { result } = await SMS.sendSMSAsync(this.state.phoneNumbers, this.state.message);
35        this.setState({ phoneNumbers: [], message: undefined, result });
36        setTimeout(() => this.setState({ result: undefined }), 5000);
37      }
38    } catch (e) {
39      this.setState({ error: e.message });
40      setTimeout(() => this.setState({ error: undefined }), 10000);
41    }
42  };
43
44  render() {
45    return (
46      <View style={styles.container}>
47        <TextInput
48          style={styles.phoneNumbers}
49          placeholder="Phone numbers, comma separated"
50          value={this.state.phoneNumbers.join(',')}
51          onChangeText={phoneNumbers =>
52            this.setState({
53              phoneNumbers: phoneNumbers.split(',').map(e => e.trim()),
54            })
55          }
56        />
57        <TextInput
58          style={styles.message}
59          placeholder="Message"
60          value={this.state.message}
61          onChangeText={message => this.setState({ message })}
62        />
63        <Button title="Send" disabled={!this.state.message} onPress={this._sendSMS}>
64          Send SMS
65        </Button>
66        {this.state.error && (
67          <View style={[styles.textView, styles.errorView]}>
68            <Text style={styles.errorText}>{this.state.error}</Text>
69          </View>
70        )}
71        {this.state.result && (
72          <View style={[styles.textView, styles.resultView]}>
73            <Text>{this.state.result}</Text>
74          </View>
75        )}
76      </View>
77    );
78  }
79}
80
81const styles = StyleSheet.create({
82  container: {
83    flex: 1,
84    marginBottom: 10,
85    padding: 10,
86  },
87  phoneNumbers: {
88    height: 40,
89  },
90  message: {
91    height: 40,
92  },
93  errorView: {
94    backgroundColor: 'red',
95  },
96  resultView: {
97    borderColor: 'blue',
98    borderWidth: 2,
99  },
100  textView: {
101    height: 60,
102    justifyContent: 'center',
103    alignItems: 'center',
104    padding: 20,
105    marginTop: 20,
106    marginBottom: 20,
107  },
108  errorText: {
109    color: 'white',
110  },
111});
112