example

Author: krizzu

examples/example-react-native/App.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 import { StatusBar, useColorScheme, View } from "react-native";
-import GetSetClear from "./src/GetSetClear";
+import GetSetClear from "./src/BasicCrud";
 
 function App(): React.JSX.Element {
   const isDarkMode = useColorScheme() === "dark";

examples/example-react-native/src/GetSetClear.tsx renamed to examples/example-react-native/src/BasicCrud.tsx

@@ -8,45 +8,58 @@
 
 import { createAsyncStorage } from "@react-native-async-storage/async-storage";
 import React, { useState } from "react";
-import { Button, StyleSheet, Text, View } from "react-native";
+import { Alert, Button, StyleSheet, Text, View } from "react-native";
 
 function GetSet() {
-  const [storedNumber, setStoredNumber] = React.useState("");
-  const [needsRestart, setNeedsRestart] = React.useState(false);
-  const [storage] = useState(() => createAsyncStorage(StorageDb));
+  const [storedNumber, setStoredNumber] = React.useState<number | null>(null);
+  const [storage] = useState(() => createAsyncStorage("test-database"));
 
-  React.useEffect(() => {
-    storage
-      .getItem(STORAGE_KEY)
-      .then((value) => {
-        if (value) {
-          setStoredNumber(value || "");
-        }
-      })
-      .catch(console.error);
-  }, [storage]);
+  async function readCurrent() {
+    try {
+      const value = await storage.getItem(STORAGE_KEY);
+      setStoredNumber(value ? Number(value) : null);
+    } catch (e) {
+      console.error(e);
+    }
+  }
 
   const increaseByTen = async () => {
-    const newNumber = +storedNumber > 0 ? +storedNumber + 10 : 10;
+    const newNumber = (storedNumber ?? 0) + 10;
 
-    await storage.setItem(STORAGE_KEY, `${newNumber}`).catch(console.error);
-
-    setStoredNumber(`${newNumber}`);
-    setNeedsRestart(true);
+    try {
+      await storage.setItem(STORAGE_KEY, `${newNumber}`);
+      setStoredNumber(newNumber);
+      await readCurrent();
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   const removeItem = async () => {
     await storage.removeItem(STORAGE_KEY).catch(console.error);
-    setNeedsRestart(true);
+    await readCurrent();
+  };
+
+  const listAllKeys = async () => {
+    try {
+      const keys = await storage.getKeys();
+      Alert.alert("keys", keys.join(", "));
+    } catch (e) {
+      console.error(e);
+    }
   };
 
+  React.useEffect(() => {
+    readCurrent();
+  }, [storage]);
+
   return (
     <View>
       <Text style={styles.text}>Currently stored: </Text>
       <Text style={styles.text}>{storedNumber}</Text>
       <Button title="Increase by 10" onPress={increaseByTen} />
       <Button title="remove item" onPress={removeItem} />
-      {needsRestart ? <Text>Hit restart to see effect</Text> : null}
+      <Button title="list all keys" onPress={listAllKeys} />
     </View>
   );
 }
@@ -61,6 +74,5 @@ const styles = StyleSheet.create({
 });
 
 export const STORAGE_KEY = "random";
-const StorageDb = "test";
 
 export default GetSet;