diff --git a/examples/mobile/App.js b/examples/mobile/App.js
index 742ea921..0e3c6369 100644
--- a/examples/mobile/App.js
+++ b/examples/mobile/App.js
@@ -1,104 +1,206 @@
/**
- *
* @format
* @flow
*/
-import React from 'react';
+import React, {useState} from 'react';
import {
StyleSheet,
View,
SafeAreaView,
- Button,
Text,
- TouchableOpacity,
+ Switch,
+ TextInput,
} from 'react-native';
-import {Colors} from 'react-native/Libraries/NewAppScreen';
+import LegacyStorage from './src/legacy';
+import Button from './src/components/Button';
+import LegacyAsyncStorage from '@react-native-community/async-storage-backend-legacy';
-import LegacyExample from './src/legacy';
-
-const Examples = {
- legacy: {
- title: 'Legacy',
- screen: LegacyExample,
- },
+const storagesAvailable = {
+ Legacy: LegacyStorage,
};
-class AsyncStorageExampleApp extends React.Component {
- state = {
- page: Examples.legacy,
- };
+function AsyncStorageExampleApp() {
+ const [selectedStorageName, updateStorage] = useState('Legacy');
+ const [multiValueMode, updateMultiValueMode] = useState(false);
+ const [key, updateKey] = useState('');
+ const [value, updateValue] = useState('');
+ const [savedKeys, updatedSavedKeys] = useState([]);
+
+ const storage = storagesAvailable[selectedStorageName];
+
+ async function setValue() {
+ if (multiValueMode) {
+ const keys = key.split(',').map(k => k.trim());
+ const values = value.split(',').map(v => v.trim());
+
+ const keyValues = keys.map((k, index) => ({[k]: values[index]}));
+ await storage.setMultiple(keyValues);
+ } else {
+ await storage.set(key, value);
+ }
+ }
+ async function readValue() {
+ if (multiValueMode) {
+ const keys = key.split(',').map(k => k.trim());
+
+ const values = await storage.getMultiple(keys);
- render() {
- const Example = this.state.page;
+ const val = Object.keys(values).map(k => values[k]);
+ updateValue(val.join(', '));
+ } else {
+ const val = await storage.get(key);
+ updateValue(val);
+ }
+ }
+ async function deleteValue() {
+ if (multiValueMode) {
+ const keys = key.split(',').map(k => k.trim());
+ await storage.removeMultiple(keys);
+ } else {
+ await storage.remove(key);
+ }
+ }
+ async function getKeys() {
+ const keys = await storage.getKeys();
+ updatedSavedKeys(keys || []);
+ }
+ async function drop() {
+ await storage.clearStorage();
+ }
- return (
-
- {
- this.setState({page: null});
- }}>
- Reset
-
+ const buttons = [
+ {
+ name: multiValueMode ? 'get many' : 'get single',
+ func: readValue,
+ },
+ {
+ name: multiValueMode ? 'save many' : 'save single',
+ func: setValue,
+ },
+ {
+ name: multiValueMode ? 'delete many' : 'delete single',
+ func: deleteValue,
+ },
+ {
+ name: 'get keys',
+ func: getKeys,
+ },
+ {
+ name: 'clear',
+ func: drop,
+ },
+ ];
-
- {Object.keys(Examples).map(pageKey => {
- const example = Examples[pageKey];
- return (
-
+ return (
+
+
+ Async Storage - Mobile example
+
+
+ Multi-value mode:
+
+
+
+ {Object.keys(storagesAvailable).map(storageName => {
+ return (
- );
- })}
+ );
+ })}
+
- {Example ? (
- <>
- {Example.title} Example
-
- >
- ) : (
- Please select an example
- )}
-
- );
- }
+
+
+ {multiValueMode ? (
+ Note: keys and values should be separated by a coma
+ ) : null}
+ updateKey(text)}
+ value={key}
+ />
+ updateValue(text)}
+ value={value}
+ />
+
+
+ Saved keys: {savedKeys.join(', ')}
+
+
+ {buttons.map(({name, func}) => (
+
+ ))}
+
+
+ );
}
const styles = StyleSheet.create({
- sectionContainer: {
- marginTop: 16,
- alignItems: 'center',
+ flexOne: {
flex: 1,
- paddingHorizontal: 16,
},
- buttonContainer: {
- width: '100%',
+ alignCenter: {
+ alignItems: 'center',
flexDirection: 'row',
+ width: '100%',
+ },
+ container: {
+ marginTop: 16,
+ paddingHorizontal: 12,
+ flex: 1 / 4,
+ },
+ header: {
+ fontSize: 18,
+ color: '#020202',
marginVertical: 12,
- justifyContent: 'flex-start',
},
- sectionTitle: {
- fontSize: 24,
- marginBottom: 8,
- fontWeight: '600',
- color: Colors.black,
+ optionsContainer: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ },
+ optionsButtonContainer: {
+ marginTop: 8,
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ },
+ switch: {
+ marginLeft: 10,
+ },
+ savedKeysContainer: {
+ paddingHorizontal: 12,
+ marginVertical: 10,
+ },
+ inputsContainer: {
+ flex: 1 / 4,
+ paddingHorizontal: 12,
},
- sectionButton: {
- marginRight: 15,
+ input: {
+ backgroundColor: '#e8e8e8',
+ marginVertical: 8,
+ padding: 8,
+ borderRadius: 4,
},
- resetButton: {
- backgroundColor: '#ffb340',
- paddingHorizontal: 8,
- paddingVertical: 4,
- elevation: 3,
- alignSelf: 'flex-end',
+ buttonsContainer: {
+ flex: 2 / 4,
+ justifyContent: 'center',
+ paddingHorizontal: 12,
},
});
diff --git a/examples/mobile/src/components/Button.js b/examples/mobile/src/components/Button.js
new file mode 100644
index 00000000..79f99d4b
--- /dev/null
+++ b/examples/mobile/src/components/Button.js
@@ -0,0 +1,42 @@
+/**
+ * @format
+ */
+
+import React from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+function Button({title, onPress, active}) {
+ return (
+ onPress()}>
+
+
+ {title}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ button: {
+ borderRadius: 4,
+ backgroundColor: '#e9dde6',
+ paddingHorizontal: 4,
+ paddingVertical: 8,
+ justifyContent: 'center',
+ alignItems: 'center',
+ margin: 4,
+ },
+ buttonText: {
+ color: '#262626',
+ fontSize: 18,
+ },
+ active: {
+ backgroundColor: '#0c7cd8',
+ },
+ activeText: {
+ color: '#ffffff',
+ },
+});
+
+export default Button;
diff --git a/examples/mobile/src/legacy/index.js b/examples/mobile/src/legacy/index.js
index 68413b7e..d9d14c33 100644
--- a/examples/mobile/src/legacy/index.js
+++ b/examples/mobile/src/legacy/index.js
@@ -1,137 +1,12 @@
/**
- *
* @format
- * @flow
*/
-import React from 'react';
-import {Text, View, StyleSheet, TextInput, Button} from 'react-native';
+import LegacyStorage from '@react-native-community/async-storage-backend-legacy';
+import AsyncStorageFactory from '@react-native-community/async-storage';
-import storage from './storage';
-import Colors from 'react-native/Libraries/NewAppScreen/components/Colors';
+const legacy = new LegacyStorage();
-class LegacyExample extends React.Component {
- state = {
- key: '',
- value: '',
- savedText: '',
- storageKeys: [],
- };
+const storage = AsyncStorageFactory.create(legacy);
- componentDidMount() {
- this.readFromStorage();
- }
-
- saveToStorage = async () => {
- if (this.state.key) {
- await storage.set(this.state.key, this.state.value);
- }
- };
-
- readFromStorage = async () => {
- let readText = '';
- if (this.state.key) {
- readText = (await storage.get(this.state.key)) || '';
- }
-
- this.setState({
- savedText: readText,
- });
- };
-
- clearFromStorage = async () => {
- if (this.state.key) {
- await storage.remove(this.state.key);
- }
-
- await this.readFromStorage();
- };
-
- showKeys = async () => {
- const keys = await storage.getKeys();
-
- console.log({keys});
-
- this.setState(() => ({
- storageKeys: keys,
- }));
- };
-
- render() {
- return (
-
-
- storage key:
- this.setState({key: text})}
- />
-
-
- value:
- this.setState({value: text})}
- />
-
-
- Stored text: {this.state.savedText}
-
- Stored keys: {this.state.storageKeys.join(', ')}
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- width: '100%',
- paddingHorizontal: 16,
- },
- input: {
- borderColor: '#333',
- borderWidth: 1,
- borderStyle: 'solid',
- marginHorizontal: 12,
- flex: 3 / 5,
- alignSelf: 'center',
- },
-
- section: {
- width: '100%',
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'flex-start',
- margin: 8,
- },
- subtitle: {
- flex: 2 / 5,
- fontSize: 14,
- width: 40,
- alignContent: 'flex-end',
- textAlign: 'right',
- },
- title: {
- fontSize: 18,
- color: Colors.dark,
- marginVertical: 12,
- },
- buttonsContainer: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-around',
- },
-});
-
-export default LegacyExample;
+export default storage;
diff --git a/examples/mobile/src/legacy/storage.js b/examples/mobile/src/legacy/storage.js
deleted file mode 100644
index 8227be15..00000000
--- a/examples/mobile/src/legacy/storage.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import LegacyStorage from '@react-native-community/async-storage-backend-legacy';
-import AsyncStorageFactory from '@react-native-community/async-storage';
-
-const legacy = new LegacyStorage();
-
-const storage = AsyncStorageFactory.create(legacy);
-
-export default storage;
diff --git a/packages/storage-legacy/src/index.ts b/packages/storage-legacy/src/index.ts
index 9881bf0e..8d6cf72e 100644
--- a/packages/storage-legacy/src/index.ts
+++ b/packages/storage-legacy/src/index.ts
@@ -116,7 +116,7 @@ export default class LegacyAsyncStorage<
const value: {[k in K]: T[k]} = result.reduce(
(acc, current: [K, T[K]]) => {
const key = current[0];
- const val = current[1] || null;
+ const val = current[1];
return {
...acc,
[key]: val,
@@ -146,9 +146,12 @@ export default class LegacyAsyncStorage<
return new Promise((resolve, reject) => {
const valuesArray = values.map(entry => {
- return [Object.keys(entry)[0] as K, entry];
+ const key = Object.keys(entry)[0] as K;
+ const value = entry[key];
+
+ return [key, value];
});
- this._asyncStorageNativeModule.multiSet([valuesArray], function(
+ this._asyncStorageNativeModule.multiSet(valuesArray, function(
errors: Array,
) {
const errs = convertErrors(errors);
@@ -214,9 +217,10 @@ export default class LegacyAsyncStorage<
async dropStorage(_?: StorageOptions): Promise {
return new Promise((resolve, reject) => {
- this._asyncStorageNativeModule.clear(function(error: Array) {
- const err = convertErrors(Array.isArray(error) ? error : [error]);
-
+ this._asyncStorageNativeModule.clear(function(
+ error: Array | Error,
+ ) {
+ const err = convertErrors(error);
if (err) {
reject(err);
} else {