Merge pull request #87 from tombailey/improve-example-app

Improve example app

example/App.js

@@ -8,68 +8,81 @@
  */
 
 import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Platform, StyleSheet, Button, Text, TextInput, View} from 'react-native';
 
 import RNSecureKeyStore, {ACCESSIBLE} from "react-native-secure-key-store";
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
 type Props = {};
 export default class App extends Component<Props> {
+  state = {
+    alias: 'hello',
+    value: 'world'
+  };
+
+  getValue() {
+    RNSecureKeyStore.get(this.state.alias)
+      .then((value) => {
+        this.setState({
+          value,
+        });
+      })
+      .catch(console.error);
+  }
+
+  setValue() {
+    RNSecureKeyStore.set(this.state.alias, this.state.value, {})
+      .then(() => this.getValue())
+      .catch(console.error);
+  }
+
+  removeValue() {
+    RNSecureKeyStore.remove(this.state.alias)
+      .then(() => this.getValue())
+      .catch(console.error);
+  }
+
   render() {
-
-    RNSecureKeyStore.set("key1", "value1", {accessible: ACCESSIBLE.ALWAYS_THIS_DEVICE_ONLY})
-      .then((res) => {
-        console.log(res);
-      }, (err) => {
-        console.log(err);
-      });
-
-    RNSecureKeyStore.set("key2", "value2", {accessible: ACCESSIBLE.ALWAYS_THIS_DEVICE_ONLY})
-      .then((res) => {
-        console.log(res);
-      }, (err) => {
-        console.log(err);
-      });
-
-    RNSecureKeyStore.get("key1")
-      .then((res) => {
-        console.log(res);
-      }, (err) => {
-        console.log(err);
-      });
-
-    RNSecureKeyStore.get("key2")
-      .then((res) => {
-        console.log(res);
-      }, (err) => {
-        console.log(err);
-      });
-
-    RNSecureKeyStore.remove("key1")
-      .then((res) => {
-        console.log(res);
-      }, (err) => {
-        console.log(err);
-      });
-
-    RNSecureKeyStore.remove("key2")
-      .then((res) => {
-        console.log(res);
-      }, (err) => {
-        console.log(err);
-      });
-
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
+        <View style={styles.row}>
+          <Text>Alias:</Text>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={alias => this.setState({alias})}
+            value={this.state.alias}
+          />
+        </View>
+
+        <View style={styles.row}>
+          <Text>Value:</Text>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={value => this.setState({value})}
+            value={this.state.value}
+          />
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.button}>
+            <Button
+              onPress={() => this.getValue()}
+              title='Get'
+              />
+          </View>
+          <View style={styles.button}>
+            <Button
+              onPress={() => this.setValue()}
+              title='Set'
+              />
+          </View>
+          <View style={styles.button}>
+            <Button
+              onPress={() => this.removeValue()}
+              title='Remove'
+              />
+          </View>
+        </View>
+
       </View>
     );
   }
@@ -82,14 +95,20 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 20
   },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+  textInput: {
+    height: 40,
+    width: 200,
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginLeft: 10
   },
+  button: {
+    marginLeft: 10
+  }
 });