React Native AsyncStorage Example: When I Die App
React Native AsyncStorage Example: When I Die App
AsyncStorage is the persistent storage in React native that is based on key-value pair storage. It is commonly used when we want to store some basic data like app settings. All values in AsyncStorage are stored as plain text since it does not support any other data type. In this post, we will learn the basics of using AsyncStorage in a React native app.
Set up on Android and iOS
We can add the async-storage package to our project using yarn.
1 | $ yarn add @react-native-community/async-storage |
Async-storage comes with the auto-linking feature for React native 0.60+.
For iOS using cocoapods, run:
1 | $ cd ios/ && pod install |
We can now import the package to our project.
1 | import AsyncStorage from '@react-native-community/async-storage'; |
Commonly Used Methods
Here, we will discuss the four commonly used methods in AsyncStorage that follow the get and set principle.
Store Data
1 2 3 4 5 6 7 | storeData = async () => { try { await AsyncStorage.setItem('random_time', 50000) } catch (e) { // saving error } } |
Get Data
1 2 3 4 5 6 7 8 9 10 | getData = async () => { try { const value = await AsyncStorage.getItem('random_time') if(value !== null) { // value previously stored } } catch(e) { // error reading value } } |
Delete Individual Key
1 2 3 4 5 6 7 8 9 | removeValue = async () => { try { await AsyncStorage.removeItem('random_time') } catch(e) { // remove error } console.log('Done.') } |
Clear All Data
1 2 3 4 5 6 7 8 9 | clearAll = async () => { try { await AsyncStorage.clear() } catch(e) { // clear error } console.log('Done.') } |
First Basic Example: When I Die App
Our app follows a simple idea. It uses some random time value that is set as a react-native-countdown-component. After the countdown is started, the current time will be stored in AsyncStorage when we close the app and the componentWillUnmount event fires. When we open the app again and componentDidMount event fires, the app will retrieve the counting down time value from AsyncStorage and continue.
Initialize New Project
Using the VsCode integrated terminal, we can create a new react-native project using the following command.
1 | react-native init asyncstorage_demo |
To open the project, run:
1 | code asyncstorage_demo |
Now we need to add the two required packages, async-storage and react-native-countdown-component, using yarn.
1 | yarn add react-native-countdown-component @react-native-community/async-storage |
Bootstrap the App
Import the installed packages to our project file, App.js.
1 | import CountDown from 'react-native-countdown-component'; |
1 | import AsyncStorage from '@react-native-community/async-storage'; |
Define a new state for the component.
1 2 3 4 5 | export default class App extends Component { constructor(props) { super(props); this.state = {until_death: 10000} } |
1 | ............... |
Render our component to show the countdown clock.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | return ( <View style={styles.MainContainer}> <Image source={require('./img/grave.png')} /> <Text style={styles.header}>Your will die in</Text> <CountDown until={this.state.until_death} onFinish={this.onDoneCountdown} onPress={this.onPressCountdown} size={40} digitStyle={{backgroundColor: 'black'}} digitTxtStyle={{color: 'red'}} onChange={until_death => this.setState({until_death: until_death})} /> </View> ); } |
If we closely inspect the code inside the render function, first we set the initial time.
1 | until={this.state.until_death} |
When the time changes, we set the state of until_death to the new value.
1 | onChange={until_death => this.setState({until_death: until_death})} |
Next, we should store the state when the user closes the app so that when the user opens the app again the countdown continues.
1 2 3 4 5 6 7 | storeData = async until_death => { try { await AsyncStorage.setItem('until_death', until_death); } catch (e) { console.log(e); } }; |
The componentWillUnmount event fires when the user closes the app. We will call the storeData function when this event fires and sends the current state as a parameter.
1 2 3 | componentWillUnmount() { this.storeData(this.state.until_death); } |
Continue Count Down
When the user opens the app again, getData function will retrieve the stored time. If the app is opened for the first time, it will initialize a random value for until_death and set the state of the app.
1 2 3 4 5 6 7 8 9 10 11 12 13 | getData = async () => { try { const until_death = await AsyncStorage.getItem('until_death'); if (until_death !== null) { this.setState(until_death); } else { let until_death = Math.floor(Math.random() * 1000000) + 1; this.setState(until_death); } } catch (e) { console.log(e); } }; |
When the user opens the app and the componentDidMount event fires, call the getData method to continue the countdown.
1 2 3 4 | componentDidMount() { SplashScreen.hide(); this.getData(); } |
Our final app now continues the countdown from where it left off.
Conclusion
This post demonstrated the basics of using AsyncStorage in our app. Our current app does not continue the countdown in the background when the app closes. If you want to find out how to add this feature to our app, you can find the full source code here.
Credit
Icon made by Freepik from www.flaticon.com
About the author
Top developers
-
Alexey D. Frontend DeveloperJSReactHTMLCSSAngularShow lessAll skills
Dragos S. Full Stack DeveloperRelated articles
15.03.2024JAMstack Architecture with Next.js
The Jamstack architecture, a term coined by Mathias Biilmann, the co-founder of Netlify, encompasses a set of structural practices that rely on ...
7.03.2024Rendering Patterns: Static and Dynamic Rendering in Nextjs
Next.js is popular for its seamless support of static site generation (SSG) and server-side rendering (SSR), which offers developers the flexibility ...
12.09.2023Handling Mutations and Data Fetching Using React Query
Utilizing React Query for data fetching is simple and effective. By removing the complexity of caching, background updates, and error handling, React ...
Categories
3 comments
Are “componentWillMount” and “componentWillUnmount” still recommended to be used?
componentWillMount is not recommend because is deprecated you can use the constructor or componentDidMount for alternative
and componentWillUnmount is a recommend for clean up like unsubscribing event handle
Thank you, it was a question from Reddit users