title: How do I send a function parameter to AsyncStorage?
body: <p>I want to send the parameter to the function <code>submitLanguageSelection</code>, which is <code>userSelectedLanguage</code>, to a custom hook I've written which (hopefully) saves that parameter to <code>AsyncStorage</code>. The user selects a language, either English or Arabic, from one of the two buttons.</p>
  <p>This is my first time ever doing this. I've gotten very stuck.</p>
  <p>I would like the <code>submitLanguageSelection</code> function to call the <code>saveData</code> function which is made available through the <code>useLocalStorage</code> hook. I would like the user's choice of language to be persisted in <code>AsyncStorage</code> so I can then later render the <code>ChooseYourLanguageScreen</code> according to whether the user has selected a language or not.</p>
  <p>Here is the cutom hook, <code>useLocalStorage</code>:</p>
  <pre><code>import React from 'react';
  import { Alert } from 'react-native';
  import AsyncStorage from '@react-native-community/async-storage';
  
  const STORAGE_KEY = '@has_stored_value';
  
  export default () =&gt; {
    const [storedValue, setStoredValue] = React.useState('');
    const [errorMessage, setErrorMessage] = React.useState('');
  
    const saveData = async () =&gt; {
      try {
        const localValue = await AsyncStorage.setItem(STORAGE_KEY, storedValue);
        if (localValue !== null) {
          setStoredValue(storedValue);
          Alert.alert('Data successfully saved');
        }
        console.log('stored val', storedValue);
      } catch (e) {
        setErrorMessage('Something went wrong');
      }
    };
    return [saveData, errorMessage];
  };
  </code></pre>
  <p>Here is the <code>ChooseYourLanguageScreen</code>:</p>
  <pre><code>import React from 'react';
  import { View, Text, StyleSheet, Button } from 'react-native';
  import useLocalStorage from '../hooks/useLocalStorage';
  
  const ChooseYourLanguageScreen = ({ navigation }) =&gt; {
    const [saveData, errorMessage] = useLocalStorage();
  
    const submitLanguageSelection = (userSelectedLanguage) =&gt; {
      //TODO: save the data locally
      //TODO: navigate to welcome screen
  
      // at the moment, the language choice isn't making it to useLocalStorage
  
      if (userSelectedLanguage !== null) {
        console.log('user selected lang', userSelectedLanguage);
        saveData(userSelectedLanguage);
      }
    };
  
    return (
      &lt;View style={styles.container}&gt;
        {errorMessage ? &lt;Text&gt;{errorMessage}&lt;/Text&gt; : null}
        &lt;Text style={styles.text}&gt;This is the Choose Your Language Screen&lt;/Text&gt;
        &lt;View style={styles.buttons}&gt;
          &lt;View&gt;
            &lt;Button
              title={'English'}
              onPress={() =&gt; submitLanguageSelection('English')}
            /&gt;
          &lt;/View&gt;
          &lt;View&gt;
            &lt;Button
              title={'Arabic'}
              onPress={() =&gt; submitLanguageSelection('Arabic')}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    text: {
      alignSelf: 'center',
    },
    buttons: {
      backgroundColor: '#DDDDDD',
      padding: 10,
    },
  });
  
  export default ChooseYourLanguageScreen;
  
  </code></pre>