I am new to react native. I'm trying to save two different 'TextInput' values in the aync storage. Please suggest me how to save two different 'TextInput' values and how to get those values in 'Text'.

//AddScreen.js

import React, { Component } from 'react';
import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';
import styles from '../ponents/styles';
import { createStackNavigator } from 'react-navigation';
import History from '../ponents/History';

export default class AddScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: '',
           }
    }
    getKey = async () => {
        try {
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            this.setState({ myKey: value });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }
    async saveKey(value) {
        try {
            await AsyncStorage.setItem('@MySuperStore:key', value);
        } catch (error) {
            console.log("Error saving data" + error);
        }
    }
    ponentDidMount() {
        this.getKey();
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.MainContainer}>

                <View style={styles.Date_input}>
                    <TextInput
                        placeholder="Date_input"
                        //multiline={true}
                        value={this.state.myKey}
                        onChangeText={(value) => this.saveKey(value)}
                    />
                </View>
                <View style={styles.CostType_input}>
                    <TextInput
                        placeholder="CostType_input"
                        value={this.state.mykey}
                        onChangeText={(value) => this.saveKey(value)}
                    />
                </View>
                <View style={styles.getKeytext}>
                    <Text >
                        Stored key is = {this.state.myKey}
                    </Text>
                    <Text >
                        Stored key is = {}
                    </Text>
                </View>
                <View style={styles.Historybutton}>
                    <Button
                        onPress={() => navigate('History', { key: this.state.myKey })}
                        title="Press Me"
                    />
                </View>
            </View>
        )
    }
}

I just want to get two different 'TextInput' values when trying to call them. Please suggest me by taking my example.

I am new to react native. I'm trying to save two different 'TextInput' values in the aync storage. Please suggest me how to save two different 'TextInput' values and how to get those values in 'Text'.

//AddScreen.js

import React, { Component } from 'react';
import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';
import styles from '../ponents/styles';
import { createStackNavigator } from 'react-navigation';
import History from '../ponents/History';

export default class AddScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: '',
           }
    }
    getKey = async () => {
        try {
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            this.setState({ myKey: value });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }
    async saveKey(value) {
        try {
            await AsyncStorage.setItem('@MySuperStore:key', value);
        } catch (error) {
            console.log("Error saving data" + error);
        }
    }
    ponentDidMount() {
        this.getKey();
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.MainContainer}>

                <View style={styles.Date_input}>
                    <TextInput
                        placeholder="Date_input"
                        //multiline={true}
                        value={this.state.myKey}
                        onChangeText={(value) => this.saveKey(value)}
                    />
                </View>
                <View style={styles.CostType_input}>
                    <TextInput
                        placeholder="CostType_input"
                        value={this.state.mykey}
                        onChangeText={(value) => this.saveKey(value)}
                    />
                </View>
                <View style={styles.getKeytext}>
                    <Text >
                        Stored key is = {this.state.myKey}
                    </Text>
                    <Text >
                        Stored key is = {}
                    </Text>
                </View>
                <View style={styles.Historybutton}>
                    <Button
                        onPress={() => navigate('History', { key: this.state.myKey })}
                        title="Press Me"
                    />
                </View>
            </View>
        )
    }
}

I just want to get two different 'TextInput' values when trying to call them. Please suggest me by taking my example.

• javascript
• reactjs
• react-native

2 Answers 2

You should not call AsyncStorage every time you the state is changed (onChangeText()). What you can do is, save the value of TextInput in two states and save them in the AsyncStorage on button press or something.

For example:

constructor(props) {
  super(props);
  this.state = {
   myKey: '',
   text1: '',
   text2: ''
  }
}

 getKey = async () => {
        try {
            const key = await AsyncStorage.getItem('@MySuperStore:key');

            const key1 = await AsyncStorage.getItem('@MySuperStore:key1');
            const key2 = await AsyncStorage.getItem('@MySuperStore:key2');

            this.setState({ myKey: value });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }
 async saveKey(text1, text2) {
    //here you store two texts with two different key or concatenate text1 and text2 
    //store the both texts with one key. 

    key = text1+text2;
    try {
        await AsyncStorage.setItem('@MySuperStore:key1', text1);
        await AsyncStorage.setItem('@MySuperStore:key2', text2);

        // OR

        await AsyncStorage.setItem('@MySuperStore:key', key);
    } catch (error) {
        console.log("Error saving data" + error);
    }
}

 <TextInput
   placeholder="CostType_input"
   value={this.state.mykey}
   onChangeText={(value) => this.setState({ text1: value})}
  />
<TextInput
   placeholder="Some_input"
   value={this.state.mykey}
   onChangeText={(value) => this.setState({ text2: value})}
  />
 <Button
   onPress={() => this.saveKey(this.state.text1, this.state.text2)}
   title="Save key"
  />

You can use multiGet and multiSet to retrieve and store multiple keys in AsyncStorage. Here is the link to that. https://facebook.github.io/react-native/docs/asyncstorage#multiget

There are two way to stored multiple data into async:

1) Create one object for both values and stored into async:

Setting value:

        let storedObject = {};
        storedObject.text1 = text1Value;
        storedObject.text2 = text2Value;

        try {
            AsyncStorage.setItem('allTextValue', JSON.stringify(userInfoTemp));
        } catch (error) {
        }

Getting Value:

        try {
                AsyncStorage.getItem('allTextValue').then((infoValue) => {
                    let resObject = JSON.parse(infoValue)
                    let text1 = resObject.text1Value
                    let text2 = resObject.text2Value
                }).done();
            } catch (error) {
            }

2) Setting single single value:

Setting Value:

      try {                            
            AsyncStorage.setItem('text1', text1Value);
            AsyncStorage.setItem('text2', text2Value);
      } catch (error) {
      }

Getting Value:

   try {
        AsyncStorage.getItem('text1').then((text1Value) => {
            console.log(text1Value)
        }).done();
    } catch (error) {
    }
  try {
        AsyncStorage.getItem('text2').then((text2Value) => {
            console.log(text2Value)
        }).done();
    } catch (error) {
    }