Counter with Async Storage in React Native

Question

I am new to React Native. I want to make a counter using Async storage in React Native Expo. Async storage works with string value but I need to use integer value and can't find an example to create it.

I would appreciate it if you suggest with SQLite or if there is a different storage area.


  storeData = async (counter) => {
    try {
      await AsyncStorage.setItem('', counter)
    } catch (e) {
      
    }
  }
  getData = async () => {
    try {
      const value = await AsyncStorage.getItem('counter')
      if(counter !== null) {

      }
    } catch(e) {
      
    }
  }

  render() {
      return(
        <SafeAreaView style={styles.container}>
          <ImageBackground  style={styles.image}>
              <View style={{marginBottom: 250}}>
                    <Text style={styles.counter}>{counter}</Text>
              </View>
              <TouchableOpacity 
                style={styles.floatingButton1}
                onPress={this.onAddCounter}>
                <Text style={{fontSize:13, color:"white", fontWeight:"600"}}>Tap to Counter</Text>
              </TouchableOpacity>
             <TouchableOpacity 
              style={styles.resetButton1}
              onPress={this.onReset1}>
                <Icon name="undo" size={20} color="#900"/>
             </TouchableOpacity>
          </ImageBackground>
        </SafeAreaView>
      );
    }

  }

Auticcat · Accepted Answer · 2021-06-10 15:01:38Z

0

You can convert the integer to a string when you store the value:

number.toString()

And convert it to integer when you retrieve the value

parseInt(string)

Basically it will become

storeData = async (counter) => {
    try {
      await AsyncStorage.setItem('counter', counter.toString())
    } catch (e) {
      
    }
  }
  getData = async () => {
    try {
      const value = await AsyncStorage.getItem('counter')
      if(counter !== null) {
          value = parseInt(value)
      }
    } catch(e) {
      
    }
  }

answered Jun 10, 2021 at 15:01

Auticcat

4,4992 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vasyl Nahuliak · Accepted Answer · 2021-06-10 15:02:34Z

0

Use JSON.parse for values getting from AsyncStorage

https://react-native-async-storage.github.io/async-storage/docs/usage/#reading-object-value

answered Jun 10, 2021 at 15:02

Vasyl Nahuliak

2,5072 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Counter with Async Storage in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related