1import AsyncStorage from '@react-native-async-storage/async-storage';
2import * as Updates from 'expo-updates';
3import * as React from 'react';
4import { Button, StyleSheet, Text, View } from 'react-native';
5
6import { Page, Section } from '../components/Page';
7
8const key = 'random_value';
9
10function PersistExample() {
11  const [storedNumber, setStoredNumber] = React.useState('0');
12
13  React.useEffect(() => {
14    getItem();
15  }, []);
16
17  const getItem = React.useCallback(async () => {
18    const value = await AsyncStorage.getItem(key);
19    if (value) {
20      setStoredNumber(value);
21    } else {
22      setStoredNumber('0');
23    }
24  }, [setStoredNumber]);
25
26  const increment = React.useCallback(async () => {
27    const newNumber = +storedNumber > 0 ? +storedNumber + 10 : 10;
28
29    await AsyncStorage.setItem(key, `${newNumber}`);
30
31    setStoredNumber(`${newNumber}`);
32  }, [setStoredNumber, storedNumber]);
33
34  const clearItem = React.useCallback(async () => {
35    await AsyncStorage.removeItem(key);
36    await getItem();
37  }, [getItem]);
38
39  return (
40    <View>
41      <Text style={styles.text}>Current: {storedNumber}</Text>
42      <Button title="Increment by 10" onPress={increment} />
43      <Button title="Reset" onPress={clearItem} />
44
45      <Button onPress={() => Updates.reloadAsync()} title="Reload App" />
46    </View>
47  );
48}
49
50export default function AsyncStorageScreen() {
51  return (
52    <Page>
53      <Section title="Persist Data">
54        <PersistExample />
55      </Section>
56    </Page>
57  );
58}
59
60AsyncStorageScreen.navigationOptions = {
61  title: 'AsyncStorage',
62};
63
64const styles = StyleSheet.create({
65  text: {
66    color: '#000000',
67    fontSize: 20,
68    textAlign: 'center',
69    margin: 10,
70  },
71});
72