I am new to react native.  

I am able to save 2 TextInputs values in async storage by putting 2 values of InputText in 'text1' and 'text2'. 
Now I, am trying if i press (Next) button then again this 2 InputText appear to get 2 values again and save these 2 values in asyn storage again within same text1 and text2 properties without erasing or reset previous saved 2 values.

//AddScreen.js

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

export default class AddScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: '',
            costKey: '',
            text1: '',
            text2: '',
        }
    }
    async getKey() {
        try {
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            const key = await AsyncStorage.getItem('@MySuperStore:key');
            const key1 = await AsyncStorage.getItem('@MySuperStore:key1');
            const key2 = await AsyncStorage.getItem('@MySuperStore:key2');
            this.setState({
                myKey: key,
                costKey: key2
            });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }

    async saveKey(text1, text2) {
        key = text1 + text2;
        try {
            await AsyncStorage.setItem('@MySuperStore:key', key);
            await AsyncStorage.setItem('@MySuperStore:key1', text1);
            await AsyncStorage.setItem('@MySuperStore:key2', text2);
        } catch (error) {
            console.log("Error saving data" + error);
        }
    }

    async resetKey() {
        try {
            await AsyncStorage.removeItem('@MySuperStore:key');
            await AsyncStorage.removeItem('@MySuperStore:key2');
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            const large = await AsyncStorage.getItem('@MySuperStore:key2')
            this.setState({
                myKey: value,
                costKey: large
            });
        } catch (error) {
            console.log("Error resetting data" + error);
        }
    }

    componentDidMount() {
        //this.getKey();
    }

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.MainContainer}>

                <TextInput
                    style={styles.formInput}
                    placeholder="Enter key you want to save!"
                    value={this.state.myKey}
                    onChangeText={(value) => this.setState({ text1: value })}
                />
                <TextInput
                    style={styles.formInput}
                    placeholder="Enter key you want to save!"
                    value={this.state.costKey}
                    onChangeText={(value) => this.setState({ text2: value })} />

                <Button
                    onPress={() => this.saveKey(this.state.text1, this.state.text2)}
                    title="Save key"
                />
                <Button
                    style={styles.formButton}
                    onPress={this.getKey.bind(this)}
                    title="Get Key"
                    color="#2196f3"
                    accessibilityLabel="Get Key"
                />
                <Button
                    style={styles.formButton}
                    onPress={this.resetKey.bind(this)}
                    title="Reset"
                    color="#f44336"
                    accessibilityLabel="Reset"
                />

                <Text style={styles.instructions}>
                    Stored key is = {this.state.myKey}
                </Text>
                <Text style={styles.instructions}>
                    Stored key is = {this.state.costKey}
                </Text>
                <Button
                    onPress={() => navigate('AddScreen', {
                        })}
                    title="Next"
                />
            </View>
        )
    }
}

```

**I mean to think that my (AddScreen.js) component as a small box, which contains 2 values of InputText in 'text1' and 'text2' and put that small box in bigger container async storage by labeling that small box 1. Now if I press (Next) button then new fresh small box appear again (AddScreen.js)
and again I put 2 InputText values in it within same 'text1' and 'text2' properties and put that small box again in the bigger async storage container, by labeling that small box 2. And so on box 3, box4, multiple times when (Next) pressed.**

Please suggest how to handle async storage and is this possible, by taking my example.