Skip to main content
Corrigindo tag
Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

Como visualizar valor salvo pelo Async StorageAsyncStorage?

Fonte Link

Como visualizar valor salvo pelo Async Storage

Tenho um código que salva e lê o valor de uma state através do AsyncStorage, porém ao fechar o app ou mudar de tela o valor volta para o valor do estado original, que no meu caso é zero. Como faço para ao mudar de telas ou fechar o app o valor continue o último alterado? Qual alternativa a variáveis de estado?

Segue o código:

import React, { Component } from 'react'
import { Text, View, AsyncStorage, TextInput, StyleSheet, TouchableOpacity } from 'react-native'

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      txtInputData: '',
      getValue: '',
    }
  }

  saveValue = () => {
    if(this.state.txtInputData){
      AsyncStorage.setItem('key_default', this.state.txtInputData)
      this.setState({txtInputData: ''})
      alert('Data salved!')
    }else{
      alert('Please, fill the data!')
    }
  }

  getValue = () => {
    AsyncStorage.getItem('key_default').then(value => this.setState({getValue: value}))
  }


  render() {
    return (
      <View style={styles.mainContainer}> 
        <Text>Using AsyncStorage</Text>
        <TextInput
        style={styles.textInput}
        placeholder = 'type here'
        value = {this.state.txtInputData}
        onChangeText={data => this.setState({txtInputData: data})}
        />
        <TouchableOpacity
        onPress={this.saveValue}
        style={styles.TouchableOpacity}
        >
          <Text>Save value</Text>
        </TouchableOpacity>
        <TouchableOpacity
        onPress={this.getValue}
        style={styles.TouchableOpacity}
        >
          <Text> Read value</Text>
        </TouchableOpacity>  
        <Text>Value read:{this.state.getValue}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    padding: 20,
  },
  textInput: {
    marginTop: 10,
    borderWidth: 1,
    borderColor: '#fa19',
    fontSize: 15
  },
  TouchableOpacity: {
    width: '50%',
    marginTop: 10,
    borderWidth: 1,
    borderColor: '#fa19',
    padding: 10,
    alignSelf: 'center',
    alignItems: 'center'
  }
})