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