1import React from 'react';
2import { Alert, Platform, ScrollView, TextInput, View } from 'react-native';
3import * as SecureStore from 'expo-secure-store';
4import ListButton from '../components/ListButton';
5
6interface State {
7  key?: string;
8  value?: string;
9}
10
11export default class SecureStoreScreen extends React.Component<{}, State> {
12  static navigationOptions = {
13    title: 'SecureStore',
14  };
15
16  readonly state: State = {};
17
18  _setValue = async (value: string, key: string) => {
19    try {
20      console.log('securestore: ' + SecureStore);
21      await SecureStore.setItemAsync(key, value, {});
22      Alert.alert(
23        'Success!',
24        'Value: ' + value + ', stored successfully for key: ' + key,
25        [{ text: 'OK', onPress: () => {} }]
26      );
27    } catch (e) {
28      Alert.alert('Error!', e.message, [{ text: 'OK', onPress: () => {} }]);
29    }
30  }
31
32  _getValue = async (key: string) => {
33    try {
34      const fetchedValue = await SecureStore.getItemAsync(key, {});
35      Alert.alert('Success!', 'Fetched value: ' + fetchedValue, [
36        { text: 'OK', onPress: () => {} },
37      ]);
38    } catch (e) {
39      Alert.alert('Error!', e.message, [{ text: 'OK', onPress: () => {} }]);
40    }
41  }
42
43  _deleteValue = async (key: string) => {
44    try {
45      await SecureStore.deleteItemAsync(key, {});
46      Alert.alert('Success!', 'Value deleted', [
47        { text: 'OK', onPress: () => {} },
48      ]);
49    } catch (e) {
50      Alert.alert('Error!', e.message, [{ text: 'OK', onPress: () => {} }]);
51    }
52  }
53
54  render() {
55    return (
56      <ScrollView
57        style={{
58          flex: 1,
59          padding: 10,
60        }}
61      >
62        <TextInput
63          style={{
64            marginBottom: 10,
65            padding: 10,
66            height: 40,
67            ...Platform.select({
68              ios: {
69                borderColor: '#ccc',
70                borderWidth: 1,
71                borderRadius: 3,
72              },
73            }),
74          }}
75          placeholder="Enter a value to store (ex. pw123!)"
76          value={this.state.value}
77          onChangeText={value => this.setState({ value })}
78        />
79        <TextInput
80          style={{
81            marginBottom: 10,
82            padding: 10,
83            height: 40,
84            ...Platform.select({
85              ios: {
86                borderColor: '#ccc',
87                borderWidth: 1,
88                borderRadius: 3,
89              },
90            }),
91          }}
92          placeholder="Enter a key for the value (ex. password)"
93          value={this.state.key}
94          onChangeText={key => this.setState({ key })}
95        />
96        {this.state.value && this.state.key && (
97          <ListButton
98            onPress={() => this._setValue(this.state.value!, this.state.key!)}
99            title="Store value with key"
100          />
101        )}
102        {this.state.key && (
103          <ListButton
104            onPress={() => this._getValue(this.state.key!)}
105            title="Get value with key"
106          />
107        )}
108        {this.state.key && (
109          <ListButton
110            onPress={() => this._deleteValue(this.state.key!)}
111            title="Delete value with key"
112          />
113        )}
114      </ScrollView>
115    );
116  }
117}
118