JavaScript Libraries

[00:00:00]
>> Let's talk about JavaScript libraries. So because we're using React Native we can use both native libraries as well as JavaScript libraries. So one of the big benefits of React Native is that we can leverage this ridiculously huge JavaScript ecosystem. So not all JavaScript libraries are going to work with React Native if there's reference the browser window or if they work with CSS they won't work with React Native.

[00:00:21]
But there's still a huge amount of utility libraries that are compatible. So one of these is state functions. So I like to use these functions for formatting dates. So it's basically utility library and it has a lot of different help and methods for interacting with dates. So getting whether they just in the past or the future or how many days or seconds in between.

[00:00:47]
And these functions has a nice format utility, which basically allows you to format a date, however you want. So, let's install this library. So, I'm going to use Yarn. So, if you open your terminal and Yarn add date functions. So, notice that because this is a JavaScript library, we won't need to do any of this rebuilding of our native app, we just install the library.

[00:01:15]
And in this case, we don't even need to rerun the packager it will just work Now let's make our dates follow the following format. So 29 Sep, year and then at and then add the current time. So if we go to the format documentation which is here they have a reference for how you actually format each of the dates so let's start with the simple one so we want 29 as the current day So let's have a look to day of month.

[00:02:03]
Okay, so we just want D. Okay, so in our mood picker, so let's go to home where we have our date. So let's import format from date functions. And here we have our timestamp let's wrap this in format. So the first argument or format is the date that you want to format.

[00:02:35]
Get your remove to string here and then a second argument is the way that you want to format. So if I just add this D It's going to be fresh. So all these say 28, because there's a day today now for the month that's fine month. Okay, so we can see that this format will be MMM.

[00:03:07]
So if I do space and I get Sep. So I'll just copy this or have a reference of what I'm going to. Okay, so I think you just do a comma. Yeah, so you can just add the comma there. And then we want the year. Just look up here.

[00:03:34]
Calendar year. Okay, so calendar year will be full wise. Okay? Then we want add, so to add arbitrary text, we use single quotes. So let's do adds. An ad shows up here and then we want the hours and minutes so let's find hours Okay, hours in two digits, so that's HH, and minutes in two digits, that's MM and finally we want the AM or PM, and this is just AAA.

[00:04:24]
So again, add it to the end And now we get the format that we were looking for. Now, finally, we want to style the mood item growth as per this beautiful design. So you'll notice that we have an additional color here. So we use this lavender color for the date.

[00:04:43]
So added the color here on the theme so called color lavender. So if you copy this and add it to your theme.ts and then we can use it anywhere in our application So in components, let's create a new file called mood item, for that TSX. And I'm just going to copy this file from here And in our home, I'm going to update our map to use the mood item row instead.

[00:05:27]
So mood, let's stop map, and it's over towing a text. Let's return a mood item row. And let's pass in item. To be the item and don't forget to use the key. So key is item.timestamp. So don't worry about these going off the page. We're going to fix that later.

[00:06:01]
Let's just remove things we don't need. And there was a key warning somewhere. So it seems so there's always the top level element that needs to have the key. So because we reflected this just didn't have a key so let's do key = option.emoji. Yeah, so the key warnings don't show up when you're hot reload all the time.

[00:06:29]
So sometimes it's handy to do a fresh reload to find them. Excellent, we got to the end of the UI elements recap. So now let's talk about how to handle data.