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('');
12  const [needsRestart, setNeedsRestart] = React.useState(false);
13
14  React.useEffect(() => {
15    AsyncStorage.getItem(key).then(value => {
16      if (value) {
17        setStoredNumber(value);
18      }
19    });
20  }, []);
21
22  const increment = React.useCallback(async () => {
23    const newNumber = +storedNumber > 0 ? +storedNumber + 10 : 10;
24
25    await AsyncStorage.setItem(key, `${newNumber}`);
26
27    setStoredNumber(`${newNumber}`);
28    setNeedsRestart(true);
29  }, [setNeedsRestart, setStoredNumber, storedNumber]);
30
31  const clearItem = React.useCallback(async () => {
32    await AsyncStorage.removeItem(key);
33    setNeedsRestart(true);
34  }, [setNeedsRestart]);
35
36  return (
37    <View>
38      <Text style={styles.text}>Current: {storedNumber}</Text>
39      <Button title="Increment by 10" onPress={increment} />
40      <Button title="Reset" onPress={clearItem} />
41
42      {needsRestart ? <Button onPress={() => Updates.reloadAsync()} title="Reload App" /> : null}
43    </View>
44  );
45}
46
47export default function AsyncStorageScreen() {
48  return (
49    <Page>
50      <Section title="Persist Data">
51        <PersistExample />
52      </Section>
53    </Page>
54  );
55}
56
57AsyncStorageScreen.navigationOptions = {
58  title: 'AsyncStorage',
59};
60
61const styles = StyleSheet.create({
62  text: {
63    color: '#000000',
64    fontSize: 20,
65    textAlign: 'center',
66    margin: 10,
67  },
68});
69