Local Images

[00:00:00]
>> Kadi Kraman: And the last thing for our home page, let's add an image. So we're gonna use the built-in image component for this. But just FYI for advanced usage, you may want to look into using Expo image or fast image. So the built-in image might be good enough for your use cases.

[00:00:19]
But these two libraries are just very common for production applications to use because they offer additional caching and support additional image types, etc. But for us, the built-in image is fine. So I've added a link to the image on GitHub. Hopefully this works, lovely. To be able to download it.

[00:00:46]
>> Kadi Kraman: Go to my downloads folder.
>> Kadi Kraman: Here's one I made earlier through this.
>> Kadi Kraman: Okay, so in your download folders, you've been image and we can add this to our assets folder.
>> Kadi Kraman: There we go. It's a little AI generated icon royalty-free. Actually, let's create a component for it, so we could reuse it.

[00:01:19]
So in our components let's create a new file and call it PlantlyImage.tsx and here let's export function PlantlyImage.
>> Kadi Kraman: And let's return an image. So this will be an image imported from React Native.
>> Kadi Kraman: And on the web you would use URI, you would use IMG and URI.

[00:01:52]
So here we have a source. So we're going to use a local image. If we were to use a web image you would pass it an object here and you would do URI and then this would be like HTTP whatever. But we're going to use a local image, so we need to require it.

[00:02:10]
Inline requires are now supported, so we can do require.
>> Kadi Kraman: And this will be the path to our image. So we can use our alias assets and plantly.png. So the require is needed because when your app is getting bundled, then only the files that are required will be included in your bundle.

[00:02:39]
>> Kadi Kraman: And let's give it a size as well. So I want to make the size relative to the size of the user's screen. So for that I'm going to use a use window dimensions hook from react native. So this returns an object with a width and a height.

[00:02:56]
So I'll do width. So we'll have use WindowDimensions. So this will be the width of the user screen. So I'll do const, I'll make it a square image, so image size.
>> Kadi Kraman: And this will be, well, I could do width divided by 1.5. There we go. So then pass this style.

[00:03:23]
And we're just gonna do an inline style here. So width will be image size, and height will be image size, okay? And then we use this PlantyImage in our onboarding screen. So, lets find out onboarding screen,
>> Kadi Kraman: And just put it under the states bar, okay? So let me just open this on the web, and it looks a bit big.

[00:03:59]
So this is one thing that if you are developing before mobile and web, this no longer works. So worth checking if you are. So I'm gonna add a maximum height here, maximum width here as well. So I'm gonna do a Math.min. And say that it is relative to the screen size up to let's say 400.

[00:04:28]
So that way on mobile it would be nice to rotate the screen size, and then on the web it will be a sensible maximum size as well. So I think if you go to really small screens, it will scale. Just nice, and just to complete this, let's add some greeting text to our onboarding screen as well.

[00:04:46]
So let's do just above our image. Let's do a text and call this Plantly.
>> Kadi Kraman: And a little greeting, so a tagline to say, keep your plants healthy and hydrated.
>> Kadi Kraman: And before we want to style these, so let's do a heading,
>> Kadi Kraman: And a tagline, tagline.
>> Kadi Kraman: So the first text will be a heading.

[00:05:34]
>> Kadi Kraman: And the second will be a tagline.
>> Kadi Kraman: And then for the heading, we'll do a larger font size. So let's do font size 42. Make the color white.
>> Kadi Kraman: Make the font bold. So, we'll do a fontweight bold, a margin bottom 12, so they're not squished next to each other.

[00:06:12]
And for the tagline, we'll do a font size of 24. Let's make it white as well, so color white,
>> Kadi Kraman: Here we go.
>> Kadi Kraman: Okay, so I misspelled tagline, tagline.
>> Kadi Kraman: There we go. Okay, so because this text goes into multiple lines, it isn't center aligned, so we can do textAlign center to make it center aligned.

[00:07:00]
And the next thing I wanna do is I want to space these items on my screen, evenly. So in our container, instead of justifyContent center, we'll do justifyContent space-evenly.
>> Kadi Kraman: So this will add equal amounts of space between each of the elements. But this doesn't actually look that good, because I want this Plantly and the tagline to be grouped together.

[00:07:31]
So how would you do it on a web? You would wrap it on a div and how you do it in react native, you wrap it in a view. This is our div.
>> Kadi Kraman: So put these two texts in the view.
>> Kadi Kraman: Okay, and now, I need to center align this heading as well.

[00:07:53]
So go to heading and do a textAlign center.
>> Kadi Kraman: There you go. And hopefully, this matches our checkpoint, so we have a beautiful little onboarding page.