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 (