title: Does anyone know how to implement SecureStorage in React Native?
body: <p>I am using JavaScript + React Native to make an app for my university project. I am using expo to manage my packaging and for viewing the app in the iOS simulator. I am also new to both JavaScript and React Native.</p>
  <p>I have been having trouble with implementing a React Native module known as <em>Secure Storage</em>.</p>
  <p><a href="https://docs.expo.io/versions/latest/sdk/securestore/" rel="nofollow noreferrer">https://docs.expo.io/versions/latest/sdk/securestore/</a></p>
  <p>I would like to store user data for the app. Specifically I would like to store a JavaScript object such as:</p>
  <pre><code>User{ name:&quot;Bob&quot;, age:&quot;20&quot; }
  </code></pre>
  <p>And recall it later.</p>
  <p>Having read the documentation, I have made a helper module called &quot;StorageHelper&quot; as seen below:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import * as SecureStore from 'expo-secure-store';
  
  /**
   * Stores data
   * @param {} key 
   * @param {*} value 
   */
  export async function storeObject(key, value)
  {
    try 
    {
      const jsonValue = JSON.stringify(value);
      await SecureStore.setItemAsync(key, jsonValue);
    } 
    catch(e) 
    {
      console.log(e.message);
    }
  }
  
  /**
   * Retrieves data
   * @param {} key 
   */
  export async function getObject(key) 
  {
    let result = await SecureStore.getItemAsync(key);
    if (result != null) 
    {
      return result;
    } 
    else 
    {
      alert('No values stored under that key.');
    }</code></pre>
  </div>
  </div>
  </p>
  <p>On this screen in the app flow, I would like to generate the userObject object and store it in the <em>SecureStorage</em>. This following is</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import { Text, View, TouchableOpacity, Image } from 'react-native';
  
  import ProjStyleSheet from "../styles/ProjStyleSheet.js";
  
  import * as StorageHelper from "../resources/StorageHelper.js";
  
  const HomeImage = require('../art/HomeImage.png');
  const styles = ProjStyleSheet;
  
  function HomeScreen({ navigation }) {
  
    var userData = "Bob"; // instead of the object, I'm just using a simple variable.
    StorageHelper.storeObject("userName",userData);
    
    return (
      &lt;View style={{
        backgroundColor: "#fff",
        flexDirection: "column",
        justifyContent: "flex-start",
        flex:1,}}&gt;
          &lt;View style = {{
            paddingTop: 100, 
            paddingBottom: 20,
            paddingLeft: 10,
            paddingRight: 10,
            }}&gt; 
            &lt;Text style={styles.titleText}&gt;University Money Management App&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style = {{
            justifyContent: "space-evenly", 
            alignItems: "center",
            }}&gt; 
            &lt;Image
              style={{width: 250, height: 250, paddingBottom:20}}
              source={HomeImage}/&gt;
            &lt;TouchableOpacity style={styles.defaultButton} 
            onPress={() =&gt; navigation.navigate('IntroName')}&gt; 
              &lt;Text style={styles.text}&gt; Get Started &lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  export default HomeScreen;</code></pre>
  </div>
  </div>
  </p>
  <p>In the next screen, I am trying to get the data from the secure storage and show it on the screen. This can be seen below:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { useState } from 'react';
  import { Text, View, TouchableOpacity } from 'react-native';
  import ProjStyleSheet from "../styles/ProjStyleSheet.js";
  import { TextInput } from 'react-native-gesture-handler';
  
  import * as StorageHelper from "../resources/StorageHelper.js";
  
  const styles = ProjStyleSheet;
  
  function IntroName({ navigation }) 
  {
      var name = StorageHelper.getObject("userName"); // retrieve the variable here.
      
      return (
          &lt;View style={{
              flex: 1,
              backgroundColor: "#fff",
              alignItems: 'center',
              justifyContent: "space-around",}}&gt;
              &lt;Text style={styles.titleText}&gt;Please Enter Your Name&lt;/Text&gt;
              &lt;Text&gt; test = {name} &lt;/Text&gt; // show the name here
              &lt;TextInput 
                  style={{
                      borderColor: "#000",
                      borderRadius: 10,
                      borderWidth: 2,
                      padding: 20,
                      fontSize: 20,
                      width: "75%",
                  }}
                  placeholder="Your name here."&gt;
              &lt;/TextInput&gt;
              &lt;TouchableOpacity  
                  style={styles.defaultButton}  
                  onPress={() =&gt; navigation.navigate("IntroIncome")}&gt;
                      &lt;Text style={styles.text}&gt;Next&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
      );
  }
  
  export default IntroName;</code></pre>
  </div>
  </div>
  </p>
  <p>Unfortunately, no name appears in the text where I intend it to. I have gone through the Secure Storage documentation and searched through the internet, however I cannot find any answers that can help me. Does anyone have any good ideas on what I am missing to fully implement <em>SecureStorage</em>?</p>