Налаштування AsyncStorage в React Native-додатку
AsyncStorage — це найпростіше сховище ключ-значення для React Native. Асинхронне, незашифроване, зберігає рядки. Підходить для користувацьких налаштувань, прапорів онбордингу, кеешування легких даних. Не підходить для токенів авторизації (немає шифрування), великих обсягів даних, складних запитів.
Установка
Починаючи з React Native 0.59, AsyncStorage переміщено з core у окремий пакет:
npm install @react-native-async-storage/async-storage
Для iOS: cd ios && pod install. Для Android, лінкування автоматичне.
Базове використання
import AsyncStorage from '@react-native-async-storage/async-storage';
// Запис
await AsyncStorage.setItem('onboarding_complete', 'true');
// Читання
const value = await AsyncStorage.getItem('onboarding_complete');
// Об'єкти — тільки через JSON
await AsyncStorage.setItem('user_prefs', JSON.stringify({ theme: 'dark', lang: 'ru' }));
const prefs = JSON.parse(await AsyncStorage.getItem('user_prefs') ?? '{}');
// Видалення
await AsyncStorage.removeItem('onboarding_complete');
// Пакетні операції
await AsyncStorage.multiSet([
['key1', 'value1'],
['key2', 'value2'],
]);
Ліміт розміру на Android. За замовчуванням AsyncStorage на Android обмежений 6 МБ. При перевищенні викликає помилку Database size exceeded the quota. Збільште ліміт через AndroidConfig у android/app/src/main/java/.../MainApplication.java:
new ReactNativeHost(this) {
@Override
protected List<ReactPackage> getPackages() {
// ...
}
}
Або встановіть через AsyncStorageExtraConfig.setMaxSizeConfig у MainApplication. Для більшого сховища використовуйте react-native-mmkv (швидше, без обмежень) або SQLite через react-native-quick-sqlite.
Типобезпечна обгортка
Прямі виклики getItem/setItem з JSON-парсингом, розкидані по коду — погана практика. Обгорніть у типізований сервіс:
const StorageService = {
async get<T>(key: string): Promise<T | null> {
const raw = await AsyncStorage.getItem(key);
return raw ? (JSON.parse(raw) as T) : null;
},
async set<T>(key: string, value: T): Promise<void> {
await AsyncStorage.setItem(key, JSON.stringify(value));
},
async remove(key: string): Promise<void> {
await AsyncStorage.removeItem(key);
},
};
Що не зберігати в AsyncStorage
Токени авторизації — використовуйте react-native-keychain або expo-secure-store. Вони зберігають дані в iOS Keychain та Android Keystore — зашифровано, захищено біометрією.
Часові рамки
Установка і базове налаштування: 2–4 години. З типізованим сервісом та інтеграцією Redux Persist або Zustand: 4–8 годин. Вартість розраховується індивідуально.