Asyncstorage React Native | Async Storage Tutorial

react native acing storage allows us to persist data in our application even after it's been shut down and relaunched this basically means that if a user has logged in and they reopened the application then they're still logged in they don't have to login over and over in this video I'm gonna take you through installing and using async storage as well as some of the gotchas like making sure that we pass different objects before we pass them in now if you don't know who I am I'm Adriene I do design and development videos so if you like this kind of content and you want to see more like it hit like and subscribe and let's just jump right into it the first thing we're gonna do is open up Google and go to react native aceing storage and have a look at the documentation so that we can install it now we can see that the async storage package by react native has been depreciated and is now using the react native community package instead so we'll use this for our application and to get this up and running we're gonna run yon add add react native community Ford / async storage so let's copy this into the application we're running for the bush fire front we'll add it in here as a new dependency and when we run this we'll only need to do one other command to make sure that it works on react native version 60 + which is a iOS feature to make sure that you install the pods so to do that we'll simply jump into the pods directory and run pod install and that'll make sure that all of that section is working otherwise for react native in Android you don't have to do any additional setup because it has Auto linking on the right we've got our application here with a login and when we perform an login we get a token we want to persist this data so that if for example we reload our application it's still there because right now when the store is being reloaded our state is getting refreshed and coming up like now to do that we're going to use a Singh storage set item and we do this by providing a key and a value in this case the key will be the name of the token and the value will be the token itself so to do this we're going to have to create an async function and call a sink storage so let's import a sink storage into our project to start off with here we've got our project with our login page and we can see that we've got state here which has a blank username password and token and it's got an on submit function that's currently setting this state with a token of abc123 we'll need to turn this into an async function and in here we'll be able to call async storage and we'll do set item we'll provide the first thing which will be the key name and this will be token and the second thing will be the token value which is abc123 now this is an asynchronous function so we'll have to run a wait for that to be able to run properly and when we do that it's recommended to use a try-catch loop so we'll just put this inside as well we'll put in an error handler and we'll console.log that out great so now that that's done if we refresh our application and click the submit to login button this should now be saving into a sink storage but how do you know if it's working well we'll have to retrieve it in order to retrieve it we're going to have to run get data and we do that by running a sink storage get item and the name of our key now I'm just going to copy this over here and paste it straight into our application here we've got a function that's asynchronous it's got a try-catch loop that's running asing storage get item and this will be our key here but what we want to do is we want to set this out to our state now before we do that we need to make sure that the value isn't null because if it is it'll essentially be setting our state as now and we don't want that in here we'll run this dot set state and then we'll pass in the name of the key in this case it'll be token and we'll place our value in here if we do this and we save our Dada we'll have to make sure this is run on structure method so every single time that this component is launched it calls get data and places it into the state which should show up in our application and now if we relaunch our application it should persist that information across and we'll probably see abc123 in there without having to resubmit our login this is essentially how asynchronous storage works and it makes life a lot easier we can also do this for the username so in this case our username is being safe to state so what we could do here is we could create a value here to also save the username with a key of username and the value straight from our store this dot state dot username then we can retrieve this when the application is launched by calling a username here and retrieving the username key and applying the same if statement to make sure that it's not empty then in here we'll set it against the username and that should be done so now if we refresh our application and we put in a test username in here and we submit the login and relaunch our application we should see that that username stays in there so let's do that and have a look so there it is and our username and our token is now being persisted which is awesome so what else can we do we have a Singh storage well there's lots of commands we can retrieve multiple items at the same time as well as set them multiple times we can grab all the keys or clear out all the data we currently have so let's take a look at a few of these to get multiple items we've got commands like multi get and multi set in order to use those we simply pass them in so in this example instead of having set item username and set item token we could run a weight a sink storage dot multi set in here we'll pass in an array of a race so our first array will be the username and this dot state username and the second array will be the token and the token value which is abc123 with that done we can remove these past two and if we run the same application now and update the username to testing then this should take effect and let's refresh our application and test this out there we go so that's worked perfectly now in some cases we might want to also be able to remove keys that we've set and clear are the values for example when a person logs off now to do that we use the command a Seng storage dot clear and that clears out everything on there the other item that we can also do is remove item which removes a specific key value so let's have a look at both of those to remove a value when a user logs off will first create a button to log off and let's put this down here below and call this log off we'll run on log off here and this will be an acing function that'll run when we press the button so let's do that over here and we'll call this on log off and in this case we'll start up with something simple such as clearing alpha token we'll run a weight async storage dot delete item and for the item we're trying to delete sorry remove item and item or trying to remove in this case is the actual token so all we do is pass in token here let's save that and click log off so ideally that's work but we've not set the state there to remove it from our state so we'll also pass in this dot set state and we'll remove the token here and set it to empty we've that done if we refresh the application now we'll see that the token is no longer there when we hit log off if we click Submit login it's back in there again so this is essentially how you enable a token to be removed from a Seng storage it's pretty simple but sometimes you might want to remove all the tokens on there as well to remove all the tokens we would run a Singh storage dot clear and this would clear out every token set in a Singh storage so in this case if we do that it should also clear out the username next time we refresh and let's have a look if it does that and it has so we're starting off completely fresh now now this is all good and fine if you have single values that you're storing s text but what happens when you have a large object that you want to store well a sink storage essentially only allows you to store strings so in order to store an object of large size we're actually gonna have to stringify it and then pause it whenever we want to pull it into a sink storage and pull it out let's have a look at how we do that in our application let's create a new way to store the tokens instead of running them as multis will now store the entire array as a user object so what we'll do is run a weight async storage dot set item and here we'll call this user profile now for the user profile we want to store that this dot state and this is currently an object of the username the password and the token we don't want the password so in this case what we might do is just have an object with user name with this dot state dot username and a token which is this dot state a token and in order to be able to store this properly we're gonna have to stringify it so what we're gonna do is run Jason dot stringify and pass it in this will save and when we submit our login it'll be there in a Singh storage but we'll also need to retrieve it in order to retrieve it we're going to have to pull it out in a similar manner but we're gonna have to pause it so what we'll do in here is will create a new get data set with const user profile equals a weight a sink storage get item and for this individual get item we're going to pull out the user profile now once we have this we're gonna have to pause it so to do that we're gonna go const user profile equals jason pars and we're pausing the value that's received we've got done we should be able to pull in and decompile this and it should just automatically work so let's refresh our application and test this out we're going to put in a user name of test and click Submit login we've got our token and now we're going to pull in and refresh the application and see if that stays there and persist the data so that hasn't worked we've got a bug somewhere so let's have a look at what's going on our user profile is being set here and is being saved on submit then our profile is being pulled out over here and this profile is then being paused as a JSON and it's being decompiled into our state however also if there's no value here it's not running so what we're gonna do is we're going to actually run here a non null value and make sure that is coming across properly so what test will click Submit login and let's refresh our application now so there we go we are getting our username there but we're not getting our token and this is because the token currently isn't being set to state it's happening asynchronously so in order for that to work it would also have to await this dot set state so let's try that one more time and refresh our application and that should work there we go so all that's working now we are running submit and we're json.stringify object into a single string for the user profile pulling that out and pausing it back in to our said state there are other commands you can also run such as grabbing all the keys that are currently available in a sink storage and this is just simply run by running await acing storage get all keys and that way in case you've forgotten where you've defined some of your keys you'll be able to pull those across I hope you like this video there's a lot to acing storage and it's used all over the place to make sure that your app is able to persist that data doesn't matter if it's been rebooted or restarted or even if it's crashed obviously there's a lot more to using a database if you want to use things offline and there are other modules you can install for that but this is enough to get most applications started and most of the case you just need to save a user token or some basic details to get you up and running I've got more videos around react native so if you want to check them out I've added them just upper here above and otherwise hit like hit subscribe and I'll see you in the next video

