AsyncStorage
- React Native course
- Beginner
- Lesson 106/116
- 5 min
Learn persistent data storage with AsyncStorage.
What is AsyncStorage?
AsyncStorage is a persistent key-value store in React Native. Data survives even when the app is closed; it can be read when the app reopens. It is suitable for storing user preferences, login state or cached data.
AsyncStorage has been separated from the React Native core; it is installed as the @react-native-async-storage/async-storage package. All operations are asynchronous; you wait with await. Values are stored as strings; to store numbers or objects you need to convert them.
Installation and import
To use AsyncStorage you first install the package: npm install @react-native-async-storage/async-storage. With Expo you use npx expo install @react-native-async-storage/async-storage. After installation you import the default export.
import AsyncStorage from '@react-native-async-storage/async-storage';AsyncStorage is not a named export but a default export; you import it without curly braces. After installation you can use the setItem, getItem and removeItem methods.
Practice Your turn: import AsyncStorage
Import AsyncStorage as a default export from the @react-native-async-storage/async-storage package.
Starter code
// import AsyncStorage
// use it to store a valueSample solution
import AsyncStorage from '@react-native-async-storage/async-storage';Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What kind of data does AsyncStorage store?
- Temporary non-persistent data
- Only images
- Key-value pairs Correct answer
- Only numbers
Explanation: AsyncStorage stores key-value pairs.
2 Fill in the blank: import AsyncStorage
import ____ from '@react-native-async-storage/async-storage';import AsyncStorage from '@react-native-async-storage/async-storage';Explanation: AsyncStorage is the default export.
3 Match: method and role
| Term | Meaning |
|---|---|
setItem |
write data |
getItem |
read data |
removeItem |
delete data |