Channel: Adrian Twarog

Views: 50,054

Keywords: asyncstorage react native example, asyncstorage react native tutorial, react native async storage, react native async storage tutorial, react native asyncstorage tutorial, asyncstorage react native, asyncstorage react native login, asyncstorage react native store array, react-native-community/async-storage, asyncstorage, offline data, react native, react, tutorial, async storage, app asyncstorage, react app asyncstorage, react app async storage, react native persist data

Id: PRGHWgTydyQ

Length: 14min 18sec (858 seconds)

Published: Tue Mar 24 2020

Reddit Comments

[u/giesburts]

I'm really wondering, why are people from the React Native community still using Class components instead of functional ones? I mean almost every package I find on the internet is still written/using class components.

[u/Fun-Visual-School]

Have you tried Typescript as well? I think it helps a lot. Many libs have definitions by default. Cheers. I cross-posted in r/VisualSchool

[u/rufeng008]

you can use react-native-easy-app that is easier to use than async storage. this library is great that uses async storage to save data asynchronously and uses memory to load and save data instantly synchronously, so we save data async to memory and use in app sync, so this is great.

``` import { XStorage } from 'react-native-easy-app'; import { AsyncStorage } from 'react-native';

const initCallback = () => {

   // From now on, you can write or read the variables in RNStorage synchronously

   // equal to [console.log(await AsyncStorage.getItem('isShow'))]
   console.log(RNStorage.isShow); 

   // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
   RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 

   // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
   RNStorage.userInfo = {name: 'rufeng', age: 30}; 

};

XStorage.initStorage(RNStorage, AsyncStorage, initCallback); ```